单服务器推送还在用WebSocket？快试试更快的SSE

大阳光男孩

已于 2024-07-04 13:53:16 修改

阅读量815

点赞数 18

分类专栏：前端架构大师文章标签：网络协议网络

于 2024-07-04 10:10:02 首次发布

本文链接：https://blog.csdn.net/m0_55337678/article/details/140156848

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

架构大师

3 篇文章 0 订阅

订阅专栏

在传统的Web开发中，WebSocket常被用来实现实时双向通信。然而，对于只需要单向、从服务器到客户端的信息推送场景，Server-Sent Events (SSE) 提供了一种更轻量、更简单的解决方案。

SSE 和 WebSocket 特点的差异

SSE 适用于服务器向客户端单向发送实时更新的数据，适合实时事件推送场景。SSE 使用的是标准的 HTTP 协议，对于浏览器的兼容性较好，但只支持客户端接收数据。

WebSocket

WebSocket 适用于客户端和服务器之间的双向实时通信，适合聊天应用、实时游戏等场景。WebSocket 需要独立的 TCP 连接，因此相比 SSE，会增加一定的网络开销，但能够实现双向通信。

总结：WebSocket 更复杂，需要专门的服务器和客户端支持。WebSocket 提供了低延迟和更灵活的通信能力。SSE 可以用标准 HTTP 服务实现，对于服务器的改造相对较小。

步骤一：创建SSE服务端控制器

首先，我们需要创建一个Spring Boot控制器来处理SSE连接请求。

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;


@RestController
public class SSEController {

    private static final ConcurrentHashMap<String, SseEmitter> emitters = new ConcurrentHashMap<>();


    @GetMapping("/sse/connect/{key}")
    public SseEmitter connect(@PathVariable("key")String key) {
        SseEmitter sseEmitter = new SseEmitter();
        emitters.put(key, sseEmitter);
        sseEmitter.onCompletion(() -> emitters.remove(key));
        sseEmitter.onError((e) -> {
            emitters.remove(key);
            sseEmitter.completeWithError(e);
        });
        Executors.newSingleThreadExecutor().execute(() -> {
            while (true) {
                DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
                try {
                    sseEmitter.send(SseEmitter.event().name("message").data("北京时间："+formatter.format(LocalDateTime.now()) ));
                    TimeUnit.SECONDS.sleep(3);
                } catch (Exception e) {
                    System.out.println(e.getMessage());
                }
            }
        });
        return sseEmitter;
    }


}

这段代码定义了一个SSEController，其中connect方法用于建立SSE连接。它接收一个路径参数key，用于区分不同的连接。通过SseEmitter，服务器每3秒向客户端发送一次当前的北京时间。同时，通过ConcurrentHashMap管理所有活跃的连接，并在连接关闭或发生错误时进行相应的清理操作。

步骤二：创建前端页面接收SSE事件

接下来，我们创建一个简单的HTML页面来展示如何接收和显示服务器推送的消息。

<html lang="en">
<head>
    <title>服务器信息推送</title>
    <meta charset="UTF-8">
    <script>
        let params = new URLSearchParams(window.location.search);
        let eventSource = new EventSource('/sse/connect/' + params.get('id'));
        eventSource.onmessage = function(event) {
            let message = document.createElement('div');
            message.textContent = event.data;
            document.getElementById('messages').appendChild(message);
        };
    </script>
</head>
<body>
    <h1>服务器信息推送Demo(只能用于单向通信)</h1>
    <div id="messages" style="display: flex;flex-direction: column;gap: 6px;"></div>
</body>
</html>

这个页面使用JavaScript的EventSource API来建立与服务器的SSE连接。通过URL中的查询参数id来唯一标识每个连接。每当服务器发送新的消息，页面就会在<div id="messages">元素内添加一个新的<div>来显示消息内容。

总结：相比WebSocket，SSE在实现上更为简洁，特别适合于那些只需单向通信的应用场景。它能够实时更新客户端的信息，如股票报价、天气预报、通知提醒等，且不需要复杂的握手过程和维护长连接的额外开销。请记住，尽管SSE在某些场景下效率更高，但在需要双向通信或更复杂交互的场景下，WebSocket仍然是更好的选择。