Nodejs—创建简易WebSocket通信过程详解

一、背景与问题

在现代Web应用中，实时通信需求日益增长。传统HTTP协议的"请求-响应"模式存在明显局限性：客户端必须主动发起请求才能获取最新数据，这导致实时性差、资源浪费等问题。WebSocket协议应运而生，它通过建立持久化双向通信通道，解决了HTTP协议的这些缺陷。

在实际开发中，常见的应用场景包括：实时聊天系统、在线协作工具、数据可视化看板、实时通知系统等。例如，在股票行情系统中，服务器需要实时推送最新行情数据给所有在线用户，这种场景下WebSocket的长连接特性可以显著提升数据传输效率。

二、基本原理

WebSocket协议基于TCP协议，通过HTTP协议进行握手建立连接，之后使用自定义协议进行数据传输。其核心特征包括：

单次握手建立持久连接（HTTP 101 Switching Protocols）
双向通信通道（服务器可主动推送数据）
保持连接状态（无需重复建立连接）
支持二进制和文本数据传输

与HTTP协议相比，WebSocket具有显著优势：

降低通信延迟（无需重复建立连接）
提高数据传输效率（减少协议开销）
支持双向通信（服务器可主动推送）

三、环境准备

确保已安装Node.js环境（建议v18+），并安装必要的依赖：

npm init -y
npm install ws

四、核心实现

1. 基础WebSocket服务器实现

创建server.js文件，实现最简WebSocket服务器：

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 客户端连接事件
wss.on('connection', (ws) => {
  console.log('Client connected');

  // 接收消息事件
  ws.on('message', (message) => {
    console.log(`Received: ${message.toString()}`);
    // 发送消息给客户端
    ws.send(`Echo: ${message.toString()}`);
  });

  // 断开连接事件
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

关键代码解释：

WebSocket.Server创建WebSocket服务器实例
connection事件处理客户端连接
message事件处理接收的消息
send方法用于向客户端发送消息
close事件处理连接关闭

2. 客户端实现

创建client.js文件，实现WebSocket客户端：

const WebSocket = require('ws');

// 创建WebSocket客户端
const ws = new WebSocket('ws://localhost:8080');

// 连接建立事件
ws.on('open', () => {
  console.log('Connected to server');
  // 发送消息
  ws.send('Hello, Server!');
});

// 接收消息事件
ws.on('message', (message) => {
  console.log(`Received: ${message.toString()}`);
});

// 错误处理
ws.on('error', (err) => {
  console.error('WebSocket error:', err);
});

关键代码解释：

WebSocket构造函数创建客户端实例
open事件处理连接建立
send方法发送消息
message事件处理接收的消息
错误处理机制

3. 带认证的WebSocket实现

在实际项目中，需要添加认证机制：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

// 存储客户端认证信息
const clients = new Map();

wss.on('connection', (ws, request) => {
  // 获取客户端IP
  const ip = request.socket.remoteAddress;
  
  // 假设通过查询参数进行认证
  const token = request.url?.split('?')[1]?.split('=')[1];
  
  if (!token || token !== 'secret_token') {
    ws.close(4001, 'Unauthorized');
    return;
  }
  
  clients.set(ip, ws);
  console.log(`Client ${ip} authenticated`);
  
  ws.on('message', (message) => {
    const data = JSON.parse(message.toString());
    if (data.type === 'broadcast') {
      // 广播消息给所有客户端
      clients.forEach(client => {
        client.send(JSON.stringify(data));
      });
    }
  });
});

关键改进点：

添加IP地址认证
使用查询参数进行认证
实现消息广播功能
添加自定义错误码

五、完整案例：实时聊天系统

创建完整的实时聊天系统，包含服务器和客户端实现。

1. 服务器端实现（chat-server.js）

const WebSocket = require('ws');
const http = require('http');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end('WebSocket Chat Server');
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });

// 客户端连接事件
wss.on('connection', (ws) => {
  console.log('Client connected');
  
  // 发送欢迎消息
  ws.send(JSON.stringify({
    type: 'welcome',
    message: 'Welcome to WebSocket Chat'
  }));
  
  // 接收消息事件
  ws.on('message', (message) => {
    const data = JSON.parse(message.toString());
    
    if (data.type === 'message') {
      // 广播消息给所有客户端
      wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({
            type: 'message',
            user: data.user,
            text: data.text
          }));
        }
      });
    }
  });
  
  // 断开连接事件
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

2. 客户端实现（chat-client.js）

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8080');

// 连接建立事件
ws.on('open', () => {
  console.log('Connected to server');
  
  // 发送登录信息
  ws.send(JSON.stringify({
    type: 'login',
    user: 'User123'
  }));
});

// 接收消息事件
ws.on('message', (message) => {
  const data = JSON.parse(message.toString());
  
  if (data.type === 'welcome') {
    console.log(data.message);
  } else if (data.type === 'message') {
    console.log(`[ ${data.user} ] ${data.text}`);
  }
});

// 错误处理
ws.on('error', (err) => {
  console.error('WebSocket error:', err);
});

3. 运行案例

启动服务器
```
node chat-server.js
```
在另一个终端运行客户端
```
node chat-client.js
```
测试消息发送
在客户端发送消息：{"type": "message", "user": "User123", "text": "Hello, World!"}

六、源码解析

以WebSocket.Server源码为例，分析其核心机制：

class WebSocketServer {
  constructor(options) {
    this.options = options;
    this.clients = new Set();
    this.on('connection', this._onConnection.bind(this));
  }
  
  _onConnection(socket, request) {
    const ws = new WebSocket(socket, request);
    this.clients.add(ws);
    ws.on('close', () => this.clients.delete(ws));
  }
  
  // 其他方法...
}

关键机制分析：

使用Set存储所有连接的客户端
通过事件监听处理连接建立和关闭
使用自定义协议处理消息传输

七、进阶使用

1. 消息格式规范

建议采用JSON格式进行消息传输，例如：

{
  "type": "message",
  "user": "User123",
  "text": "Hello, World!"
}

2. 添加认证机制

在连接建立时进行认证：

wss.on('connection', (ws, request) => {
  const authHeader = request.headers['authorization'];
  if (!authHeader || authHeader !== 'Bearer secret_token') {
    ws.close(4001, 'Unauthorized');
    return;
  }
  // 认证通过处理
});

3. 消息广播

实现消息广播功能：

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

4. 添加日志记录

const fs = require('fs');
const logStream = fs.createWriteStream('websocket.log', { flags: 'a' });

wss.on('connection', (ws) => {
  logStream.write(`Client connected at ${new Date()}\n`);
  
  ws.on('message', (message) => {
    logStream.write(`Received: ${message.toString()}\n`);
  });
  
  ws.on('close', () => {
    logStream.write(`Client disconnected at ${new Date()}\n`);
  });
});

八、性能与工程实践

1. 性能优化

使用ws库的perMessageDeflate选项启用消息压缩
使用cluster模块实现多进程处理
设置合理的keepalive参数保持连接
使用ping/pong机制维持连接

const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: true,
  keepalive: 10,
});

2. 异常处理

添加错误处理中间件
实现连接重连机制
设置超时机制

wss.on('error', (err) => {
  console.error('WebSocket server error:', err);
  // 记录日志并尝试重连
});

3. 安全实践

使用HTTPS和WSS加密通信
添加CSRF防护
防止XSS攻击
防止DDoS攻击

const https = require('https');
const fs = require('fs');

const options = {
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
};

const server = https.createServer(options, (req, res) => {
  res.writeHead(200);
  res.end('Secure WebSocket Chat Server');
});

const wss = new WebSocket.Server({ server });

九、常见问题与踩坑

1. 连接未关闭的问题

问题现象：客户端连接后无法主动关闭

解决方法：确保在close事件中正确关闭连接

ws.on('close', () => {
  console.log('Client disconnected');
  // 执行清理操作
});

2. 消息格式错误

问题现象：接收消息时出现TypeError: Converting undefined to object

解决方法：增加类型检查

ws.on('message', (message) => {
  try {
    const data = JSON.parse(message.toString());
    // 处理数据
  } catch (err) {
    console.error('Invalid message format:', err);
  }
});

3. 消息丢失问题

问题现象：在高并发场景下出现消息丢失

解决方法：使用消息队列中间件（如RabbitMQ）

4. 跨域问题

问题现象：浏览器端连接时出现Origin not allowed错误

解决方法：使用origin选项控制跨域

const wss = new WebSocket.Server({
  port: 8080,
  origin: 'http://localhost:3000'
});

十、最佳实践

使用ws库而不是原生WebSocket实现
始终使用JSON格式进行消息传输
实现完善的认证和授权机制
使用HTTPS/WSS保证通信安全
设置合理的超时和重连机制
使用日志记录和监控系统
对关键操作进行节流和防抖处理
对敏感数据进行加密处理
定期进行压力测试和性能优化
使用分布式架构处理高并发场景

十一、总结

WebSocket协议为现代Web应用提供了高效的实时通信能力，其持久连接和双向通信特性解决了传统HTTP协议的局限性。在实际开发中，我们需要注意：

适用场景：实时通信、数据推送、在线协作等需要双向通信的场景
不适用场景：简单查询、需要HTTP缓存的场景、需要大量静态资源的场景

通过合理使用WebSocket，可以显著提升应用的实时性和交互性。但在实际项目中，需要综合考虑性能、安全、可维护性等多方面因素，选择最适合的通信方案。对于复杂的业务场景，建议结合消息队列、分布式系统等技术构建更健壮的实时通信架构。

Nodejs—创建简易WebSocket通信过程详解

Nodejs—创建简易WebSocket通信过程详解

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础WebSocket服务器实现

2. 客户端实现

3. 带认证的WebSocket实现

五、完整案例：实时聊天系统

1. 服务器端实现（chat-server.js）

2. 客户端实现（chat-client.js）

3. 运行案例

六、源码解析

七、进阶使用

1. 消息格式规范

2. 添加认证机制

3. 消息广播

4. 添加日志记录

八、性能与工程实践

1. 性能优化

2. 异常处理

3. 安全实践

九、常见问题与踩坑

1. 连接未关闭的问题

2. 消息格式错误

3. 消息丢失问题

4. 跨域问题

十、最佳实践

十一、总结

评论已关闭

推荐阅读