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

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

引用

CSDN

1.

https://blog.csdn.net/weixin_46425661/article/details/146166742

在现代Web应用中，前后端实时通信是一个常见的需求。本文将介绍四种实现前后端实时通信的方式：轮询（Polling）、长轮询（Long Polling）、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();

3. WebSocket

原理

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。客户端和服务器可以在连接建立后随时向对方发送数据，无需频繁建立和断开连接。

优缺点

优点：

• 实时性强，效率高，延迟低。
• 全双工通信，减少连接开销，适合高频通信。

缺点：

• 实现复杂，需要服务器和客户端都支持 WebSocket 协议。
• 兼容性较差，需浏览器支持。

适用场景：高实时性要求的应用，如在线游戏、聊天室。

代码示例

Springboot整合websocket(附详细案例代码)

4. Server-Sent Events (SSE)

原理

基于 HTTP 协议，客户端通过创建一个 EventSource 对象向服务器发起一个 HTTP 请求，服务器保持连接打开，当有新数据时，将数据以特定的格式发送给客户端。SSE 是单向通信，只能由服务器向客户端发送数据。

优缺点

优点：

• 实现简单，自动重连。
• 基于 HTTP 协议，兼容性好。
• 兼容性好，基于 HTTP。

缺点：

• 仅支持服务器到客户端的单向通信。
• 部分浏览器不支持。

适用场景：服务器向客户端推送数据的场景，如实时通知、股票行情。

代码示例

SpringBoot整合SSE(附详细案例代码)

总结

• 轮询：简单但效率低。
• 长轮询：实时性较好，但服务器负担大。
• WebSocket：实时性最佳，适合高频通信。
• SSE：适合服务器单向推送，实现简单。