Express.js 集成 WebSocket 实现即时通信-JavaScript中文网-JavaScript教程资源分享门户

近年来，随着互联网技术的不断发展，即时通讯已经成为人们日常生活和工作中不可或缺的一部分。而 WebSocket 技术则成为开发者愈发重视的一个技术领域，这个场景中 Express.js 框架对于 WebSocket 技术的使用的需求也越来越频繁，本文将介绍如何在 Express.js 中集成 WebSocket 实现即时通信。

一、什么是 WebSocket？

首先我们需要简单介绍一下 WebSocket 技术，WebSocket 是一种适用于浏览器和服务器之间进行实时、双向通信的协议，它通过一次 HTTP 握手来建立连接，随后 TCP 连接将转换为全双工模式，通过一些专门的指定帧，实现双向的数据传输。

与传统的 Web 应用相比，WebSocket 可以提供更高效、更实时、更灵活的通信方式，这也是为什么在聊天、视频以及游戏等实时应用场景中，WebSocket 能得到广泛的应用。

二、WebSocket 实现的技术方案

在实现 WebSocket 技术方案时，需要选择一个最合适的技术组合，下面我们介绍一下主流的技术组合方案。

1、原生 WebSocket

使用原生的 WebSocket API 实现即时通信，虽然实现简单，但这种方案存在一定的局限性，需要自己手写代码进行心跳、控制通信的数据格式、解决同源策略等问题，对于开发者要求更高，且适用场景相对比较单一。

2、Socket.io

Socket.io 是一个跨平台的实时应用程序框架，它基于 WebSocket 实现了一套优化的通信方式，可以在 Node.js 和浏览器之间实现双向的、基于事件驱动的通信，它提供了完整的事件库和数据传输协议，通信效率高，实现简单且易用，是目前最流行的实时通信技术之一。

3、ws

ws 是一个基于 Node.js 的 WebSocket 库，它提供了一个简单、易用、高效的 WebSocket 服务器和客户端库，使用简单，配置方便，是 Node.js 开发者首选的 WebSocket 库之一。

基于以上三种方案，我们可以综合考虑出一个适用于 Express.js 的 WebSocket 实现方案。

三、Express.js 集成 WebSocket 实现

在 Express.js 中集成 WebSocket 实现的方案中，我们可以采用 ws 库来实现 WebSocket，以下是具体的实现步骤。

1、安装 ws

在项目中安装 ws 库，可以使用 npm 进行安装，命令如下：

npm install ws

2、WebSocket 服务端配置

在 Express.js 项目中，我们需要创建一个 WebSocket 服务端，以下是具体的代码实现：

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

wss.on('connection', function connection(ws) {
  console.log('已建立连接');

  ws.on('message', function incoming(data) {
    console.log(`接收到消息：${data}`);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  ws.on('close', function close() {
    console.log(`已关闭连接`);
  });

  ws.send('欢迎来到WebSocket服务端');
});

在上述代码中，我们创建了一个 WebSocket 服务端，并监听了 connection 事件，当有客户端发起连接时就会触发该事件，通过 ws 发送消息实现了在服务端和客户端之间的消息传递。

3、在 Express.js 中引入 WebSocket

在 Express.js 项目中引入 WebSocket 需要在路由方面进行配置，以下是具体的代码实现：

const express = require('express');
const app = express();
const server = require('http').Server(app);
const WebSocket = require('ws');

const wss = new WebSocket.Server({ server });

app.use(express.static(__dirname + '/public'));

wss.on('connection', function connection(ws) {
  console.log('已建立连接');

  ws.on('message', function incoming(data) {
    console.log(`接收到消息：${data}`);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  ws.on('close', function close() {
    console.log(`已关闭连接`);
  });

  ws.send('欢迎来到WebSocket服务端');
});

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

server.listen(3000, function() {
  console.log('websocket 服务启动成功！');
});

在上述代码中，我们引入了 WebSocket 模块，并将其加入到 Express.js 的路由中，实现了服务端和客户端之间的 WebSocket 通信。

四、示例代码

上述是通过 ws 实现的 WebSocket 代码示例，我们可以通过 npm run serve 启动客户端和服务器端代码进行测试，客户端代码如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebSocket 测试</title>
  </head>
  <body>
    <h1>WebSocket 测试</h1>
    <label>聊天室：<input type="text" id="room-input" /></label>
    <label>用户名：<input type="text" id="name-input" /></label>
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开连接</button>
    <br />
    <textarea id="message-area" cols="30" rows="10"></textarea>
    <br />
    <label>
      发言：<input type="text" id="message-input" />
      <button onclick="sendMessage()">发送</button>
    </label>

    <script>
      const roomInput = document.getElementById('room-input');
      const nameInput = document.getElementById('name-input');
      const messageInput = document.getElementById('message-input');
      const messageArea = document.getElementById('message-area');
      let websocket;

      function connect() {
        const room = roomInput.value;
        const name = nameInput.value;
        
        const url = `ws://localhost:3000?room=${room}&name=${name}`;
        websocket = new WebSocket(url);

        websocket.onmessage = function(event) {
          messageArea.value += event.data + '\n';
        };

        websocket.onopen = function(event) {
          messageArea.value += '已连接 WebSocket 服务器\n';
        };

        websocket.onclose = function(event) {
          messageArea.value += '已关闭 WebSocket 服务器\n';
        };
      }

      function sendMessage() {
        const message = messageInput.value;
        if (websocket && websocket.readyState === WebSocket.OPEN) {
          websocket.send(message);
        }
      }

      function disconnect() {
        if (websocket) {
          websocket.close();
          websocket = null;
        }
      }
    </script>
  </body>
</html>

五、总结

本文通过介绍 WebSocket 的基本知识和三种主流的技术方案，并选择了一种方案，在 Express.js 中引入 WebSocket，具体介绍了其实现步骤，以及相关 JavaScript 代码的示例，希望读者能够掌握 Express.js 集成 WebSocket 实现即时通信的技术要点，为读者在项目中运用相关技术奠定基础。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6594bbbeeb4cecbf2d9036ec

Express.js 集成 WebSocket 实现即时通信