Socket.IO

Socket.IO 提供了多种事件类型，用于处理客户端和服务器之间的通信。以下是一些常见的事件类型：

服务器端事件

connection：当客户端连接到服务器时触发。
disconnect：当客户端断开连接时触发。
disconnecting：当客户端即将断开连接时触发。
newListener：当新的监听器被添加时触发。
removeListener：当监听器被移除时触发。

客户端事件

connect：当客户端成功连接到服务器时触发。
connect_error：当连接失败时触发。
connect_timeout：当连接超时时触发。
disconnect：当客户端断开连接时触发。
reconnect：当客户端重新连接时触发。
reconnect_attempt：当客户端尝试重新连接时触发。
reconnecting：当客户端正在重新连接时触发。
reconnect_error：当重新连接失败时触发。
reconnect_failed：当重新连接尝试次数达到最大值时触发。
error：当发生错误时触发。

自定义事件

除了上述内置事件外，Socket.IO 还允许你定义和触发自定义事件。以下是一个示例，展示了如何使用这些事件：

示例代码

服务器端

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);

const port = process.env.PORT || 3000;

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

  // 处理自定义事件
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect

',

 () => {
    console.log('user disconnected');
  });
});

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.IO Chat</title>

  <style>
    body {
      font-family: Arial, sans-serif;
    }
    #messages {
      list-style-type: none;
      padding: 0;
    }
    #messages li {
      padding: 8px;
      margin-bottom: 4px;
      background-color: #f4f4f4;
    }
    #form {
      display: flex;
      margin-top: 10px;
    }
    #input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
    }
    #button {
      padding: 10px;
      font-size: 16px;
    }
  </style>

</head>

<body>
  <ul id="messages"></ul>

  <form id="form" action="">
    <input id="input" autocomplete="off" /><button id="button">Send</button>

  </form>

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

  <script>
    const socket = io('http://localhost:3000'); // 连接到指定的服务器

    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value); // 发送自定义事件
        input.value = '';
      }
    });

    socket.on('chat message', function(msg) {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });

    // 处理内置事件
    socket.on('connect', () => {
      console.log('Connected to server');
    });

    socket.on('disconnect', () => {
      console.log('Disconnected from server');
    });

    socket.on('connect_error', (error) => {
      console.error('Connection error:', error);
    });

    socket.on('reconnect', (attemptNumber) => {
      console.log('Reconnected after', attemptNumber, 'attempts');
    });
  </script>

</body>

</html>

解释

服务器端：

使用 io.on('connection', callback) 监听客户端连接事件。
使用 socket.on('chat message', callback) 监听自定义事件。
使用 socket.on('disconnect', callback) 监听客户端断开连接事件。

客户端：

使用 socket.emit('chat message', message) 发送自定义事件。
使用 socket.on('chat message', callback) 监听自定义事件。
使用 socket.on('connect', callback) 监听连接事件。
使用 socket.on('disconnect', callback) 监听断开连接事件。
使用 socket.on('connect_error', callback) 监听连接错误事件。
使用 socket.on('reconnect', callback) 监听重新连接事件。

通过这些事件，你可以轻松地处理客户端和服务器之间的实时通信。

Socket.IO

服务器端事件

客户端事件

自定义事件

示例代码

服务器端

客户端

解释

评论区

Socket.IO