【JS】WebSocket实现简易聊天室

聊天室思路
示例

聊天室思路

聊天室思路
1、连接服务器先建立连接，默认生成匿名用户(admin01)
2、客户端发送消息，其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)
3、客户端修改昵称，其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)
4、第2和第3的区别为消息类别不同
在这里插入图片描述

示例

index.html

<body>
	<div class="container">
		<h1>实现简易聊天室</h1>
		<!--消息展示框-->
		<ul class="msgList">
			<!-- 			<li>
				<div class="user_msg">
					<span>张三</span>
					<label>用户上线</label>
				</div>
			</li>
			<li>
				<span class="user_notice">用户张三昵称修改为李四</span>
			</li> -->
		</ul>
		<!--发送消息-->
		<div class="message_box">
			<input type="text" id="message" placeholder="请输入内容" autofocus />
			<button id="send">发送消息</button>
		</div>
		<!--修改昵称-->
		<div class="message_modify">
			<input type="text" id="modifyName" placeholder="请输入修改昵称" />
			<button id="modify">修改</button>
		</div>
	</div>
	<script src="index.js">
	</script>
</body>

index.js

window.onload = function() {
		//选择器封装
		let selector = name => document.querySelector(name);
		let createEl = dom => document.createElement(dom);
		//连接服务器先建立连接，需要客户端和服务端进行握手连接，连接成功后才能相互通讯
		var ws = new webSocket("ws://127.o.0.1:8090");
		//实例对象的 onopen属性，用于指定连接成功后的回调函数。
		ws.onopen = function() {
			alert('连接成功')
		};
		//连接发生错误的回调方法
		ws.onerror = function() {
			alert('连接失败')
		};
		//实例对象的 onmessage属性，用于指定收到服务器数据后的回调函数
		ws.onmessage = function(data) {
			let msg = jSON.parse(data.data);
			//显示消息
			appendLog(msg)
		};

		//显示消息
		function appendLog({
			type,
			nickname,
			message
		}) {
			let [msglist, elLi, str] = [selector(".msglist"), createEl("li")];
			if (type == "message'){//普通消息
				str =
				`<div class="user_msg">
					<span>${nickname}</span>
					<label>${message}</label>
				</div>`
			}
			else if (type == 'notification' || type == 'nick_update') { //系统通知消息
				str = `<span class="user_notice">${message}</span>`;

			};
			if (str) {
				elLi.innerHTML = str;
				msgList.appendChild(elLi);
			}
		};

		//消息发送
		selector("#send").onclick = function() {
			let inputMsg = selector(" #message");
			if (ws.readyState == webSocket.OPEN) {
				ws.send(inputMsg.value)
			};
			inputMsg.value = ''; //清空
		};
		//修改昵称
		selector("#modify").onclick = function() {
			let inputMsg = selector(" #modifyName"
				');
				if (ws.readystate == webSocket.OPEN) {
					//nick_${inputMsg.value}这里具体服务端让你写什么你们具体沟通
					ws.send(`/nick_${inputMsg.value}`)
				}; I
			}
		}