Socket.io 如何实现在线状态和心跳包

在应用程序中，实现在线状态和心跳包是一个常见的需求，特别是在即时通讯或在线游戏等场景下。在前端开发中，我们可以使用 Socket.io 来实现这个功能。

Socket.io 简介

Socket.io 是一个为实时 Web 应用程序提供跨平台实时通信的 JavaScript 库。它允许构建可靠的、实时的 Web 应用程序，同时实现双向通信的实时性。

Socket.io 提供多种实时通信方式，包括 WebSocket、Ajax 长轮询和 IFrame EventSource 等。它还提供了多种优化，如消息压缩和消息离线缓存，以提高通信效率和性能。

实现在线状态

在线状态通常使用 Socket.io 的连接事件和断开事件来检测用户是否在线。当用户连接到应用程序时，Socket.io 就会触发一个连接事件。当用户断开连接时，Socket.io 就会触发一个断开事件。

以下是一个示例代码，演示如何使用 Socket.io 实现在线状态：

// www.javascriptcn.com code example
// 服务器端代码
const io = require('socket.io')();

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

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

io.listen(3000);

// www.javascriptcn.com code example
<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Online State Example</title>
  </head>
  <body>
    <div id="msg"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io.connect('http://localhost:3000');

      socket.on('connect', () => {
        document.getElementById('msg').innerHTML = 'User connected';
      });

      socket.on('disconnect', () => {
        document.getElementById('msg').innerHTML = 'User disconnected';
      });
    </script>
  </body>
</html>

这段代码中，服务器端代码创建了一个 Socket.io 实例，并监听连接事件和断开事件。当用户连接或断开时，服务器端代码就会触发相应的事件，并在控制台输出相应的信息。

客户端代码通过连接到服务器端，监听连接事件和断开事件。当用户连接或断开时，客户端代码就会在界面中输出相应的信息。

实现心跳包

在网络通信中，心跳包是用于检测网络连接是否正常的一种技术。在 Web 应用程序中，我们可以使用 Socket.io 的 ping 和 pong 事件来实现心跳包的功能。

以下是一个示例代码，演示如何使用 Socket.io 实现心跳包：

// www.javascriptcn.com code example
// 服务器端代码
const io = require('socket.io')();

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

  // 延迟 5 秒发送心跳包
  setTimeout(() => {
    socket.emit('ping');

    // 心跳包 5 秒后无响应，则认为用户下线
    setTimeout(() => {
      if (!socket.connected) {
        console.log('user disconnected');
      }
    }, 5000);
  }, 5000);

  socket.on('pong', () => {
    console.log('pong received');
  });

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

io.listen(3000);

// www.javascriptcn.com code example
<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Heartbeat Example</title>
  </head>
  <body>
    <div id="msg"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io.connect('http://localhost:3000');

      socket.on('connect', () => {
        document.getElementById('msg').innerHTML = 'User connected';

        // 客户端模拟接收到心跳包
        setInterval(() => {
          socket.emit('pong');
        }, 2000);
      });

      socket.on('disconnect', () => {
        document.getElementById('msg').innerHTML = 'User disconnected';
      });
    </script>
  </body>
</html>

这段代码中，服务器端代码延迟 5 秒发送心跳包，如果 5 秒后没有收到客户端的响应，则认为用户下线。当客户端连接到服务器时，客户端代码会模拟接收到心跳包，并定时向服务器发送心跳回应。

通过以上这些代码，我们就可以比较轻松地实现 Socket.io 的在线状态和心跳包功能了。需要注意的是，在实际应用中，我们需要根据具体应用场景进行调整实现。

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