使用webSocket在页面群聊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用webSocket在页面群聊相关的知识，希望对你有一定的参考价值。
前文说Socket可以再命令行群聊，但我们希望的是用户可以在页面进行群聊
Websocket完美的实现了这个功能
首先，我们应该下载一个ws第三方模块，命令是npm install ws --save如果不想添加package.json则可不写--save
服务器代码为
const WebSocket = require(‘ws‘);
const server = new WebSocket.Server({ port: 9000 });
const clients = [];
server.on(‘connection‘, (client) => {
client.id = clients.length;
clients.push(client);
client.on(‘message‘, (message) => {
for (var i = 0; i < clients.length; i++) {
clients[i] && clients[i].send(message);
/* 这三行代码等价与上面的一行
if(clients[i]){
clients[i].send(message)
}*/
}
});
//如果连接出错，把用户移除群聊
client.on(‘error‘, () => {
clients[client.id] = null;
});
//如果用户关闭连接，把用户移出群聊
client.on(‘close‘, () => {
clients[client.id] = null;
});
});
html端代码
<body>
<input id="input" />
<button id="button" onclick="handleClick()">提交</button>
<div id="content"></div>
<script>
//在高级浏览器中内置了websocket
var client = new WebSocket("ws://127.0.0.1:9000");
input = document.getElementById("input");
content = document.getElementById("content");
function handleClick() {
client.send(input.value);
}
client.onmessage = function(e){
content.innerHTML = e.data;
}
</script>
</body>
以上是关于使用webSocket在页面群聊的主要内容，如果未能解决你的问题，请参考以下文章
React系列——websocket群聊系统在react的实现
React系列——websocket群聊系统在react的实现
在群聊中，新消息事件（websocket）应该由客户端发送还是API发送？