Socket.IO 案例搭建node服务环境确保安装了node node -v npm -v 创建一个简单的Node.

搭建node服务环境

确保安装了node

node -v

npm -v

创建一个简单的Node.js 应用

新建一个文件夹，并在其中初始化一个新的Node.js项目：

mkdir real-time-app
cd real-time-app
npm init -y

安装 express 和 socket.io：

npm install express socket.io

服务器代码

创建一个服务器，处理客户端连接和消息传递逻辑。 index.js

使用 express 创建了一个HTTP服务器。
使用 socket.io 监听客户端连接。
当客户端连接时，将在控制台输出连接信息。
当接收到客户端的消息时，向所有客户端广播此消息。
当客户端断开连接时，输出断开信息。

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

// 创建Express应用
const app = express();

// 创建HTTP服务器
const server = http.createServer(app);

const io = socketIo(server);

// 当有客户端连接时触发
io.on('connection', (socket) => {
    console.log('一个用户连接了');

    // 接收客户端的消息
    socket.on('clientMessage', (message) => {
        console.log('接收到客户端的消息: ', message);
        
        // 向所有客户端广播消息
        io.emit('serverMessage', message);
    });

    // 断开连接时触发
    socket.on('disconnect', () => {
        console.log('一个用户断开连接');
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO 实时应用</title>
</head>
<body>
    <h1>Socket.IO 实时应用</h1>
    <div id="messages"></div>
    <input id="messageInput" type="text">
    <button onclick="sendMessage()">发送</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
    
        // 总结一下两者的区别：

        // 1、WebSocket（ws）‌：
        // 使用WebSocket协议直接建立连接。
        // 提供了更快的连接速度和更低的延迟。
        // 不依赖于HTTP协议，因此不会受到HTTP的一些限制。
        
        // 2、Socket.IO（http）‌：
        // 默认尝试使用WebSocket，但如果不可用，则会回退到其他传输方式，如长轮询。
        // 提供了更好的兼容性，因为即使在不支持WebSocket的环境中也能工作。
        // 可能会有更高的延迟，特别是在回退到长轮询的情况下。
    
    
        const socket = io('http://localhost:3000');
        
        // const socket = io('http://localhost:3003');

        socket.on('serverMessage', (message) => {
            const messageContainer = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.innerText = message;
            messageContainer.appendChild(messageElement);
        });

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            socket.emit('clientMessage', message);
            input.value = ''; // 清空输入框
        }
    </script>
</body>
</html>

启动

node index.js