使用 Node.js 实现 WebSocket 实时通信

WebSocket 是一种基于 TCP 协议的全双工通信协议,它允许客户端和服务端之间建立持久化的连接,并实现实时通信。在前端开发中,WebSocket 可以用于实现实时消息推送、游戏、在线聊天等场景。

Node.js 是一个基于 Google Chrome V8 引擎的 JavaScript 运行环境,它的事件驱动、非阻塞 I/O 模型特性使它非常适合构建高性能、实时应用程序。在本文中,我们将探讨如何使用 Node.js 来实现 WebSocket 实时通信。

安装 WebSocket 模块

使用 Node.js 实现 WebSocket 实时通信,我们需要使用第三方的 WebSocket 模块。下面介绍两个常用的 WebSocket 模块:ws 和 socket.io。

安装 ws 模块

ws 模块是一个快速、轻量级的 WebSocket 实现,它在性能和可靠性方面表现出色。我们可以通过 npm 安装它:

npm install ws

安装 socket.io 模块

socket.io 模块是一个跨浏览器的实时应用程序框架,它可以在不同的传输方式之间选择最佳的方式来建立连接。我们可以通过 npm 安装它:

npm install socket.io

下面我们分别介绍如何使用这两个模块来实现 WebSocket 实时通信。

使用 ws 模块实现 WebSocket 实时通信

下面是使用 ws 模块实现 WebSocket 实时通信的示例代码:

const WebSocket = require('ws');

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

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

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

    ws.send(`You said: ${message}`);
  });

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

代码中,我们创建了一个 WebSocket 服务器,并监听 8080 端口。当有客户端连接时,服务器会输出日志并发送一条欢迎信息。当客户端发送消息时,服务器会将消息日志输出,并回复一条消息。当客户端断开连接时,服务器会输出日志。运行代码后,在浏览器中访问 http://localhost:8080,即可在控制台中看到 WebSocket 连接成功的日志输出。

使用 socket.io 模块实现 WebSocket 实时通信

下面是使用 socket.io 模块实现 WebSocket 实时通信的示例代码:

const server = require('http').createServer();
const io = require('socket.io')(server);

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

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

    socket.send(`You said: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

server.listen(8080);

代码中,我们创建了一个 HTTP 服务器,并使用 socket.io 模块将其升级成 WebSocket 服务器。当有客户端连接时,服务器会输出日志并发送一条欢迎信息。当客户端发送消息时,服务器会将消息日志输出,并回复一条消息。当客户端断开连接时,服务器会输出日志。运行代码后,在浏览器中访问 http://localhost:8080,即可在控制台中看到 WebSocket 连接成功的日志输出。

总结

本文介绍了如何使用 Node.js 实现 WebSocket 实时通信。我们介绍了两个常用的 WebSocket 模块:ws 和 socket.io。通过示例代码,我们展示了如何使用这两个模块来创建 WebSocket 服务器,并实现实时通信的功能。希望本文对你理解和使用 WebSocket 有所帮助。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6591f640eb4cecbf2d6e658b


纠错反馈