<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聊天室</title>
		<style type="text/css">
			/* 用通配符去除内外边距 */
			*{margin: 0;padding: 0;}
			body{
				background-color: #000000;
			}
			.msg-box{
				width: 800px;
				height: 600px;
				/* 外边距上下为0 左右适应 */
				margin: 0 auto;
				background-color: #FFC0CB;
			}
			.msg-title{
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: #C3C9C9;
			}
			.msg-content{
				width: 71%;
				height: 500px;
				/* 内边距上下为0 左右2% */
				padding: 0 2%;
				float: left;
				/* 内容超出显示滚动条 */
				overflow-y: auto;
				background-color: antiquewhite;
			}
			.pe-list{
				width: 25%;
				height: 500px;
				float: left;
				background-color: bisque;
			}
			.pe-list > h3{
				text-align: center;
			}
			.msg-send{
				width: 100%;
				height: 60px;
				/* 清除浮动 */
				clear: left;
				background-color: cadetblue;
			}
			.msg-send > input{
				width: 73%;
				height: 50px;
			}
			.msg-send > button{
				width: 25%;
				height: 50px;
				color: #008000;
			}
		</style>
	</head>
	<body>
		<div class="msg-box">
			<div class="msg-title">
				相亲相爱一家人聊天室
			</div>
			<div class="msg-content" id="msgContent">
				
			</div>
			<div class="pe-list">
				<h3 id="uNumber">当前人数：50人</h3>
				<ul id="userList">
					
				</ul>
			</div>
			<div class="msg-send">
				<input type="text" id="message">
				<button type="button" onclick="sendMsg()">发送</button>
			</div>
		</div>
		
		<script type="text/javascript">
			//websocket技术 长连接的技术
			//websocket服务器地址
			//www.shijiayi.top/  地址
			//  /ws 项目名称
			//  /ChatServer 接口名称
			//  /彭于晏 用户名
			const ws = new WebSocket("wss://www.shijiayi.top/ws/ChatServer/彭于晏");
			//连接建立成功
			ws.onopen = function(){
				setMsg("与聊天服务器连接建立成功！");
			}
			//收到信息的回调
			ws.onmessage = function(event){
				//json字符串转对象
				var data = JSON.parse(event.data);
				if(data.code == 1){//上线
					setMsg("<span style='color:#00c28e'>"+data.msg+"</span>");
				}else if(data.code == 4){//下线
					setMsg("<span style='color:#ccc'>"+data.msg+"</span>");
				}else if(data.code == 2){//收到信息
					setMsg(data.sName +"说："+ data.msg);
				}else if(data.code == 3){//获取到的在线人数
					var uNumber = document.getElementById("uNumber");
					uNumber.innerText = "当前人数："+data.uNumber+"人"
				}
				
				
				//让滚动条在最下面
				msgContent.scrollTop = msgContent.scrollHeight;
				console.log(data);
			}
			//发送信息
			function sendMsg(){
				//找到输入框
				var message = document.getElementById("message");
				//获取输入内容
				var msg = message.value;
				//把输入内容发送出去
				ws.send(msg);
				//吧原始数据清楚
				message.value = "";
			}
			
			//发生错误的回调
			ws.onerror = function(e){}
			//找到div
			var msgContent = document.getElementById("msgContent");
			//发送信息的函数
			function setMsg(msg){
				//在原本的内容上面添加内容并添加br标签
				msgContent.innerHTML += msg + "<br/>";
			}
			
			//定时任务 
			// setInterval(function(){
			// 	ws.send("做回车键发送信息！！！");
			// },5000);
		</script>
	</body>
</html>

 

最后修改于 2022-04-13 15:52:52
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇