AI工具平台 为你提供最新AI工具及常用工具的一站式平台

前端

SocketIO

Socket.IO 是一个基于 Node.js 的实时通信库，它实现了在浏览器和服务器之间的双向实时通信。其核心是在 WebSocket 基础上做了封装与扩展，并且还能在不支持 WebSocket 的浏览器中使用轮询等其他机制进行通信，以此保证了良好的兼容性。

链接直达手机查看

Socket.IO 是一个基于 Node.js 的实时通信库，它实现了在浏览器和服务器之间的双向实时通信。其核心是在 WebSocket 基础上做了封装与扩展，并且还能在不支持 WebSocket 的浏览器中使用轮询等其他机制进行通信，以此保证了良好的兼容性。以下从特性、使用方法、应用场景等方面为你详细介绍。

主要特性

自动重连：在网络不稳定，连接断开的情况下，Socket.IO 能够自动尝试重新建立连接，保证通信的稳定性。
事件驱动架构：采用事件驱动的方式进行通信。服务器和客户端可以自定义事件并监听这些事件，当事件被触发时执行相应的操作，方便实现各种交互逻辑。
多传输机制：除了 WebSocket，还支持 HTTP 长轮询等其他传输机制。当浏览器不支持 WebSocket 时，会自动降级使用其他可用的传输方式。
房间（Rooms）和命名空间（Namespaces）：可以将客户端分组到不同的 “房间” 中，实现对特定群体的消息广播；命名空间则允许在一个服务器上创建多个独立的通信通道，便于对不同类型的通信进行隔离和管理。
二进制数据支持：支持发送和接收二进制数据，如图片、文件等，拓展了其应用场景。

基本使用方法

1. 安装

在服务器端（Node.js 环境）和客户端分别安装 Socket.IO：

bash

# 服务器端
npm install socket.io

# 客户端（如果使用 npm 管理前端依赖）
npm install socket.io-client

2. 服务器端代码示例

javascript

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 监听客户端连接事件
io.on('connection', (socket) => {
    console.log('A user connected');

    // 监听客户端发送的消息事件
    socket.on('chat message', (msg) => {
        // 向所有连接的客户端广播消息
        io.emit('chat message', msg);
    });

    // 监听客户端断开连接事件
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

const port = 3000;
http.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

3. 客户端代码示例

html

<!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>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        // 连接到服务器
        const socket = io();

        // 监听服务器发送的消息事件
        socket.on('chat message', (msg) => {
            console.log('Received message:', msg);
        });

        // 发送消息给服务器
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const msg = input.value;
            socket.emit('chat message', msg);
            input.value = '';
        }
    </script>
</head>

<body>
    <input type="text" id="messageInput" placeholder="Type a message">
    <button onclick="sendMessage()">Send</button>
</body>

</html>