Js即时通讯技术 - SSE（SpringBoot实现）

最新推荐文章于 2024-03-01 10:07:23 发布

阿瑟与非

最新推荐文章于 2024-03-01 10:07:23 发布

阅读量3.4k

点赞数

分类专栏：前端文章标签： http js java

本文链接：https://blog.csdn.net/cs373616511/article/details/113825561

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前言

主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。

	Ajax短轮询	Comet	WebSocket	SSE
概念	http端轮询是服务器收到请求不管是否有数据都直接响应 http 请求; 浏览器受到 http 响应隔一段时间在发送同样的http 请求查询是否有数据;	http 长轮询是服务器收到请求后如果有数据, 立刻响应请求; 如果没有数据就会 hold 一段时间,这段时间内如果有数据立刻响应请求; 如果时间到了还没有数据, 则响应 http 请求;浏览器受到 http 响应后立在发送一个同样http 请求查询是否有数据;	WebSocket的实现了一次连接，双方通信的功能。首先由客户端发出WebSocket请求，服务器端进行响应，实现类似TCP握手的动作。这个连接一旦建立起来，就保持在客户端和服务器之间，两者之间可以直接的进行数据的互相传送。	在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式。sse 是单通道，只能服务端向客户端发消息
协议	http	http	wbSocket	http
	短轮询	长轮询

二、SpringBoot实现

1.Controller

使用接口模拟发送消息

package com.asyf.demo.controller;

import cn.hutool.core.date.DateUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.Date;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;


@Controller
@RequestMapping(path = "sse")
public class SSEController {

    @GetMapping(path = "")
    public String index() {
        //index.html在static/index.html目录
        return "index.html";
    }

    @RequestMapping(value = "test", method = RequestMethod.GET)
    public Object test() {
        return DateUtil.format(new Date(), "yyyy-MM-dd HH:mm:ss");
    }

    private static Map<String, SseEmitter> sseCache = new ConcurrentHashMap<>();

    @GetMapping(path = "subscribe")
    public SseEmitter push(String id) throws IOException {
        System.out.println(id);
        // 超时时间设置为1小时
        SseEmitter sseEmitter = new SseEmitter(3600_000L);
        // 设置前端的重试时间为1s
        sseEmitter.send(SseEmitter.event().reconnectTime(1000).data("连接成功"));
        sseCache.put(id, sseEmitter);
        sseEmitter.onTimeout(() -> sseCache.remove(id));
        sseEmitter.onCompletion(() -> System.out.println("完成！！！"));
        return sseEmitter;
    }

    @GetMapping(path = "push")
    @ResponseBody
    public String push(String id, String content) throws IOException {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.send(content);
        }
        return "push over";
    }

    @GetMapping(path = "close")
    @ResponseBody
    public String over(String id) throws IOException {
        SseEmitter sseEmitter = sseCache.get(id);
        if (sseEmitter != null) {
            sseEmitter.send("close");
            sseEmitter.send(SseEmitter.event().name("close").id(id).data(""));
            sseEmitter.complete();
            sseCache.remove(id);
        }
        return "close over";
    }

}

2.index.html

目录是resourses/static/index.html

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SSE测试</title>
</head>
<body>
<div>sse测试</div>
<div id="result"></div>
</body>
</html>
<script>
    function msg(msg) {
        console.log(msg)
        var div = document.createElement('div');
        div.innerHTML = msg;
        document.getElementById('result').appendChild(div);
    }

    //判断浏览器是否支持SSE
    if (!!window.EventSource) {
        var source = new EventSource('http://localhost:8080/sse/subscribe?id=ssetest');

        //响应消息-实现方式1
        // source.onmessage = function (event) {
        //     text = document.getElementById('result').innerText;
        //     text += '\n' + event.data;
        //     document.getElementById('result').innerText = text;
        // };

        //响应消息-实现方式2
        source.addEventListener('message', function (e) {
            msg(e.data);
        }, false);

        //响应open事件
        source.addEventListener('open', function (e) {
            msg("连接打开.");
        }, false);

        // 响应close事件，主动关闭EventSource
        //后端关闭SSE会执行error事件，在error事件中关闭SSE不友好，后端在关闭SSE发送close
        // 事件以友好的关闭SSE
        source.addEventListener('close', function (e) {
            source.close();
            console.log(e);
            msg("数据接收完毕，关闭EventSource");
        }, false);

        //响应error事件
        source.addEventListener('error', function (e) {
            if (e.readyState == EventSource.CLOSED) {
                msg("连接关闭");
            } else {
                console.log(e);
            }
        }, false);

    } else {
        console.log("你的浏览器不支持SSE");
        msg("你的浏览器不支持SSE");
    }

</script>

3.测试

首页：http://localhost:8080/sse

发送消息：http://localhost:8080/sse/push?id=ssetest&content=%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE

关闭连接：http://localhost:8080/sse/close?id=ssetest

阿瑟与非

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
Js即时通讯技术 - SSE（SpringBoot实现）

一、前言主流的Web端即时通讯方案大致有4种：传统Ajax短轮询、Comet技术、WebSocket技术、SSE（Server-sent Events）。 Ajax短轮询 Comet WebSocket SSE 概念 http端轮询是服务器收到请求不管是否有数据都直接响应 http 请求; 浏览器受到 http 响应隔一段时间在发送同样的http 请求查询是否有数据; http 长轮询是服务器收到请求后如果有数据, 立刻响应请求; 如果没有数据就会 hold.
复制链接

扫一扫