您的位置:首页 > 新闻 > 热点要闻 > 极简聊天室-websocket版(双向通信)

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

2024/12/22 0:46:04 来源:https://blog.csdn.net/dgiij/article/details/140850644  浏览:    关键词:极简聊天室-websocket版(双向通信)

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

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版服务启动`); })
<!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>

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com