Node.js 实现聊天室程序 (5) 使用 Socket.io 实现实时通信-JavaScript中文网-JavaScript教程资源分享门户

在前几篇文章中，我们已经学习了如何使用 Node.js 和 Express 框架搭建一个简单的聊天室程序。但是，该程序只能实现基本的消息发送和接收，无法实现实时通信。在本篇文章中，我们将介绍如何使用 Socket.io 实现实时通信。

什么是 Socket.io

Socket.io 是一个实现了实时双向通信的 JavaScript 库。它可以在客户端和服务器之间建立实时、持久的连接，使得数据可以在两者之间自由地传输。Socket.io 支持多种传输协议，并且可以自动选择最佳的传输方式，从而保证了通信的稳定性和速度。

安装 Socket.io

首先，我们需要在项目中安装 Socket.io。在命令行中执行以下命令：

npm install socket.io --save

在服务器端使用 Socket.io

在服务器端使用 Socket.io 非常简单。我们只需要在 Express 应用程序中添加以下代码，就可以启动 Socket.io 服务器：

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

其中，server 是我们之前创建的 HTTP 服务器实例。这里创建了一个 Socket.io 服务器实例，并将其绑定到 HTTP 服务器上。

接下来，我们可以监听客户端连接事件，并在连接成功时执行一些操作。例如，我们可以将连接的客户端添加到一个房间中：

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.join('room1');
});

在这个例子中，我们监听了 connection 事件，当有新的客户端连接时，就会触发该事件。在事件处理函数中，我们可以获取到该客户端的 Socket 对象。我们可以使用 join 方法将该客户端添加到名为 room1 的房间中。

在客户端发送消息时，我们可以使用 io.emit 方法将消息发送给所有客户端。例如：

io.to('room1').emit('message', 'Hello, world!');

在这个例子中，我们使用 to 方法指定了要发送到的房间。然后，使用 emit 方法发送了一个名为 message 的消息，并将消息内容设置为 Hello, world!。

在客户端使用 Socket.io

在客户端使用 Socket.io 同样非常简单。我们只需要在 HTML 文件中添加以下代码，就可以加载 Socket.io 客户端库：

<script src="/socket.io/socket.io.js"></script>

然后，在 JavaScript 文件中，我们可以使用以下代码连接到服务器：

const socket = io();

在连接成功后，我们可以监听服务器发送的消息，并在接收到消息时执行一些操作。例如：

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

在这个例子中，我们监听了 message 事件，当服务器发送消息时，就会触发该事件。在事件处理函数中，我们可以获取到服务器发送的消息内容，并将其输出到控制台。

另外，我们还可以向服务器发送消息。例如：

socket.emit('message', 'Hello, world!');

在这个例子中，我们使用 emit 方法向服务器发送了一个名为 message 的消息，并将消息内容设置为 Hello, world!。

示例代码

下面是一个简单的聊天室程序，使用了 Socket.io 实现实时通信。你可以在 GitHub 上查看完整代码。

服务器端代码

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

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

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

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

  socket.on('join', (room) => {
    console.log(`User ${socket.id} joined room ${room}`);
    socket.join(room);
  });

  socket.on('message', (data) => {
    console.log(`User ${socket.id} sent message: ${data}`);
    io.to(data.room).emit('message', data.message);
  });

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat Room</title>
</head>
<body>
  <div>
    <label for="room">Room:</label>
    <input type="text" id="room">
    <button id="join">Join</button>
  </div>
  <div>
    <label for="message">Message:</label>
    <input type="text" id="message">
    <button id="send">Send</button>
  </div>
  <ul id="messages"></ul>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    document.getElementById('join').addEventListener('click', () => {
      const room = document.getElementById('room').value;
      socket.emit('join', room);
    });

    document.getElementById('send').addEventListener('click', () => {
      const room = document.getElementById('room').value;
      const message = document.getElementById('message').value;
      socket.emit('message', { room, message });
    });

    socket.on('message', (data) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.innerText = data;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

总结

使用 Socket.io 可以非常方便地实现实时通信。我们可以在服务器端和客户端分别使用 Socket.io，通过事件监听和消息发送来实现双向通信。在实际开发中，我们可以将 Socket.io 应用于聊天室、在线游戏、实时数据展示等场景。

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