SSE-轻量级服务器推送

慎独_llc

已于 2024-09-26 11:01:30 修改

阅读量178

点赞数 7

文章标签： java websocket

于 2024-09-26 11:00:46 首次发布

本文链接：https://blog.csdn.net/weixin_42632514/article/details/142550563

版权

背景

springboot系统需要推送某些通知给客户端（PC浏览器），只需要单向推送，不需要双向交互，使用简单轻量级技术SSE(Server-Sent Events)

代码

后端代码

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

import java.io.IOException;

@RestController
public class SseController {

    @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter streamSseMvc() {
        //SSE核心类,进行数据发送
        SseEmitter emitter = new SseEmitter();
        // 使用单独线程进行发送，避免占用servle线程
        new Thread(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    Thread.sleep(1000);
                    // 模拟数据发送
                    emitter.send("Message " + i);
                }
                emitter.complete();
            } catch (IOException | InterruptedException e) {
                emitter.completeWithError(e);
            }
        }).start();
        return emitter;
    }
}

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>SSE with Spring Boot</title>
</head>
<body>
    <h1>Receiving Server-Sent Events</h1>
    <div id="messages"></div>
    <script>
        var eventSource = new EventSource('/sse');
        eventSource.onmessage = function(event) {
            var messages = document.getElementById('messages');
            var message = document.createElement('div');
            message.textContent = 'Message from server: ' + event.data;
            messages.appendChild(message);
        };
        eventSource.onerror = function(event) {
            console.error('EventSource failed:', event);
            eventSource.close();
        };
    </script>
</body>
</html>