如何使用 Socket.io 在 express 中实现多人实时协作？-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端开发中，有时需要实现多人实时协作的功能，例如在线游戏、聊天室等。这些功能需要借助服务器和客户端之间的双向通信技术来实现。常见的通信协议有 WebSocket 和 Socket.io，其中 Socket.io 是对 WebSocket 的封装，并提供了更加方便的 API，同时支持多种传输方式，例如 WebSocket、HTTP 长轮询等。本文将介绍如何使用 Socket.io 在 Express 中实现多人实时协作。

准备工作

在开始本文之前，需要安装 Node.js 和 npm。可以通过以下命令进行检查：

node -v
npm -v

如果返回版本号，则说明已经安装成功。

接下来，通过 npm 安装 express 和 socket.io：

npm install express
npm install socket.io

实现方法

首先，需要在 Node.js 服务端启动 express，并监听端口。可以使用以下代码创建 index.js 文件：

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

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

const port = process.env.PORT || 3000

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

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

  socket.on('message', (data) => {
    io.emit('message', data)
  })

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

server.listen(port, () => {
  console.log(`Server listening on port ${port}`)
})

该代码创建了一个 Express 应用，并监听 3000 端口。同时，创建了一个 Socket.io 对象，并监听了 connection 事件。当有新的连接时，会输出 User connected。该代码还实现了接收来自客户端的 message 事件，并通过 io.emit('message', data) 向所有客户端发送消息。当客户端断开连接时，会输出 User disconnected。

接下来，创建一个 index.html 文件，其中包含一个聊天输入框和一段 JavaScript 代码，用于与 Socket.io 建立连接并监听消息。

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat</title>
</head>
<body>
  <input id="message-input" type="text" placeholder="Type your message">
  <button id="send-btn">Send</button>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io()

    const messageInput = document.querySelector('#message-input')
    const sendBtn = document.querySelector('#send-btn')

    sendBtn.addEventListener('click', () => {
      const message = messageInput.value
      if (message) {
        socket.emit('message', message)
        messageInput.value = ''
      }
    })

    socket.on('message', (data) => {
      console.log(data)
    })
  </script>
</body>
</html>

该文件使用 socket.io.js 脚本，通过 io() 方法创建了一个 Socket.io 实例，并监听了 message 事件。当用户输入消息并点击发送按钮时，会通过 socket.emit('message', message) 发送消息。当收到服务器的消息时，会在控制台打印出来。

通过以上代码，已经可以实现一个简单的在线聊天室了。当用户发送消息时，所有用户都会接收到该消息。

指导意义

通过以上代码，总结以下几点指导意义：

在 Express 中使用 Socket.io 需要先创建一个 http 服务，并把它作为参数传给 Socket.io 构造函数。
Socket.io 提供了多种传输方式，可以自动选择最佳传输方式，并在不支持 WebSocket 的情况下自动降级到 HTTP 长轮询。
在服务器端使用 io.emit 可以向所有连接的客户端发送消息；在客户端使用 socket.emit 可以向服务器发送消息，并使用 socket.on 监听服务器的消息。
Socket.io 支持多种事件类型，在实现多人实时协作功能时，可以自定义事件类型。例如，在游戏中，可以定义 move 事件，当用户移动时，向服务器发起 move 事件，并将移动的坐标等信息作为参数传递。
可以通过 socket.id 获取连接的唯一标识符，并根据不同的连接处理不同的业务逻辑。

结语

通过以上代码，已经可以实现一个简单的多人实时协作功能了。当然，在实际开发中，还需要考虑更加复杂的场景，例如权限管理、数据校验、数据存储等。但是，通过本文的介绍，读者可以了解到如何使用 Socket.io 在 Express 中实现多人实时协作，并在此基础上进行更加复杂的开发。同时，本文也提供了一份完整的示例代码，读者可以参考并运行该代码。

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

如何使用 Socket.io 在 express 中实现多人实时协作？

引言

准备工作

实现方法

指导意义

结语

纠错反馈