Socket.IO：一个基于 WebSocket 协议的库

bollat

于 2024-10-05 22:52:35 发布

阅读量256

点赞数 4

文章标签：开发语言前端 javascript 网络 ecmascript node.js websocket

本文链接：https://blog.csdn.net/bollat/article/details/142720132

版权

Socket.IO 是一个基于 WebSocket 协议的库，旨在实现实时事件驱动的网络应用，也是一个用于实时双向通信的 JavaScript 库，广泛应用于 Web 应用开发中。它建立在 WebSocket 的基础上，提供了许多额外的功能，使得开发实时应用变得更加简单和高效。Socket.IO 分为客户端和服务器端两个部分。

主要特点

实时通信：Socket.IO 支持实时数据传输，可以在客户端和服务器之间快速交换数据，适用于聊天、在线游戏、通知等场景。
自动重连：如果连接中断，Socket.IO 会自动尝试重新连接，这使得应用在网络不稳定的情况下也能保持良好的用户体验。
事件驱动：使用事件机制，可以在特定事件发生时触发回调函数，极大地提高了开发效率和可维护性。
跨浏览器支持：Socket.IO 处理了不同浏览器和环境之间的兼容性问题，能够在多种设备和平台上顺利工作。
命名空间和房间：Socket.IO 支持命名空间和房间的概念，可以将不同的事件和消息分组，便于管理和组织。
可靠性：Socket.IO 在网络环境不稳定的情况下，也能保证数据传输的完整性和可靠性。

安装

可以通过 npm 安装 Socket.IO：

其中socket.io-client 是一个用于在客户端与服务器之间进行实时双向通信的库，它是 Socket.IO 的客户端部分。

npm install socket.io socket.io-client

基本用法

服务器端示例（Node.js）

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

// 监听连接事件
io.on('connection', (socket) => {
    console.log('新用户已连接');

    // 监听消息事件
    socket.on('message', (data) => {
        console.log('收到消息:', data);
        // 发送消息给客户端
        socket.emit('message', 'Hello from server!');
    });

    // 监听断开连接事件
    socket.on('disconnect', () => {
        console.log('用户已断开连接');
    });
});

// 启动服务器
server.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

客户端示例（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Client</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const socket = io('http://localhost:3000');

            // 连接成功时
            socket.on('connect', () => {
                console.log('成功连接到服务器');
                // 发送消息
                socket.emit('message', 'Hello from client!');
            });

            // 监听消息事件
            socket.on('message', (data) => {
                console.log('收到消息:', data);
            });
        });
    </script>
</head>
<body>
    <h1>Socket.IO 客户端</h1>
</body>
</html>