极简聊天室-websocket版(双向通信)

我们知道WebSocket是可以双向通信的,把极简聊天室代码又改了一下,前端发信息到后端也使用websocket,其实代码量更少了。。。

javascript 复制代码
const express = require('express');
const app = express();
var wsServer = require('express-ws')(app)

var msgs=[];

app.use('/', express.static('./'));

app.ws('/ws', (ws,req)=>{
	ws.send(JSON.stringify(msgs));
	ws.on('message', msg => {
		msgs.push(JSON.parse(msg));
		wsServer.getWss().clients.forEach(client=>{ client.send(msg) });
		})
});

app.listen(3000, () => { console.log(`极简聊天室WebSocket版服务启动`); })
html 复制代码
<!DOCTYPE html>
<html>
<head>
<title>极简聊天室websocket版</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<input id="msg"></input><button id="send" onclick=sendmsg()>发送</button>
<ul id="msgs">
</ul>
<script>
var uid;
let reg = new RegExp("(^|&)" + "uid" + "=([^&]*)(&|$)","i");
let r = location.search.substr(1).match(reg);
uid=(r!=null)?decodeURI(r[2]):"me";

var ws = new WebSocket("http://localhost:3000/ws");

ws.onmessage = event => {
	let jvar=JSON.parse(event.data);
	if (jvar instanceof Array) { jvar.forEach(item=>{ $("#msgs").append(`<li>${item.uid} 说: ${item.msg}</li>`)  })  }
	else { $("#msgs").append(`<li>${jvar.uid} 说: ${jvar.msg}</li>`) }
}

function sendmsg()	{  ws.send(JSON.stringify({"uid":uid,"msg":$("#msg").val()})) }
</script>
</body>
</html>

效果跟前面一样,就不再贴图了。

相关推荐
游戏开发爱好者82 小时前
iOS重构期调试实战:架构升级中的性能与数据保障策略
websocket·网络协议·tcp/ip·http·网络安全·https·udp
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
Piper蛋窝4 小时前
深入 Go 语言垃圾回收:从原理到内建类型 Slice、Map 的陷阱以及为何需要 strings.Builder
后端·go
却道天凉_好个秋5 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css