【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
			}
		}
相关推荐
泓博17 分钟前
Objective-c把字符解析成字典
开发语言·ios·objective-c
try2find20 分钟前
安装llama-cpp-python踩坑记
开发语言·python·llama
失落的多巴胺29 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear32 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息34 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
样子201839 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿40 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘41 分钟前
vue文本插值
javascript·vue.js·ecmascript
番茄小能手1 小时前
【全网唯一】C# 纯本地离线文字识别Windows版dll插件
开发语言·c#
梁诚斌1 小时前
使用OpenSSL接口读取pem编码格式文件中的证书
开发语言·c++