【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}}
