node.js中的Socket.IO使用实例

当提到实现实时的网络通信时，Socket.IO可以说是一个非常不错的选择。它是用 Node.js 实现的，可以让你轻松地在前后端之间建立实时、双向、基于事件的通信。

下面我将提供一个 Socket.IO 的使用实例，以便了解如何在 Node.js 服务器和客户端之间使用它来实现实时通信。

安装Socket.IO

在开始使用Socket.IO之前，我们需要确保在系统上已经安装了Node.js。

在继续之前，我们需要使用 npm 安装 Socket.IO :

npm install socket.io

启动Socket.IO服务端

首先我们开始创建 server.js 文件，用于创建和启动Websocket服务。

const IO = require('socket.io');
const http = require('http');

const server = http.createServer();
const io = IO(server);

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

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

  socket.on('chat message', (msg) => {
    console.log(`message: ${msg}`);
    io.emit('chat message', msg);
  });
});

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

上面的代码创建了一个 node.js 的 http 服务器，并通过 socket.io 模块创建了一个 socket 实例，用于实现实时通信。 io.on('connect', ...) 用于在客户端连接成功后执行的事件， socket.on(...) 则定义了客户端发送消息时的事件。

其中最重要的是 io.emit('chat message', msg); 用于向所有连接上的客户端发送消息。

客户端使用Socket.IO

我们已经完成了服务端部分的 socket 配置，接下来我们来看看如何在客户端中使用它。创建一个 index.html 页面，添加 Socket.IO 的依赖和测试用例：

<html>
  <head>
    <title>Socket.IO Test</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      const input = document.getElementById('m');
      const messages = document.getElementById('messages');

      document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('connect', () => {
        console.log('connected');
      });

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

上面的代码中，我们使用 socket.io.js 来连接服务器进行通信，并定义了一个输入框和一个发送按钮用于发送消息。在客户端成功连接上服务器时，会触发 socket.on('connect', ...) 对应的事件。另外，如果有其他客户端发送了消息，会通过 socket.on('chat message', ...) 对应事件的参数 msg 显示在页面上。

示例1：实现房间聊天功能

实现一个简单的聊天室，可以让多个用户在同一个界面上交流。多个用户可以相互之间发送信息。为了实现这个功能，我们需要通过 Socket.IO 实现多个客户端实例同时连接上服务端，并且在服务器端将每个客户端实例加入相应的房间。客户端向其他客户端发送信息时，我们将信息广播到房间中的其他客户端实例。

服务端代码

以下是服务端代码：

// 房间名称
const roomName = 'room1';

io.on('connect', (socket) => {
  // 加入房间
  socket.join(roomName);

  // 对方发消息
  socket.on('chat message', (msg) => {
    io.to(roomName).emit('chat message', msg);
  });

  // 离开房间
  socket.on('disconnect', () => {
    console.log(`[${socket.id}] leave room [${roomName}]`);
    socket.leave(roomName);
  });
});

首先，我们定义了一个常量 roomName 作为房间的名称。当客户端连接成功后，将当前连接的客户端加入房间。在用户发出聊天信息时，我们使用 io.to(roomName).emit() 将消息广播到房间里面的每一个连接实例。当客户端断开连接时，需要将其移除离开该房间。

客户端代码

下面是客户端代码：

// 发送消息
socket.emit('chat message', message);

// 当接收到聊天信息时处理
socket.on('chat message', (msg) => {
  ...
});

在客户端，我们将实现客户端和服务端的 Socket.IO 连接。发送聊天信息时，我们通过 socket.emit('chat message', ...) 发出消息。对于收到的消息，我们使用 socket.on('chat message', ...) 来进行处理并显示到页面上。

示例2：实现在线人数统计

在上面的例子中，当多名客户端连接到服务器时，可以实现在客户端之间广播消息。假设我们现在需要对连接到服务器的客户端数量进行统计，并在页面上实时显示在线人数，那么我们需要各种监听器和方法来处理这种情况。

服务端代码

以下是服务端代码：

let onlineCount = 0;

io.on('connect', (socket) => {
  onlineCount++;
  io.emit('count', { onlineCount });

  socket.on('disconnect', () => {
    onlineCount--;
    io.emit('count', { onlineCount });
  });
});

以上代码使用了一个变量 onlineCount 来记录当前服务器上的连接量。当客户端与服务端连接成功时，我们通过 io.emit('count', ...) 向客户端广播当前在线人数。如果客户端与服务端连接断开，则减去在线人数并再次广播。

客户端代码

以下是客户端代码：

// 声明变量
const onlineDisplay = document.getElementById('onlinecount');

// 当连接到服务器时，显示在线人数
socket.on('connect', () => {
  console.log('connected');

  socket.on('count', ({ onlineCount }) => {
    onlineDisplay.innerText = onlineCount;
  });
});

当客户端连接到服务器时，会触发 socket.on('connect', ...) 对应的事件，同时监听来自服务器的 count 事件。当服务器发出事件时，我们通过 DOM 操作更新在线人数。每当有一个客户端与服务端断开连接时，会广播到所有客户端，并将在线人数减少一个。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js中的Socket.IO使用实例 - Python技术站

node.js中的Socket.IO使用实例

安装Socket.IO

启动Socket.IO服务端

客户端使用Socket.IO

示例1：实现房间聊天功能

服务端代码

客户端代码

示例2：实现在线人数统计

服务端代码

客户端代码

相关文章