随着互联网的发展，即时通讯越来越普及，群聊也越来越受欢迎。在前端开发中，我们可以使用 WebSocket 技术实现实时通讯和群聊功能。本文介绍如何使用 Node.js 和 WebSocket 实现一个群聊功能。
WebSocket 简介
WebSocket 是一种在 Web 应用程序中进行双向通信的网络技术。它允许浏览器和服务器之间建立持久性的连接，实现实时通信。相比起传统的 HTTP 请求响应模式，WebSocket 可以更快地将数据传输到客户端，提高了 Web 应用程序的实时性和性能。
准备工作
在开始实现 WebSocket 群聊功能之前，我们需要安装 Node.js 和 WebSocket 库。在终端中输入以下命令进行安装：
npm install node npm install websocket
服务端实现
我们先来实现服务器端的代码，创建一个 server.js 文件，代码如下：
const WebSocketServer = require('websocket').server;
const http = require('http');
// 创建 HTTP 服务器
const server = http.createServer((request, response) => {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
// 监听端口
server.listen(8080, () => {
console.log((new Date()) + ' Server is listening on port 8080');
});
// 创建 WebSocket 服务器
const wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false,
});
const clients = [];
function originIsAllowed(origin) {
// 检查并允许所有来源连接
return true;
}
wsServer.on('request', (request) => {
// 检查连接来源是否合法
if (!originIsAllowed(request.origin)) {
request.reject();
console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
return;
}
// 接受连接请求
const connection = request.accept('chat', request.origin);
// 将客户端加入到 clients 数组中
const index = clients.push(connection) - 1;
console.log((new Date()) + ' Connection accepted.');
// 监听客户端发送的消息
connection.on('message', (message) => {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
// 广播消息给所有客户端
for (let i = 0; i < clients.length; i++) {
clients[i].sendUTF(message.utf8Data);
}
}
});
// 监听连接断开事件
connection.on('close', (reasonCode, description) => {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
clients.splice(index, 1);
});
});上面的代码创建了一个 HTTP 服务器和 WebSocket 服务器，同时监听客户端连接请求和消息发送事件，并将客户端发送的消息广播给所有客户端。
注意，我们创建 WebSocket 服务器的时候设置了 autoAcceptConnections 为 false，这是因为我们需要检查连接来源是否合法。为了简化起见，我们在 originIsAllowed 函数中返回了 true，允许所有来源连接，实际项目中我们需要根据实际情况进行检查。
客户端实现
接下来我们实现客户端的代码，创建一个 index.html 文件，代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket 群聊</title>
</head>
<body>
<input type="text" id="message" placeholder="请输入消息..."><button id="send">发送</button>
<br>
<div id="chat"></div>
<script>
const messageInput = document.getElementById('message');
const sendBtn = document.getElementById('send');
const chatDiv = document.getElementById('chat');
const ws = new WebSocket('ws://localhost:8080', 'chat');
ws.onopen = () => {
// 连接服务器成功后，发送一条消息
ws.send(JSON.stringify({type: 'join', data: '【' + new Date().toLocaleString() + '】有新用户加入'}));
};
ws.onmessage = (e) => {
// 接收到服务器发送的消息后，显示在聊天区域
const message = JSON.parse(e.data);
chatDiv.innerHTML += '<p>' + message.data + '</p>';
};
sendBtn.onclick = () => {
// 点击发送按钮发送消息到服务器
const message = {type: 'chat', data: messageInput.value};
ws.send(JSON.stringify(message));
messageInput.value = '';
};
</script>
</body>
</html>上面的代码实现了一个简单的用户界面，有一个输入框和一个发送按钮，用于发送消息。当连接成功后，客户端会发送一条消息到服务器，同时也监听了服务器发送的消息，接收到消息后会将其显示在聊天区域。
测试
现在我们已经完成了服务端和客户端的代码实现，启动服务端后，在浏览器中打开 index.html 文件可以看到聊天界面，输入消息并点击发送按钮，就可以看到成功将消息广播给了所有客户端。
总结
通过本文，我们了解了如何使用 Node.js 和 WebSocket 实现一个群聊功能，具体包括服务端和客户端的代码实现，同时也测试了实现的效果。在实际项目中，我们可以根据需求进行扩展，比如实现私聊、在线用户列表等功能，使得群聊更加丰富和实用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aa8b3badd4f0e0ff424f55