Nodejs + socket.io如何保证同步的效率？

Nodejs + socket.io如何保证同步的效率？

目前项目用到nodejs + socket.io。

Socket是负责各个客户端过来的连接。 每个人可能各自在自己那段输入，然后同步到其他人都能看到别人输入的。

如果是字符级别的同步，就是说，哪怕一个人输入一个字符，其他人也都要能立马同步在自己那端看到。 我测试了下，做不到，我一直不停的在那儿输入，其他的客户端跟不上的，因为连续发送的同步消息太多了。

请问，哪位有做过这种级别的同步吗？

还是说，每隔固定的时间同步一次？


8 回复

Node.js + socket.io 如何保证同步的效率？

在使用 Node.js 和 socket.io 进行实时通信时，确保高效且低延迟的同步是一个常见的挑战。特别是在需要实时更新每个客户端的场景中，例如多人协作编辑或实时聊天应用。

解决方案

为了实现高效的字符级别同步，可以采用以下几种策略：

  1. 节流（Throttling）：限制发送频率，而不是每次都发送。
  2. 防抖（Debouncing）：将多次快速触发的事件合并为一次处理。
  3. 批量发送：将多个字符合并成一条消息发送。

示例代码

这里我们使用防抖技术来减少消息发送的频率，并提高同步效率。

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

// 初始化 Express 应用和 HTTP 服务器
const app = express();
const server = http.createServer(app);
const io = socketIo(server);

let debounceTimer;

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

    socket.on('input', (data) => {
        // 使用防抖技术
        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }

        debounceTimer = setTimeout(() => {
            // 发送数据给所有客户端
            io.emit('sync', data);
        }, 50); // 延迟50毫秒
    });

    socket.on('disconnect', () => {
        console.log('A user disconnected:', socket.id);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 防抖（Debouncing）：

    • 每次接收到 input 事件时，先清除之前的定时器。
    • 设置一个新的定时器，延迟50毫秒后执行实际的同步操作。
    • 这样可以确保即使用户连续输入，也会只发送一次数据。

  2. 批量发送：

    • 如果需要进一步优化，可以考虑在定时器中累积多个字符，然后一次性发送。

通过这种方式，我们可以有效地减少不必要的网络传输，从而提高同步效率和用户体验。

希望这个解决方案对你有所帮助！


需要优化，例如精度设置为3s。

1、慢速打字： 敲击字符速度间隔，大于3s，直接发送。

2、快速打字： 敲击字符速度间隔，小于3s，每3s发送一次，接收端要做一点技巧，不要直接显示，要把这3s里面接受的字符，逐一的“打”在对方的屏幕上，看起来就特么的跟真事儿一样就行了。

谢谢提醒，但是如果来做呢？ 如何知道输入了几秒钟？

这个页面可以做很多操作的，比如输入，回车换行等。。。

就是取3秒里面的内容，然后发送，接收端慢慢显示的话？ 下一个三秒钟的内容又来了，前一个三秒钟的还没显示完，那不是前一个三秒里面的内容会丢掉吗？

这个问题现在我好想没好办法

谢谢提醒，但是我还是不晓得如何实现， 如何知道输入了几秒钟？

这个页面可以做很多操作的，比如输入，回车换行，比如缩进，就是相当于n多个人在编辑一个页面，不光是打字打消息，如果有人在页面回车，缩进，这些都要同步，而且还有，如果多个人同时在编译某一行怎么办呢？

就是取3秒里面的内容，然后发送，接收端慢慢显示的话？ 下一个三秒钟的内容又来了，前一个三秒钟的还没显示完，那不是前一个三秒里面的内容会丢掉吗？

这个问题现在我好想没好办法

试试这个 sharejs

没太懂需求~可以理解成聊天室么？

楼上的哥们，正解。 这里我做点说明：

一般类似的操作，不要试图去一个动作一个动作的去同步，应该按照时间来，但是这个时间间隔，得自己去尝试调整，实时同步的效率不是取决于socket，而是取决于你的网络速度。

做些小的改进去欺骗用户的眼睛，让他分辨不出来，你发送了多少次请求，但是最后一次看到的一定是正确的，就OK了。 让他以为你的页面是在一个一个的字符做同步，其实你是分时段发送的。

对于字符级别的实时同步，频繁地发送每个字符可能会导致性能问题，因为这会导致服务器和客户端之间产生大量的网络流量。为了提高同步效率，可以考虑使用批量处理或节流技术来减少不必要的同步请求。

解决方案

  1. 批量处理：将多个字符累积到一定数量（比如10个字符）再发送一次。
  2. 节流/防抖：限制同步频率，确保不会因用户快速输入而导致服务器过载。

示例代码

批量处理

let buffer = '';
const batchSize = 10;

io.on('connection', (socket) => {
    socket.on('input', (data) => {
        buffer += data;
        
        if (buffer.length >= batchSize) {
            socket.broadcast.emit('sync', buffer);
            buffer = ''; // 清空缓冲区
        }
    });
    
    socket.on('disconnect', () => {
        if (buffer.length > 0) {
            socket.broadcast.emit('sync', buffer); // 发送剩余字符
            buffer = ''; // 清空缓冲区
        }
    });
});

节流

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

io.on('connection', (socket) => {
    const syncHandler = throttle((data) => {
        socket.broadcast.emit('sync', data);
    }, 100); // 每100毫秒同步一次
    
    socket.on('input', (data) => {
        syncHandler(data);
    });
    
    socket.on('disconnect', () => {
        syncHandler(buffer); // 发送剩余字符
        buffer = ''; // 清空缓冲区
    });
});

解释

  • 批量处理：通过累积一定数量的字符后再发送，可以显著减少网络通信次数。
  • 节流：通过限制每段时间内只发送一次数据，防止客户端频繁触发同步事件导致服务器过载。

这两种方法都可以有效提高同步效率，具体选择哪种取决于应用场景的需求。

回到顶部