【JS】WebSocket实现简易聊天室

【JS】WebSocket实现简易聊天室

聊天室思路

聊天室思路

1、连接服务器先建立连接,默认生成匿名用户(admin01)

2、客户端发送消息,其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)

3、客户端修改昵称,其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户)

4、第2和第3的区别为消息类别不同

示例

  • index.html
javascript 复制代码
<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
javascript 复制代码
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
			}
		}
相关推荐
狗都不学爬虫_几秒前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
Mintopia3 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
苦学编程的谢3 分钟前
Mybatis_2
java·开发语言·后端·java-ee·mybatis
微小冷23 分钟前
Vimba相机二次开发教程,基于Python
开发语言·python·二次开发·相机开发·vimba相机·vimba
从0至136 分钟前
C++编程入门:从基础到复合类型
开发语言·c++
前端小巷子1 小时前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
枫叶丹42 小时前
【Qt开发】信号与槽(二)-> 信号和槽的使用
开发语言·qt
Vertira2 小时前
python 阿里云 安装 dashscope的简介、安装
开发语言·python