如何在 Node.js 中实现 WebSocket 通信-JavaScript中文网-JavaScript教程资源分享门户

引言

随着 Web 技术的发展，传统的 HTTP 协议已经不能满足现代应用的需求，特别是实时通信方面。WebSocket 协议应运而生，它提供了一种全双工、实时的通信方式，可以在服务器和客户端之间建立持久连接，从而实现实时通信。

Node.js 作为一种高性能的服务器端 JavaScript 运行环境，自然也支持 WebSocket 协议。本文将介绍如何在 Node.js 中实现 WebSocket 通信，包括 WebSocket 协议的基本原理、使用 Node.js 实现 WebSocket 服务器、使用 WebSocket 进行实时通信等方面。

WebSocket 协议基础

WebSocket 协议是一个基于 TCP 的协议，它的特点是全双工、实时、低延迟、轻量级。WebSocket 协议的工作流程如下图所示：

客户端向服务器发起 WebSocket 握手请求。
服务器接收到握手请求后，回复一个握手响应，表示允许建立 WebSocket 连接。
客户端和服务器之间建立 WebSocket 连接，可以进行实时通信。
连接关闭时，客户端和服务器都可以发送关闭帧，表示关闭连接。

WebSocket 协议的数据帧格式如下：

WebSocket 数据帧由以下几个部分组成：

FIN（1 bit）：表示这是一个数据帧的最后一个数据帧。
RSV1、RSV2、RSV3（各 1 bit）：保留位，暂时没有使用。
Opcode（4 bit）：表示数据帧的类型，有以下几种类型：
- 0x0：表示这是一个继续帧。
- 0x1：表示这是一个文本帧。
- 0x2：表示这是一个二进制帧。
- 0x8：表示这是一个关闭帧。
- 0x9：表示这是一个 ping 帧。
- 0xA：表示这是一个 pong 帧。
Mask（1 bit）：表示 Payload 数据是否经过掩码处理，客户端发送数据时必须进行掩码处理。
Payload length（7 bit 或 7+16 bit 或 7+64 bit）：表示 Payload 数据的长度，具体长度由 Payload length field 的值决定。
Masking key（32 bit）：如果 Mask 为 1，则有一个 32 位的掩码键用于掩码处理。
Payload data：表示数据帧的实际数据内容。

使用 Node.js 实现 WebSocket 服务器

在 Node.js 中，可以使用 ws 模块来实现 WebSocket 服务器。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('client connected');
  
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send('server received: ' + message);
  });
  
  ws.on('close', function close() {
    console.log('client disconnected');
  });
});

上面的代码创建了一个 WebSocket 服务器，监听 8080 端口。当客户端连接到服务器时，服务器会输出 client connected，并监听客户端发送的消息。当客户端发送消息时，服务器会输出 received: message，并回复一个消息 server received: message。当客户端关闭连接时，服务器会输出 client disconnected。

使用 WebSocket 进行实时通信

使用 WebSocket 进行实时通信可以分为两个步骤：客户端与服务器建立 WebSocket 连接，客户端和服务器之间进行实时通信。

客户端与服务器建立 WebSocket 连接

在客户端中，可以使用浏览器原生的 WebSocket 对象来建立 WebSocket 连接。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
  console.log('connected');
  
  ws.send('hello server');
};

ws.onmessage = function(event) {
  console.log('received: ' + event.data);
};

ws.onclose = function() {
  console.log('disconnected');
};

上面的代码创建了一个 WebSocket 对象，连接到本地的 8080 端口。当连接建立成功时，客户端会输出 connected，并发送一个消息 hello server。当客户端接收到服务器发送的消息时，客户端会输出 received: message。当连接关闭时，客户端会输出 disconnected。

客户端和服务器之间进行实时通信

在客户端和服务器之间建立了 WebSocket 连接后，就可以进行实时通信了。客户端可以使用 WebSocket 对象的 send 方法发送消息，服务器可以监听 message 事件接收消息，并使用 WebSocket 对象的 send 方法回复消息。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
  console.log('connected');
  
  setInterval(function() {
    ws.send('ping');
  }, 1000);
};

ws.onmessage = function(event) {
  console.log('received: ' + event.data);
};

ws.onclose = function() {
  console.log('disconnected');
};

// 服务器
const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('client connected');
  
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send('server received: ' + message);
  });
  
  ws.on('close', function close() {
    console.log('client disconnected');
  });
  
  setInterval(function() {
    ws.send('pong');
  }, 1000);
});

上面的代码实现了一个简单的 ping-pong 实例。客户端每隔 1 秒发送一个 ping 消息，服务器每隔 1 秒发送一个 pong 消息。客户端和服务器都可以监听 message 事件接收消息，并使用 WebSocket 对象的 send 方法回复消息。

总结

本文介绍了如何在 Node.js 中实现 WebSocket 通信，包括 WebSocket 协议的基本原理、使用 Node.js 实现 WebSocket 服务器、使用 WebSocket 进行实时通信等方面。WebSocket 协议的全双工、实时、低延迟、轻量级的特点使得它在实时通信方面有着广泛的应用前景。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650ad03f95b1f8cacd52a22d