极简聊天室-websocket版

再写一个极简聊天室的websocket版,在本例中,websocket仅用于服务器向客户端传输信息,客户端向服务器发送信息是传统的http post方式,用axios来实现的,当然websocket本身是支持双向通信,主要是为了方便跟前面的SSE方式对照比较而已。

后端代码稍有不同,为方便使用websocket,引入了express-ws,是不是感觉到代码量更少了。

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)); });

app.post('/sendmsg',express.json(), (req,res)=>{
	msgs.push(req.body);
	res.json({"code":200});
	wsServer.getWss().clients.forEach(client=>{ client.send(JSON.stringify(req.body)) });
});

app.listen(3000, () => { console.log(`极简聊天室WebSocket版服务启动`); })

前端html文件内容也稍有不同

html 复制代码
<!DOCTYPE html>
<html>
<head>
<title>极简聊天室websocket版</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
<script src="axios.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()	{ axios.post("http://localhost:3000/sendmsg",{"uid":uid,"msg":$("#msg").val()}).then(()=>$("#msg").val("")) }
</script>
</body>
</html>

浏览器访问

相关推荐
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
m0_748234526 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
噢,我明白了6 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
Hello_WOAIAI7 小时前
批量将 Word 文件转换为 HTML:Python 实现指南
python·html·word
sanguine__7 小时前
APIs-day2
javascript·css·css3
关你西红柿子7 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根7 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.7 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析