【Node.js从基础到高级运用】二十四、Node.js中实现全双工通信-CFANZ编程社区

引言

什么是WebSocket？

WebSocket是一种网络通信协议，提供了一种在单个TCP连接上进行全双工通信的方式。与传统的HTTP请求不同，WebSocket在建立连接后可以保持连接状态，使得数据可以随时从客户端发送到服务器，或者从服务器发送到客户端。

开始之前

在开始之前，请确保你的电脑上已经安装了Node.js。你可以通过访问Node.js官网来下载并安装最新版本的Node.js。

步骤1：创建Node.js项目

首先，打开命令提示符或终端，然后执行以下命令来创建一个新的Node.js项目：

mkdir websocket-demo
cd websocket-demo
npm init -y

这些命令将创建一个新的文件夹websocket-demo，并初始化一个新的Node.js项目。

步骤2：安装WebSocket库

我们将使用ws库来实现WebSocket通信。在项目文件夹中执行以下命令来安装ws库：

npm install ws

步骤3：创建WebSocket服务器

创建一个名为server.js的新文件，并添加以下代码：

const WebSocket = require('ws'); // 引入WebSocket库

// 创建WebSocket服务器，监听端口3000
const wss = new WebSocket.Server({ port: 3000 });

// 当有客户端连接时触发
wss.on('connection', function connection(ws) {
  console.log('客户端已连接');

  // 当从客户端接收到消息时触发
  ws.on('message', function incoming(message) {
    console.log('收到消息：', message);

    // 将消息回传给客户端
    ws.send(`服务器收到消息：${message}`);
  });

  // 向客户端发送欢迎消息
  ws.send('欢迎连接到WebSocket服务器');
});

console.log('WebSocket服务器正在监听端口3000...');

在这段代码中，我们创建了一个WebSocket服务器，监听3000端口。当有客户端连接时，我们会向客户端发送一条欢迎消息，并监听客户端发送的消息。当收到消息时，我们会将其打印出来，并发送一条回复消息。

步骤4：创建客户端HTML页面

创建一个名为index.html的新文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket客户端示例</title>
<script>
  // 当页面加载完成时执行
  window.onload = function() {
    // 创建WebSocket连接
    const socket = new WebSocket('ws://localhost:3000');

    // 当连接打开时触发
    socket.onopen = function() {
      console.log('WebSocket连接已打开');
      // 发送消息到服务器
      socket.send('你好，服务器！');
    };

    // 当收到服务器消息时触发
    socket.onmessage = function(event) {
      console.log('收到服务器消息：', event.data);
    };

    // 当连接关闭时触发
    socket.onclose = function() {
      console.log('WebSocket连接已关闭');
    };

    // 当发生错误时触发
    socket.onerror = function(error) {
      console.error('WebSocket发生错误：', error);
    };
  };
</script>
</head>
<body>
<h1>WebSocket客户端示例</h1>
</body>
</html>

在这个HTML页面中，我们创建了一个WebSocket客户端，它会尝试连接到我们之前创建的WebSocket服务器。一旦连接成功，它会发送一条消息到服务器，并监听从服务器接收到的消息。

步骤5：运行WebSocket服务器

返回命令提示符或终端，运行以下命令来启动WebSocket服务器：

node server.js

步骤6：打开客户端HTML页面

在浏览器中打开index.html文件，你应该能够看到控制台中打印出“WebSocket连接已打开”和“收到服务器消息”的信息。

至此，你已经成功创建了一个简单的全双工WebSocket通信示例。客户端和服务器可以实时地发送和接收消息。

进阶：多个客户端之间的通信和消息广播

为了实现多个客户端之间的通信和消息广播，我们需要对之前的服务器代码进行一些修改。以下是一个简单的示例，展示了如何在WebSocket服务器上实现消息广播，使得一个客户端发送的消息可以被所有连接的客户端接收。

首先，我们修改server.js文件，添加广播功能：

const WebSocket = require('ws'); // 引入WebSocket库

// 创建WebSocket服务器，监听端口3000
const wss = new WebSocket.Server({ port: 3000 });

// 广播给所有客户端的函数
function broadcast(message) {
  // 遍历所有客户端
  wss.clients.forEach(function each(client) {
    // 检查客户端是否处于打开状态
    if (client.readyState === WebSocket.OPEN) {
      // 向客户端发送消息
      client.send(message);
    }
  });
}

// 当有客户端连接时触发
wss.on('connection', function connection(ws) {
  console.log('客户端已连接');

  // 当从客户端接收到消息时触发
  ws.on('message', function incoming(message) {
    console.log('收到消息：', message);

    // 广播消息给所有连接的客户端
    broadcast(`客户端说：${message}`);
  });

  // 向客户端发送欢迎消息
  ws.send('欢迎连接到WebSocket服务器');
});

console.log('WebSocket服务器正在监听端口3000...');

在这个修改后的版本中，我们添加了一个broadcast函数，它会遍历所有连接的客户端，并向它们发送消息。当服务器接收到一个客户端发送的消息时，它会调用broadcast函数，将这个消息发送给所有其他客户端。

客户端的代码可以保持不变，因为它们只需要处理从服务器接收到的消息。当你运行这个服务器并从一个客户端发送消息时，所有连接的客户端都会收到这条消息。

现在，你可以通过以下步骤来测试广播功能：

运行修改后的server.js文件来启动WebSocket服务器。
在浏览器中多次打开index.html文件以创建多个客户端。
从任何一个客户端发送消息，观察其他客户端是否也收到了相同的消息。

通过这种方式，你可以实现一个简单的聊天室功能，其中一个客户端的消息会被广播到所有其他客户端。这是实现多客户端通信的基础，并且可以根据具体需求进行扩展和优化。

总结

在本篇博客文章中，我们详细介绍了如何在Node.js环境下使用WebSocket实现全双工通信。我们首先了解了WebSocket协议的基本概念，然后逐步搭建了一个简单的WebSocket服务器和客户端。通过实际的代码示例，我们展示了如何在服务器端创建WebSocket服务，并在客户端页面中建立与服务器的连接以及进行消息的发送和接收。

通过以上步骤，我们可以总结出实现WebSocket通信的关键点：