Node.js 中的 WebSocket 底层实现

WebSockets 是一种网络通信协议，可实现双向客户端-服务器通信。

WebSockets 通常用于需要即时更新的应用程序，使用 HTTP 之上的持久双工通道来支持实时交互，而无需持续进行连接协商。服务器推送是 WebSockets 的众多常见用例之一。

本文首先从代码角度研究了 JavaScript 中 WebSockets 方程的两边，在服务器上使用 Node.js，在浏览器中使用原始 JavaScript。

WebSocket 协议

以前，在浏览器中通过 HTTP 进行双工通信或服务器推送需要相当多的技巧。如今，WebSockets 已成为 HTTP 的正式组成部分。它充当普通 HTTP 连接的"升级"连接。

WebSockets 可让您在浏览器客户端和后端之间来回发送任意数据。任一端都可以发起新消息，因此您拥有了用于各种需要持续通信或广播的实时应用程序的基础架构。开发人员将 WebSockets 协议用于游戏、聊天应用程序、直播、协作应用程序等。可能性无穷无尽。

为了本文的目的，我们将创建一个简单的服务器和客户端，然后使用它们来深入了解 WebSockets 通信期间发生的情况。

创建一个简单的服务器

首先，您需要一个/server包含两个子目录的目录/client和/server。有了这些之后，您需要一个非常简单的 Node 服务器，该服务器建立 WebSocket 连接并回显发送给它的任何内容。接下来，进入/websockets/server并开始一个新项目：

javascript 复制代码

$ npm init

接下来我们需要ws 项目，我们将使用它来支持 WebSocket：

javascript 复制代码

$ npm install ws

有了这些，我们可以绘制一个简单的回显服务器，如下所示 echo.js：

javascript 复制代码

// echo.js
const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log('Received message:', message);   

    ws.send(message); // Echo the message back to the client
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('server started');

这里，我们监听端口 3000，然后监听WebSocket.server对象上的连接事件。一旦connection发生，我们就会获取套接字对象 ( ws) 作为回调的参数。使用它，我们监听另外两个事件：message和close。

每当客户端发送消息时，它都会调用onMessage处理程序并将消息传递给我们。在该处理程序中，我们使用ws.send()方法发送回显响应。

请注意 ws.send() 还允许我们在需要时发送消息，因此我们可以根据其他事件将更新推送到客户端，例如来自服务的更新或来自另一个客户端的消息。

处理程序onClose让我们在客户端断开连接时执行工作。在本例中，我们只需记录它即可。

测试套接字服务器

如果能有一种简单的方法从命令行测试套接字服务器就好了，Websocat 工具非常适合此目的。它的安装过程很简单，如这里所述，并且有许多使用它的示例。

现在启动服务器：

/websockets/server $ node echo.js

使用Ctrl-z和将其置于背景状态$ bg，然后运行以下命令：

bash 复制代码

$ ./websocat.x86_64-unknown-linux-musl -t --ws-c-uri=wss://localhost:3000/ - ws-c:cmd:'socat - ssl:echo.websocket.org:443,verify=0'

这将建立一个开放的 WebSocket 连接，让您可以输入到控制台并查看响应。您将获得如下交互：

bash 复制代码

$ node echo.js 
Server started
^Z
[1]+  Stopped                 node echo.js
matthewcarltyson@dev3:~/websockets/server$ bg
[1]+ node echo.js &
matthewcarltyson@dev3:~/websockets/server$ ./websocat.x86_64-unknown-linux-musl -t --ws-c-uri=wss://localhost:3000/ - ws-c:cmd:'socat - ssl:echo.websocket.org:443,verify=0'
Request served by 7811941c69e658
An echo test
An echo test
Works
Works
^C
matthewcarltyson@dev3:~/websockets/server$ fg
node echo.js
^C

创建客户端

现在，让我们进入/websockets/client目录并创建一个可用于与服务器交互的网页。让服务器在后台运行，我们将从客户端访问它。

首先，创建一个index.html如下文件：

html 复制代码

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="message" placeholder="Enter message">
    <button id="send-btn">Send</button>
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

这仅提供了一个文本输入和一个提交按钮。它本身不做任何事情，仅提供我们在包含的脚本文件中需要的 DOM 元素：

javascript 复制代码

// script.js
const wsUri = "ws://localhost:3000";
const outputDiv = document.getElementById("output");
const messageInput = document.getElementById("message");
const sendButton = document.getElementById("send-btn");

let websocket;

function connect() {
    websocket = new WebSocket(wsUri);

    websocket.onopen = function (event) {
        outputDiv.innerHTML += "
Connected to server!

";
    };

    websocket.onmessage = function (event) {
        const receivedMessage = event.data;
        outputDiv.innerHTML += "
Received: " + receivedMessage + "

";
    };

    websocket.onerror = function (event) {
        outputDiv.innerHTML += "
Error: " + event.error + "

";
    };

    websocket.onclose = function (event) {
        outputDiv.innerHTML += "
Connection closed.

";
    };
}

sendButton.addEventListener("click", function () {
    const message = messageInput.value;
    if (websocket && websocket.readyState === WebSocket.OPEN) {
        websocket.send(message);
        messageInput.value = "";
    } else {
        outputDiv.innerHTML += "
Error: Connection not open.

";
    }
});

connect(); // Connect immediately

此脚本使用浏览器原生 API 设置了多个事件处理程序。脚本加载后，我们立即启动 WebSocket，并监视open、onclose、onmessage和onerror事件。

每个事件都会将其更新附加到 DOM。最重要的是onmessage，我们从服务器接受消息并显示它。

按钮本身的 Click 处理程序接收用户输入的输入（messageInput.value），并使用 WebSocket 对象通过函数将其发送到服务器send()。然后我们将输入的值重置为空字符串。

假设后端仍在运行且可在ws://localhost:3000处使用，我们现在可以运行前端。我们可以使用http-server作为运行前端的简单方法。

这是一种在 Web 服务器中托管静态文件的简单方法，类似于 Python 的 http 模块或Java 的简单 Web 服务器，但适用于 Node。

它可以作为全局 NPM 包安装，也可以简单地npx从客户端目录使用运行：

/websockets/client/ $ npx http-server -o

当我们运行上一个命令并访问该页面时，我们会得到应有的表单。但是当我们在输入框中输入消息并点击发送时，它显示：

Received: [object Blob]

ws如果您查看浏览器开发控制台，所有内容都通过 WebSocket 通道（选项卡中的选项卡）进行network。问题是，为什么它会以 blob 的形式返回？

如果你查看服务器控制台，它会显示：

Client connected
Received message: <Buffer 6f 6d 20 6d 61 6e 69 20 70 61 64 6d 65 20 68 75 6d>

所以现在我们知道问题出在服务器上。问题是ws模块的较新版本不会自动将消息解码为字符串，而是只提供二进制缓冲区。这是echo.js onmessage处理程序中的快速修复：

ws.on('message', (message, isBinary) => {
  message = isBinary ? message : message.toString();
  console.log('Received message:', message);   
  ws.send(message); 
});

我们对回调使用第二个参数isBinary，如果处理程序接收到一个字符串，我们会使用快速将其转换为字符串message.toString()。

这篇快速指南阐明了 WebSocket 客户端-服务器通信的底层机制，没有框架的混淆。

如您所见，使用 WebSocket 高级功能的基础非常简单。只需使用简单的回调和消息发送，您就可以使用浏览器标准 API 和流行的 Node 库进行全双工和异步通信。

当然，在许多项目中，你会希望在前端使用React之类的东西，在后端使用Node或类似的运行时。幸运的是，一旦你了解了基础知识，这些框架就很容易集成。

此处的讨论和示例有意忽略了安全性，就像 Web 开发的每个领域一样，安全性增加了一层复杂性，需要在堆栈的两侧进行管理。

可扩展性和错误处理是我们在实际 WebSockets 实现中需要解决的其他问题。