如何在 Express 中集成 Socket.io

Express 是 Node.js 平台上流行度极高的 Web 应用框架之一，它提供了许多方便的功能及中间件，方便我们构建 Web 应用。而 Socket.io 则是实现了实时通信的 JavaScript 库，它支持 WebSocket、Long-polling、XHR 以及 WebRTC 等多种实现方式。在 Web 应用中，Socket.io 可以方便地实现聊天功能、实时通知等需求。本文将介绍如何在 Express 中使用 Socket.io 实现实时通信。

步骤 1：安装 Socket.io

在开始之前，我们需要先安装 Socket.io。在终端中进入项目目录，使用以下命令进行安装：

npm install socket.io

步骤 2：在 Express 中启用 Socket.io

在 Express 中启用 Socket.io 需要使用以下代码：

const express = require('express');
const app = express();

const server = app.listen(3000, () => {
  console.log('server started at port 3000');
});

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

在以上代码中，我们首先创建了一个 Express 应用 app，并将其与监听一个指定端口号的服务器 server 绑定。然后使用 require('socket.io')(server) 实例化 io 对象，它是 Socket.io 的核心对象，用于管理实时通信。这样就成功启用了 Socket.io。

步骤 3：实现实时通信

在启用了 Socket.io 的 Express 应用中，实现实时通信只需要向客户端发送消息并监听客户端发送的消息即可。下面是一个简单的聊天室实现：

// www.javascriptcn.com code example
// 客户端连接后执行
io.on('connection', (socket) => {
  console.log('client connected');

  // 监听客户端发送的消息
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);

    // 发送消息给所有客户端
    io.emit('chat message', msg);
  });
});

在以上代码中，我们在客户端连接成功后执行 connection 事件回调函数，其中的 socket 对象代表了这个客户端。我们可以监听 chat message 事件，当客户端发送消息时触发回调函数 msg，我们可以将这个消息广播给所有客户端使用 emit 方法。

步骤 4：使用 Socket.io 的客户端库

最后，我们需要在客户端中引入 Socket.io 的客户端库，并连接服务器：

// www.javascriptcn.com code example
<!doctype html>
<html>
  <head>
    <title>Socket.io demo</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" />
      <button>Send</button>
    </form>

    <!-- 引入 Socket.io 客户端库 -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      // 监听服务端发送的消息
      socket.on('chat message', (msg) => {
        const li = document.createElement('li');
        li.innerText = msg;
        document.getElementById('messages').appendChild(li);
      });

      // 发送消息到服务端
      const form = document.querySelector('form');
      const input = document.querySelector('#m');
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        socket.emit('chat message', input.value);
        input.value = '';
      });
    </script>
  </body>
</html>

在以上代码中，我们通过 <script> 标签引入了 Socket.io 的客户端库 /socket.io/socket.io.js，并使用 io() 方法连接服务端。在连接成功后，我们可以使用 on 方法监听服务端发送的消息，并使用 emit 方法发送消息到服务端。

小结

本文介绍了如何在 Express 中集成 Socket.io 实现实时通信，并展示了一个简单的聊天室示例。使用 Socket.io 可以方便地实现实时通信功能，不仅可以用于聊天室，还可以应用于实时游戏、在线编辑器等等场景，具有广泛的应用价值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6aef9a941bf7134c80206