如何用 Express.js 实现异步的 webSocket 连接-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，webSocket 成为了实时通信的重要手段。webSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立持久性的连接，实现实时通信。而 Express.js 是 Node.js 的一个 Web 框架，提供了强大的路由和中间件，可以方便地实现 webSocket 连接。本文将介绍如何使用 Express.js 和 socket.io 库实现异步的 webSocket 连接。

安装依赖

首先，需要安装 Express.js 和 socket.io 库：

npm install express socket.io --save

创建 Express 应用

在创建 Express 应用时，需要引入 socket.io 库，并将其与 Express 应用绑定：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

// 监听端口
server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

实现 webSocket 连接

使用 socket.io 库，可以方便地实现 webSocket 连接。在 Express 应用中，可以使用 io.on() 方法监听连接事件，当有客户端连接时，可以获取到 socket 对象，通过 socket.emit() 方法向客户端发送消息，通过 socket.on() 方法监听客户端的消息。

// javascriptcn.com 代码示例
io.on('connection', (socket) => {
  console.log('A user connected');

  // 发送消息给客户端
  socket.emit('message', 'Welcome to my chat room');

  // 接收客户端的消息
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  // 断开连接
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

在上面的代码中，当有客户端连接时，会向客户端发送一条欢迎消息，并监听客户端的 chat message 消息，当有客户端发送消息时，会将消息广播给所有客户端。

客户端实现

在客户端，可以使用 socket.io 客户端库连接到服务器，并监听服务器发送的消息：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // 接收服务器发送的消息
    socket.on('message', (msg) => {
      console.log(msg);
    });

    // 发送消息到服务器
    function sendMessage() {
      const input = document.getElementById('message');
      const msg = input.value;
      socket.emit('chat message', msg);
      input.value = '';
    }

    // 接收服务器广播的消息
    socket.on('chat message', (msg) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = msg;
      messages.appendChild(li);
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input id="message" type="text" />
  <button onclick="sendMessage()">Send</button>
</body>
</html>

在上面的代码中，使用 socket.io.js 客户端库连接服务器，并监听服务器发送的 message 消息。当用户输入消息并点击发送按钮时，会将消息发送到服务器。同时，当服务器广播消息时，会将消息添加到页面上。

总结

本文介绍了如何使用 Express.js 和 socket.io 库实现异步的 webSocket 连接。通过这种方式，可以方便地实现实时通信功能，为前端开发提供更多的可能性。

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