再写一个极简聊天室的websocket版，在本例中，websocket仅用于服务器向客户端传输信息，客户端向服务器发送信息是传统的http post方式，用axios来实现的，当然websocket本身是支持双向通信，主要是为了方便跟前面的SSE方式对照比较而已。
后端代码稍有不同，为方便使用websocket，引入了express-ws，是不是感觉到代码量更少了。
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文件内容也稍有不同
<!DOCTYPEhtml><html><head><title>极简聊天室websocket版</title><metacharset="utf-8"><scriptsrc="jquery-3.6.1.min.js"></script><scriptsrc="axios.min.js"></script></head><body><inputid="msg"></input><buttonid="send"onclick=sendmsg()>发送</button><ulid="msgs"></ul><script>var uid;let reg =newRegExp("(^|&)"+"uid"+"=([^&]*)(&|$)","i");let r = location.search.substr(1).match(reg);
uid=(r!=null)?decodeURI(r[2]):"me";var ws =newWebSocket("http://localhost:3000/ws");
ws.onmessage=event=>{let jvar=JSON.parse(event.data);if(jvar instanceofArray){
jvar.forEach(item=>{$("#msgs").append(`<li>${item.uid} 说: ${item.msg}</li>`)})}else{$("#msgs").append(`<li>${jvar.uid} 说: ${jvar.msg}</li>`)}}functionsendmsg(){ axios.post("http://localhost:3000/sendmsg",{"uid":uid,"msg":$("#msg").val()}).then(()=>$("#msg").val(""))}</script></body></html>
浏览器访问
本文转载自: https://blog.csdn.net/dgiij/article/details/140848216
版权归原作者 dgiij 所有， 如有侵权，请联系我们删除。
版权归原作者 dgiij 所有， 如有侵权，请联系我们删除。