【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
			}
		}
相关推荐
耶啵奶膘2 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 分钟前
LeetCode三数之和-js题解
javascript·算法·leetcode
码农不惑32 分钟前
2025.06.27-14.44 C语言开发:Onvif(二)
c语言·开发语言
视频砖家35 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
Coding小公仔2 小时前
C++ bitset 模板类
开发语言·c++
小赖同学啊2 小时前
物联网数据安全区块链服务
开发语言·python·区块链
shimly1234563 小时前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
IT_10243 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript