前后端实时通信的四种方式(附详细案例代码)

齐飞

于 2025-03-10 23:41:32 发布

阅读量1k

点赞数 26

分类专栏：网络编程文章标签：后端网络协议前端

本文链接：https://blog.csdn.net/weixin_46425661/article/details/146166742

版权

网络编程专栏收录该内容

25 篇文章

订阅专栏

文章目录

前言
1. 轮询（Polling）
- 原理
- 优缺点
2. 长轮询（Long Polling）
3. WebSocket
4. Server-Sent Events (SSE)
总结

在这里插入图片描述

前言

后端实现实时通信的几种方式主要包括轮询、长轮询、WebSocket 和 Server-Sent Events (SSE)。以下详细介绍每种方式的适用场景、优缺点和代码实现方式。

1. 轮询（Polling）

原理

客户端定期向服务器发送请求，询问是否有新数据。服务器收到请求后，会检查是否有新数据，如果有则返回给客户端，没有则返回空响应。

优缺点

优点：

实现简单，兼容性好。

缺点：

频繁请求增加服务器负担。
实时性差，延迟取决于轮询间隔。效率低下，会产生大量的无效请求，增加服务器和网络的负担

适用场景：实时性要求不高的简单应用。

代码示例
客户端
每隔 5 秒向服务器发送一次请求

function poll() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8080/getData', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            console.log(data);
        }
    };
    xhr.send();
    setTimeout(poll, 5000); // 每 5 秒轮询一次
}

poll();

2. 长轮询（Long Polling）

原理

客户端发送请求后，服务器保持连接直到有新数据或超时时间才返回响应。客户端收到响应后，会立即再次发送请求。

优缺点

优点：

实时性优于普通轮询。
减少不必要的请求。

缺点：

服务器需要保持大量的连接，会消耗较多的服务器资源。
连接超时后需重新建立。

适用场景：实时性要求较高的应用，如即时消息。

代码示例

服务器端（Node.js）

const http = require('http');

const newDataQueue = [];

const server = http.createServer((req, res) => {
    if (newDataQueue.length > 0) {
        const newData = newDataQueue.shift();
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(newData));
    } else {
        // 模拟等待新数据
        setTimeout(() => {
            const newData = { message: 'This is new data' };
            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify(newData));
        }, 5000);
    }
});

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

function longPoll() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8080', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            console.log(data);
            longPoll(); // 立即再次发起请求
        }
    };
    xhr.send();
}

longPoll();