【WebSocket✨】入门之旅（三）：WebSocket 的实战应用

本篇文章将通过构建一个简单的实时聊天应用，演示如何在前端和后端搭建 WebSocket 系统，完成实时消息传输。通过实战，帮助你更好地理解 WebSocket 在实际项目中的应用。

搭建 WebSocket 服务器

首先，我们需要搭建一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 库来搭建服务器。ws 是一个常用的 WebSocket 实现，支持高效的双向通信。

1. 安装 `ws` 库

在项目中安装 ws 库：

bash 复制代码

npm install ws

2. 创建 WebSocket 服务器

接下来，我们编写一个简单的 WebSocket 服务器，处理客户端的连接和消息。

javascript 复制代码

// 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 服务器

运行服务器：

bash 复制代码

node websocket-server.js

启动成功终端会出现以下字样：

复制代码

WebSocket 服务器启动，监听 8080 端口...

服务器启动后，就可以通过 WebSocket 客户端与其建立连接了。

WebSocket 客户端实现

接下来，我们在前端实现 WebSocket 客户端。我们将使用原生 JavaScript 来连接 WebSocket 服务器，并实现消息的发送与接收。

1. 创建 HTML 页面

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>

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 连接没有被防火墙或代理阻止。
- 使用 onclose 事件监听连接关闭，并实现重连机制。

小结

本篇文章通过一个简单的实时聊天应用，展示了如何在前端和后端使用 WebSocket 实现实时消息传输。
通过搭建 WebSocket 服务器和客户端，我们实现了一个简单的聊天系统，数据可以实时传输到多个客户端。
WebSocket 为实时应用提供了高效的解决方案，适用于聊天、游戏、实时推送等场景。

🔔 下一篇文章，我们将进入 WebSocket 的性能优化，讲解如何提高 WebSocket 在高并发下的性能和稳定性。