本篇文章将通过构建一个简单的实时聊天应用，演示如何在前端和后端搭建 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) {// 检查数据类型是否为Blobif (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 连接没有被防火墙或代理阻止。
- 使用 onclose 事件监听连接关闭，并实现重连机制。