什么是 WebSocket 测试服务器？

WebSocket 测试服务器是一个临时的、用于开发和调试的 WebSocket 服务,它允许你：

• 验证客户端代码：测试你的网页、移动 App 或其他客户端程序是否能正确地连接、发送和接收 WebSocket 消息。
• 模拟服务器行为：你可以让服务器自动回复特定的消息，或者模拟断开连接、发送错误消息等异常情况。
• 双向通信测试：直观地看到客户端和服务器的消息是如何来回传递的。
• 协议调试：检查 HTTP 握手过程和 WebSocket 数据帧的格式。

常用的 WebSocket 测试工具

这些工具分为两类：在线测试工具（最方便）和 本地搭建工具（更灵活、可控）。

A. 在线测试工具（无需安装，打开网页即用）

这些工具非常适合快速测试和验证。

1. WebSocket.org's Test Tool

   • 网址: https://www.websocket.org/echo.html
   • 特点: 经典的回显服务器，你发送什么，它就立刻返回什么，界面简洁,连接信息一目了然。
   • 适用场景: 快速检查客户端是否能建立连接并发送消息。

2. wscat

   
   （图片来源网络，侵删）
   • 网址: 通常通过 npm 安装，但有很多在线版本，https://www.websocket.org/echo.html 也可以看作一个简单的 wscat 替代品。
   • 特点: 命令行工具，功能强大，可以连接、发送、接收,非常灵活。
   • 适用场景: 喜欢使用命令行的开发者,或者需要编写自动化测试脚本。

3. Socket.IO Client

   • 网址: https://socket.io/docs/v4/client-api/ (文档中有在线演示链接)
   • 特点: 专门用于测试 Socket.IO 协议（一个基于 WebSocket 的库，增加了重连、事件等特性）。
   • 适用场景: 你的项目使用了 Socket.IO。

B. 本地搭建测试服务器（更灵活、更可控）

当你需要更复杂的测试逻辑，或者不想依赖外部服务时,本地搭建是最好的选择。

1. Node.js + ws 库 (推荐)

   • 优点: Node.js 轻量级，ws 库是 WebSocket 的事实标准，简单易用,性能好。
   • 适用场景: JavaScript/TypeScript 开发者,需要快速搭建一个功能齐全的测试服务器。

2. Python + websockets 库

   
   （图片来源网络，侵删）
   • 优点: Python 语法简洁，websockets 库功能强大且优雅。
   • 适用场景: Python 开发者，或需要将 WebSocket 服务集成到现有 Python 项目中。

3. 浏览器端测试服务器

   • 优点: 无需任何后端服务,直接在浏览器中运行。
   • 缺点: 功能有限，无法处理 HTTP 握手，也无法作为真正的“服务器”被其他客户端连接。
   • 适用场景: 仅需测试浏览器客户端的发送和接收逻辑。

如何本地搭建一个 WebSocket 测试服务器

这里我们以最常用的 Node.js + ws 库 为例,搭建一个简单的回显服务器和一个广播服务器。

步骤 1: 环境准备

确保你已经安装了 Node.js 和 npm。

步骤 2: 创建项目并安装依赖

# 1. 创建一个新目录
mkdir websocket-test-server
# 2. 进入目录
cd websocket-test-server
# 3. 初始化 npm 项目
npm init -y
# 4. 安装 ws 库
npm install ws

步骤 3: 编写服务器代码

你可以在项目根目录下创建一个 server.js 文件。

示例 1: 简单的回显服务器

服务器会将对收到的任何消息原封不动地发送回客户端。

// server.js
const WebSocket = require('ws');
// 创建 WebSocket 服务器，监听在 8080 端口
const wss = new WebSocket.Server({ port: 8080 });
console.log('WebSocket 服务器已启动，监听 ws://localhost:8080');
// 当有新的客户端连接时
wss.on('connection', (ws) => {
  console.log('新的客户端已连接!');
  // 当收到客户端消息时
  ws.on('message', (message) => {
    console.log(`收到消息: ${message}`);
    // 将消息发送回客户端
    ws.send(`服务器回复: ${message}`);
  });
  // 当客户端断开连接时
  ws.on('close', () => {
    console.log('客户端已断开连接');
  });
  // 当发生错误时
  ws.on('error', (error) => {
    console.error(`WebSocket 错误: ${error.message}`);
  });
});

示例 2: 广播服务器

服务器会将一个客户端发送的消息广播给所有连接的客户端。

// server-broadcast.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8081 });
const clients = new Set(); // 用来存储所有连接的客户端
console.log('WebSocket 广播服务器已启动，监听 ws://localhost:8081');
wss.on('connection', (ws) => {
  console.log('新的客户端已连接!');
  clients.add(ws); // 将新客户端加入集合
  ws.on('message', (message) => {
    console.log(`收到消息，准备广播: ${message}`);
    // 遍历所有客户端并发送消息
    clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) { // 确保客户端仍然连接
        client.send(`广播消息: ${message}`);
      }
    });
  });
  ws.on('close', () => {
    console.log('客户端已断开连接');
    clients.delete(ws); // 从集合中移除断开的客户端
  });
  ws.on('error', (error) => {
    console.error(`WebSocket 错误: ${error.message}`);
    clients.delete(ws); // 发生错误时也移除客户端
  });
});

步骤 4: 启动服务器

在终端中运行你的脚本：

# 运行回显服务器
node server.js
# 或者运行广播服务器
node server-broadcast.js

你会看到类似 WebSocket 服务器已启动，监听 ws://localhost:8080 的输出。

如何测试你的服务器

现在服务器已经运行起来了,你可以用以下几种方式进行测试。

方法 A: 使用浏览器开发者工具

这是最直接的方法。

1. 打开 Chrome 或 Firefox 浏览器，按 F12 打开开发者工具。

2. 切换到 Console (控制台) 标签页。

3. 输入以下 JavaScript 代码并回车,连接到你的服务器：

   // 连接到回显服务器 (端口 8080)
   const ws = new WebSocket('ws://localhost:8080');
   // 连接成功时触发
   ws.onopen = function(event) {
     console.log('连接成功!');
     // 发送一条消息
     ws.send('你好，服务器！');
   };
   // 收到消息时触发
   ws.onmessage = function(event) {
     console.log('收到服务器消息:', event.data);
   };
   // 连接关闭时触发
   ws.onclose = function(event) {
     console.log('连接已关闭');
   };
   // 发生错误时触发
   ws.onerror = function(error) {
     console.error('WebSocket 错误:', error);
   };

4. 观察结果：

   • 在浏览器的 Console 中，你会看到 "连接成功!"。
   • 服务器终端会打印 新的客户端已连接! 和 收到消息: 你好，服务器!。
   • 浏览器 Console 会再次打印 收到服务器消息: 服务器回复: 你好，服务器!。

方法 B: 使用在线测试工具

1. 打开 WebSocket.org's Test Tool。
2. 在底部的 "Location" 输入框中，输入你的服务器地址，ws://localhost:8080。
3. 点击 "Connect" 按钮。
4. 在顶部的 "Message" 输入框中输入任意文字，点击 "Send"。
5. 你会在下方的 "Log" 区域看到连接、发送和接收的完整过程,以及服务器返回的回显消息。

方法 C: 使用命令行工具 wscat

1. 如果你没有安装，先全局安装它：

   npm install -g wscat

2. 在一个新的终端窗口中，连接到你的服务器：

   # 连接到回显服务器
   wscat -c ws://localhost:8080

3. 连接成功后，你就可以直接在终端输入消息并发送（回车即发送）,收到的消息也会直接打印在终端。

对于绝大多数开发者来说，本地搭建一个 Node.js + ws 的测试服务器 是最灵活和强大的选择，而 在线工具 和 浏览器控制台 则是日常快速验证的利器。