本篇文章将通过构建一个简单的实时聊天应用，演示如何在前端和后端搭建 WebSocket 系统，完成实时消息传输。通过实战，帮助你更好地理解 WebSocket 在实际项目中的应用。
目录
搭建 WebSocket 服务器
首先，我们需要搭建一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 库来搭建服务器。ws 是一个常用的 WebSocket 实现，支持高效的双向通信。
1. 安装 ws 库
在项目中安装 ws 库：
npm install ws
2. 创建 WebSocket 服务器
接下来，我们编写一个简单的 WebSocket 服务器，处理客户端的连接和消息。
// websocket-server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 当有客户端连接时
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 当接收到客户端消息时
ws.on('message', (message) => {
console.log('收到消息: ', message);
// 将消息发送给所有连接的客户端
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// 连接关闭时
ws.on('close', () => {
console.log('客户端断开连接');
});
});
console.log('WebSocket 服务器启动，监听 8080 端口...');
在上面的代码中：
- 我们创建了一个 WebSocket 服务器，监听 8080 端口。
- 当客户端连接时，会触发
connection事件。 - 当服务器接收到客户端发送的消息时，它会广播该消息给所有其他已连接的客户端。
wss.clients.forEach用来遍历所有连接的客户端并发送消息。
3. 启动 WebSocket 服务器
运行服务器：
node websocket-server.js
启动成功终端会出现以下字样：
WebSocket 服务器启动，监听 8080 端口...
服务器启动后，就可以通过 WebSocket 客户端与其建立连接了。
WebSocket 客户端实现
接下来，我们在前端实现 WebSocket 客户端。我们将使用原生 JavaScript 来连接 WebSocket 服务器，并实现消息的发送与接收。
1. 创建 HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket 聊天应用</title>
<style>
#messages { height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; }
input, button { width: 100%; padding: 10px; margin-top: 10px; }
</style>
</head>
<body>
<h2>WebSocket 聊天应用</h2>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="输入消息...">
<button id="sendMessageBtn">发送</button>
<script> ... </script>
</body>
</html>
<script>
const socket = new WebSocket('ws://localhost:8080'); // 连接 WebSocket 服务器
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendMessageBtn = document.getElementById('sendMessageBtn');
// 当 WebSocket 连接成功时
socket.onopen = function() {
console.log('WebSocket 连接已建立');
};
// 当接收到服务器的消息时
socket.onmessage = function (event) {
// 检查数据类型是否为Blob
if (event.data instanceof Blob) {
// 将Blob转换为文本
const reader = new FileReader();
reader.onload = function () {
const message = reader.result;
displayMessage(message);
};
reader.readAsText(event.data);
} else {
// 如果是文本直接使用
const message = event.data;
displayMessage(message);
}
};
// 单独的消息显示函数
function displayMessage(message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight; // 滚动到最新消息
}
// 当 WebSocket 出现错误时
socket.onerror = function(error) {
console.log('WebSocket 错误: ', error);
};
// 当 WebSocket 连接关闭时
socket.onclose = function() {
console.log('WebSocket 连接已关闭');
};
// 点击发送按钮时发送消息
sendMessageBtn.onclick = function() {
const message = messageInput.value;
if (message) {
socket.send(message);
messageInput.value = ''; // 清空输入框
}
};
</script>
在这个 HTML 页面中：
- 我们创建了一个简单的聊天界面，包含一个用于显示消息的 div 和一个输入框与按钮，用于输入和发送消息。
- 使用 WebSocket 对象与后端 WebSocket 服务器建立连接，并在 onmessage 事件中接收消息并展示。
- 点击“发送”按钮时，输入的消息将通过 WebSocket 发送到服务器。
2. 测试客户端与服务器
打开浏览器，打开这个 HTML 页面，打开多个标签页，可以看到多个客户端可以实时接收到其他客户端发送的消息。
从打开两个网页客户端相互发消息到关闭页面，在终端会显示以下内容：
客户端已连接
客户端已连接
收到消息: <Buffer e4 bd a0 e5 a5 bd ef bc 81 e4 bb 8a e5 a4 a9 e6 98 9f e6 9c 9f e5 87 a0 ef bc 9f>
收到消息: <Buffer e4 bd a0 e5 a5 bd ef bc 8c e4 bb 8a e5 a4 a9 e6 98 9f e6 9c 9f e4 b8 80 e3 80 82>
客户端断开连接
客户端断开连接
实时聊天应用示例
通过上面的代码，您已经完成了一个简单的实时聊天应用。每当一个客户端发送消息时，其他所有客户端都能立刻收到这条消息。这就是 WebSocket 的魅力所在——它为实时通信提供了便捷、低延迟的解决方案。
通过这个简单的聊天应用，我们实现了：
- 消息的发送与接收：客户端可以发送消息，服务器将其广播给其他客户端。
- 实时更新：消息的接收是即时的，确保了实时的沟通效果。
常见问题与解决方案
- 无法连接 WebSocket 服务器
- 确保服务器正在运行，并且监听正确的端口。
- 确认客户端使用的 WebSocket URL 正确，例如
ws://localhost:8080。
- 消息不接收
- 检查 WebSocket 连接是否成功（查看浏览器控制台中的
onopen和onmessage输出）。 - 确认消息是否通过
socket.send()正确发送。
- 检查 WebSocket 连接是否成功（查看浏览器控制台中的
- WebSocket 连接断开
- 确保 WebSocket 连接没有被防火墙或代理阻止。
- 使用
onclose事件监听连接关闭，并实现重连机制。
小结
- 本篇文章通过一个简单的实时聊天应用，展示了如何在前端和后端使用 WebSocket 实现实时消息传输。
- 通过搭建 WebSocket 服务器和客户端，我们实现了一个简单的聊天系统，数据可以实时传输到多个客户端。
- WebSocket 为实时应用提供了高效的解决方案，适用于聊天、游戏、实时推送等场景。
🔔 下一篇文章，我们将进入 WebSocket 的性能优化，讲解如何提高 WebSocket 在高并发下的性能和稳定性。