Socket.IO 的使用

概述

Socket.IO 是一个用于实时双向通信的 JavaScript 库。它允许在客户端和服务器之间建立实时的、基于事件的通信通道。

Socket.IO 提供了一个简单且灵活的 API，可用于在浏览器和服务器之间传输实时数据。它解决了传统的基于 HTTP 请求-响应模型的限制，允许服务器主动向客户端发送消息，而不需要客户端先发出请求。这使得 Socket.IO 成为构建实时应用程序、聊天应用、多人游戏、实时分析和协作工具等的理想选择。

官方网站 Github

特性

1. 实时性：通过建立持久连接，实现实时的双向通信，服务器和客户端可以随时发送消息和事件。

2. 跨平台：Socket.IO 可以在各种平台上使用，包括浏览器、移动设备和服务器。

3. 自动回退：如果浏览器或网络环境不支持 WebSocket，Socket.IO 会自动降级为其他传输机制，以保证在各种环境下的兼容性。

4. 事件驱动：Socket.IO 使用基于事件的编程模型，通过触发和监听事件来实现双向通信。

5. 客户端库支持：Socket.IO 提供了用于浏览器和移动设备的客户端库，使得在客户端使用 Socket.IO 变得简单和便捷。

6. 可靠性：Socket.IO 具有自动重连和消息队列等机制，以确保可靠的消息传递和连接恢复。

开始

服务端

简单示例

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer);

io.on("connection", (socket) => {
    console.log('一名用户已连接');

    socket.on("hello", function (data) {
        socket.emit("hello", {
            ID: socket.id
        });
    })

    socket.on('ping', (timestamp) => {
        socket.emit('pong', timestamp);
    });

    socket.on('disconnect', function () {
        console.log("一名用户已离开");
        console.log(io.engine.clientsCount);
    })
});

httpServer.listen(3000, () => {
    console.log("socket.io server started at port 3000");
});

用法

io.on("connection", (socket) => {
  socket.emit("request" /* … */); // 向客户端发送消息
  io.emit("broadcast" /* … */); // 向所有客户端发送消息
  socket.on("reply", () => {/* … */}); // 监听客户端消息
  io.sockets.to("/* roomid */").emit("update" /* … */); // 向指定房间发送消息
  socket.join("/* roomid */"); // 加入房间
  socket.leave("/* roomid */"); // 离开房间
  io.of("/").adapter.rooms["/* roomid */"]; // 获取房间信息
});

客户端

import { io } from "./js/socket.io.esm.min.js";

export const socket = io("ws://localhost:3000");
//export const socket = io("ws://example.com"); 

export function getPing(): void {
  socket.emit("ping", Date.now());
  socket.on("pong", (timestamp) => {
    const latency = Date.now() - timestamp;
    console.log(`Latency: ${latency}ms`);
  });
}