基于Node.js + WebSocket打造即时聊天程序嗨聊

那么我们就来详细讲解一下“基于Node.js + WebSocket打造即时聊天程序嗨聊”的完整攻略。

什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器之间的实时数据传输变得更加简单。

Node.js 中的 WebSocket

在 Node.js 中，有很多第三方库可以用来轻松地实现 WebSocket 协议。在我们的示例中，我们使用 ws 库 (https://github.com/websockets/ws)。

实现过程

以下是构建一个简单的聊天应用程序的步骤：

1. 创建一个 Node.js 应用程序并安装必要的模块

在终端中创建一个新文件夹并初始化一个新的 Node.js 应用程序:

mkdir chat-app
cd chat-app
npm init -y

安装websocket模块

npm install ws

在应用程序的根目录下创建一个名为 index.js 的文件，然后在文件中引入 ws 模块:

const WebSocket = require('ws');

1. 创建 WebSocket 服务器

在 index.js 文件中创建一个 WebSocket 服务器:

const WebSocket = require('ws');

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

console.log('WebSocket server started');

在上面的代码中，我们创建了一个 WebSocket 服务器实例，并将其绑定到本地计算机的 8080 端口上。

1. 监听连接和消息

当客户端连接到服务器时，将触发 connection 事件。我们可以将这个事件附加到服务器实例上:

server.on('connection', (socket) => {
  console.log('Client connected.');

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

在上面的代码中，我们添加了一个事件监听器来处理客户端连接事件。当 connection 事件被触发时，我们会打印一条日志，指示新的客户端连接到了服务器。然后，我们添加了另一个事件监听器来处理 message 事件。当客户端发送一条消息时，我们将会打印这条消息到控制台上。

1. 连接WebSocket

在客户端中，我们可以使用浏览器的 WebSocket API 来连接到我们的服务器:

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

socket.addEventListener('open', (event) => {
  console.log('WebSocket connected.');
});

socket.addEventListener('message', (event) => {
  console.log('Received message:', event.data);
});

在上面的代码中，我们创建了一个 WebSocket 对象，并将其连接到我们的服务器上。当连接建立时，将触发 open 事件。在这个事件处理程序中，我们会打印一条消息，指示 WebSocket 已经连接到服务器。同样地，在接收到来自服务器的消息时，我们将就在控制台打印这条消息。

1. 发送消息

现在，我们已经连接了 WebSocket 并已经处理了来自服务器的消息。要发送一条消息，我们可以使用 send 方法:

socket.send('Hello, server!');

在上面的代码中，我们向服务器发送了一条消息。当服务器接收到这条消息时，我们会在控制台上得到相关的输出。

示例

1. 实现广播功能：当客户端发送一个消息到服务器时，服务器将把这个消息广播给所有已连接的客户端。

const WebSocket = require('ws');

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

console.log('WebSocket server started');

server.on('connection', (socket) => {
  console.log('Client connected.');

  socket.on('message', (message) => {
    console.log('Received message:', message);
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

在上面的代码中，在连接事件的处理程序中，我们添加了一行代码来循环遍历服务器上的所有客户端，并将接收到的消息发送给每个客户端。

1. 实现点对点通信：在我们的示例中，我们假设每个客户端都有一个唯一的 ID。当一个客户端向服务器发送一条消息时，服务器会将这条消息发送给另一个指定的客户端。

const WebSocket = require('ws');

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

console.log('WebSocket server started');

const clients = {};

server.on('connection', (socket) => {
  console.log('Client connected.');

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

    const { sender, recipient, content } = JSON.parse(message);

    if (!clients[sender]) {
      clients[sender] = socket;
    }

    if (clients[recipient]) {
      clients[recipient].send(content);
    }
  });
});

在上面的代码中，在连接事件的处理程序中，我们创建了一个名为 clients 的全局对象，用于存储已连接的客户端。当一个客户端向服务器发送一条消息时，我们首先将消息解析为一个包含发送者、接收者和消息内容的对象。然后，我们在 clients 对象中查找发送者和接收者。如果我们没有找到发送者，我们将创建一个新的记录。最后，如果接收者存在并且连接到服务器，我们将向它发送消息。

这样，我们就完成了基于 Node.js + WebSocket 的即时聊天程序嗨聊的构建。