消息推送只会用websocket、轮询？试试SSE，轻松高效。

已于 2024-07-31 17:13:06 修改
阅读量436 收藏 10
点赞数 4
分类专栏： 后台 文章标签： SSE websocket 通信 长链接 消息
于 2024-07-29 11:12:37 首次发布
禁止商用，转载请注明出处。如有不妥之处，望大佬斧正。联系方式：supreme_tt@163.com
本文链接：https://blog.csdn.net/Supreme_Sir/article/details/140766181
版权

SSE介绍

HTTP Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术,它允许服务器向客户端推送数据,而无需客户端发起请求。以下是 HTTP SSE 的主要特点:

单向通信:
SSE 是一种单向通信协议,服务器可以主动向客户端推送数据,而客户端只能被动接收数据。

持久连接:
SSE 使用 HTTP 持久连接(long-lived connection)来保持客户端与服务器之间的连接,避免频繁地重新建立连接。

事件驱动:
SSE 采用事件驱动的方式,服务器将数据封装成事件推送给客户端,客户端可以根据事件类型进行相应的处理。

简单易用:
SSE 的协议简单,基于标准的 HTTP 协议,可以在任何支持 HTTP 的环境中使用。
客户端和服务器端的实现也相对简单,开发成本较低。

可靠性:
SSE 基于 HTTP 协议,可以利用 HTTP 的重试机制来提高数据传输的可靠性。
如果连接断开,客户端可以自动重新连接并恢复数据传输。

浏览器支持:
主流浏览器(Chrome、Firefox、Safari 等)都原生支持 SSE。
对于不支持 SSE 的浏览器,可以使用 polyfill 库来实现兼容性。

应用场景:
SSE 适用于实时性要求较高的场景,如聊天应用、体育赛事直播、股票行情更新等。
与 WebSocket 相比,SSE 更加轻量级,适用于一些对实时性要求不太高但需要持续更新的场景。

总的来说,HTTP SSE 提供了一种简单、可靠、高效的服务器推送机制,可以在各种 Web 应用中得到广泛应用。它是 Web 实时通信技术的一种重要补充。

与websocket对比

HTTP Server-Sent Events (SSE) 和 WebSocket 都是实现服务器与客户端之间实时双向通信的技术,但它们在某些方面存在一些差异。以下是它们的对比:

  1. 通信模式:
    • SSE 是单向通信,服务器只能主动推送数据给客户端,客户端只能被动接收。
    • WebSocket 是双向通信,服务器和客户端可以互相发送和接收数据。
  2. 连接方式:
    • SSE 使用标准的 HTTP 连接,利用 HTTP 持久连接来保持连接。
    • WebSocket 使用独立的 WebSocket 协议,建立全双工的 TCP 连接。
  3. 传输协议:
    • SSE 使用标准的 HTTP 协议,数据以文本的形式传输。
    • WebSocket 使用自己的二进制协议,可以传输二进制数据。
  4. 浏览器支持:
    • SSE 被大多数现代浏览器原生支持。
    • WebSocket 也被大多数现代浏览器原生支持。
  5. 可靠性:
    • SSE 可以利用 HTTP 的重试机制来提高数据传输的可靠性。
    • WebSocket 建立在 TCP 协议之上,也具有较高的可靠性。
  6. 实时性:
    • SSE 的实时性略低于 WebSocket,因为它需要依赖 HTTP 的连接机制。
    • WebSocket 建立在独立的 TCP 连接之上,实时性更高。
  7. 应用场景:
    • SSE 更适合于一些实时性要求不太高但需要持续更新的场景,如聊天应用、体育赛事直播等。
    • WebSocket 更适合于需要实时双向通信的场景,如在线游戏、视频会议等。

总的来说,SSE 和 WebSocket 都是实现服务器与客户端实时通信的有效方式,它们各有优缺点,适用于不同的应用场景。在选择时需要根据具体的需求来权衡取舍。

上代码

主体工具类 SseUtil

import com.alibaba.fastjson.JSON;
import com.enums.EnumDeviceType;
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import javax.annotation.Resource;
import java.io.IOException;
import java.util.function.Consumer;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 * SSE 通信工具类
 *
 * @author Supreme_Sir
 * @version V1.0.0
 */
@Component
@Slf4j
public class SseUtil {
    /**
     * SSE 超时时间 24小时
     */
    private static final Long TIMEOUT_24_HOUR = 86400000L;
    @Resource
    private ThreadPoolTaskExecutor threadPoolTaskExecutor;
    @Resource
    private UnreadMessageCountCacheUtil unreadMessageCountCacheUtil;

    /**
     * 订阅SSE
     */
    public SseEmitter subscribe(EnumDeviceType deviceType, Long userId) {
        SseEmitter sseEmitter = SingletonConcurrentHashMap.INSTANCE.get(deviceType, userId);
        if (sseEmitter == null) {
            //生成连接并存储
            sseEmitter = new SseEmitter(TIMEOUT_24_HOUR);
            SingletonConcurrentHashMap.INSTANCE.put(deviceType, userId, sseEmitter);
        }

        //设置回调函数
        sseEmitter.onCompletion(completionCallBack(deviceType, userId));
        sseEmitter.onTimeout(timeoutCallBack(deviceType, userId));
        sseEmitter.onError(errorCallBack(deviceType, userId));
        // 立即发送未读消息数量，消除前端等待
        Long cnt = unreadMessageCountCacheUtil.getWithCallBack(userId);
        sendMessage(userId, new SseMessageVo(cnt, null));
        log.info("用户-{}-{} SSE连接成功", userId, deviceType.getName());
        return sseEmitter;
    }

    /**
     * 退订消息
     *
     * @param userId 用户ID
     */
    public String unsubscribe(EnumDeviceType deviceType, Long userId) {
        SseEmitter sseEmitter = SingletonConcurrentHashMap.INSTANCE.get(deviceType, userId);
        if (sseEmitter != null) {
            //注意：此方法应由应用程序调用，以完成请求处理。它不应在容器相关事件（如发送时出错）发生后使用。
            sseEmitter.complete();
            SingletonConcurrentHashMap.INSTANCE.remove(deviceType, userId);
        }
        return "退订成功";
    }

    /**
     * 发送SSE消息
     *
     * @param userId  用户ID
     * @param content 消息内容
     */
    public void sendMessage(Long userId, SseMessageVo content) {
        for (EnumDeviceType deviceType : EnumDeviceType.values()) {
            SseEmitter sseEmitter = SingletonConcurrentHashMap.INSTANCE.get(deviceType, userId);
            if (sseEmitter != null) {
                try {
                    log.info("向用户-{} SSE发送消息-{}", userId, JSON.toJSONString(content));
                    sseEmitter.send(content);
                } catch (IOException e) {
                    log.error("用户-{}-{} SSE发送消息异常-{}", userId, deviceType.getName(), e.getMessage());
                    SingletonConcurrentHashMap.INSTANCE.remove(deviceType, userId);
                    log.error("用户-{}-{} SSE发送消息异常被移除", userId, deviceType.getName());
                }
            }
        }
    }

    /**
     * SSE 单向通信心跳检测（需配合定时任务）
     */
    public void heartbeat() {
        SingletonConcurrentHashMap.INSTANCE.getMap().forEach((key, value) -> {
            Long userId = extractNumbers(key.toString());
            Long cnt = unreadMessageCountCacheUtil.getWithCallBack(userId);
            sendMessage(userId, new SseMessageVo(cnt, null));
        });
    }

    /**
     * SSE 连接成功回调
     *
     * @param userId 用户ID
     */
    private Runnable completionCallBack(EnumDeviceType deviceType, Long userId) {
        return threadPoolTaskExecutor.newThread(() -> {
            log.info("用户-{}-{} SSE连接断开", userId, deviceType.getName());
            SingletonConcurrentHashMap.INSTANCE.remove(deviceType, userId);
        });
    }

    /**
     * 出现超时，将当前用户缓存删除
     *
     * @param userId 用户ID
     */
    private Runnable timeoutCallBack(EnumDeviceType deviceType, Long userId) {
        return threadPoolTaskExecutor.newThread(() -> {
            log.error("用户-{}-{} SSE连接超时", userId, deviceType.getName());
            unsubscribe(deviceType, userId);
            log.error("用户-{}-{} SSE连接超时被移除", userId, deviceType.getName());
        });
    }

    /**
     * 出现异常，将当前用户缓存删除
     *
     * @param userId 用户ID
     */
    private Consumer<Throwable> errorCallBack(EnumDeviceType deviceType, Long userId) {
        return throwable -> {
            log.error("用户-{}-{} SSE连接异常", userId, deviceType.getName());
            unsubscribe(deviceType, userId);
            log.error("用户-{}-{} SSE连接异常被移除", userId, deviceType.getName());
        };
    }

    /**
     * 截取字符串中的数字
     *
     * @param input 待截取的字符串
     */
    private Long extractNumbers(String input) {
        Pattern pattern = Pattern.compile("[a-zA-Z](\\d+)");
        Matcher matcher = pattern.matcher(input);

        if (matcher.find()) {
            // 返回第一个匹配的数字序列
            return Long.valueOf(matcher.group(1));
        } else {
            // 如果没有找到匹配项，可以返回null或抛出异常
            return null;
        }
    }
}

要点：

  1. 新建好的 SSE 对象需要用容器存储起来，以服务于后续消息通信。
  2. 回调使用 ThreadPool 进行管理避免线程过多。
  3. 一个 SSE 对象只能与一端保持通信，如果存在多端的话，需要创建多个对象。

SSE对象单例存储容器 SingletonConcurrentHashMap

import com.enums.EnumDeviceType;
import lombok.Getter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.util.concurrent.ConcurrentHashMap;

/**
 * 基于ConcurrentHashMap的单例版SSE存储容器
 */
@Getter
public enum SingletonConcurrentHashMap {
    /**
     * 单例版存储容器
     */
    INSTANCE;

    private final ConcurrentHashMap<Object, SseEmitter> map = new ConcurrentHashMap<>();

    /**
     * 存入对象
     */
    public void put(EnumDeviceType deviceType, Object key, SseEmitter value) {
        map.put(deviceType.getCode() + key, value);
    }

    /**
     * 获取对象
     */
    public SseEmitter get(EnumDeviceType deviceType, Object key) {
        return map.get(deviceType.getCode() + key);
    }

    /**
     * 判断缓存中是否存在当前用户的SSE实例
     *
     * @param key 用户ID
     */
    public boolean haveInstance(Object key) {
        // 分别查询PC、小程序的SSE实例
        for (EnumDeviceType deviceType : EnumDeviceType.values()) {
            if (map.get(deviceType.getCode() + key) != null) {
                return true;
            }
        }
        return false;
    }

    /**
     * 移除对象
     */
    public void remove(EnumDeviceType deviceType, Object key) {
        map.remove(deviceType.getCode() + key);
    }

    /**
     * 判断是否存在
     */
    public boolean containsKey(EnumDeviceType deviceType, Object key) {
        return map.containsKey(deviceType.getCode() + key);
    }

    /**
     * 获取对象数量
     */
    public int size() {
        return map.size();
    }

    /**
     * 清空
     */
    public void clear() {
        map.clear();
    }

}

心跳数据缓存工具 UnreadMessageCountCacheUtil

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.core.redis.RedisTemplateUtils;
import com.enums.EnumYesOrNo;
import com.util.RedisKeyUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
import java.util.Objects;
import java.util.concurrent.TimeUnit;

/**
 * @author Supreme_Sir
 * @description 未读消息条数缓存工具
 **/
@Component
@Slf4j
public class UnreadMessageCountCacheUtil {
    @Resource
    private IDao dao;
    // 过期时间30分钟
    private static final Long TIMEOUT = 30L;

    /**
     * 添加缓存
     */
    private void put(Long key, Object value) {
        if (Objects.isNull(key) || Objects.isNull(value)) {
            return;
        }
        RedisTemplateUtils.setCacheObject(RedisKeyUtils.getUnreadMessageCount() + key, value, TIMEOUT, TimeUnit.MINUTES);
    }

    /**
     * 获取缓存（缓存中如果没有则回数据库查询）
     */
    public Long getWithCallBack(Long key) {
        if (Objects.isNull(key)) {
            return null;
        }
        Object cnt = RedisTemplateUtils.getCacheObject(RedisKeyUtils.getUnreadMessageCount() + key);
        if (Objects.isNull(cnt)) {
            cnt = queryCount(key);
            put(key, cnt);
        }
        return Long.valueOf(cnt.toString());
    }

    /**
     * 获取最新缓存
     *
     * @return {@link Long} 最新未读数据条数
     */
    public Long getWithRefresh(Long key) {
        if (Objects.isNull(key)) {
            return null;
        }
        Long cnt = queryCount(key);
        put(key, cnt);
        return cnt;
    }


    /**
     * 手动刷新缓存
     */
    public void refresh(Long key) {
        if (Objects.isNull(key)) {
            return;
        }
        put(key, queryCount(key));
    }

    /**
     * 回库查询未读消息条数
     *
     * @param userId 用户ID
     * @return {@link Long} 未读消息数量
     */
    private Long queryCount(Long userId) {
        QueryWrapper<> wrapper = new QueryWrapper<>();
        // 连接数据库查询数据
        return dao.selectCount(wrapper);
    }
}

注意：该缓存工具对象由 Spring 容器管理，以确保单例。

Controller 层代码

@PostMapping(value = "sse/subscribe***", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter subscribe***t(@Valid @RequestBody Param param) {
    return sseUtil.subscribe(EnumDeviceType.PC, param.getId());
}

注意：@PostMapping 的 produces 属性必须为 MediaType.TEXT_EVENT_STREAM_VALUE

前端关键代码

import { fetchEventSource } from '@microsoft/fetch-event-source';
const ctrl = new AbortController();
fetchEventSource(`${env.VITE_API_URL_PREFIX}/xxx/sse/xxx`, {
    signal: ctrl.signal,
    method: 'POST',
    headers: {
        'Auth-Token': localStorage.getItem(TOKEN_NAME),
    },
    body: JSON.stringify({
        UserID: localStorage.getItem('userID'),
    }),
    openWhenHidden: true,
    onopen: async (event: any) => {
        console.log('sse open：', event);
    },
    onmessage: async (event: any) => {
        const data = JSON.parse(event.data);
        this.setMsgCount(data.UnreadMsgCount || 0);
        console.log('SSE 消息：', data);
        if (data.Data) {
            const NotifyInstance = await NotifyPlugin.info({
                class: 'global-notify-card-wrap',
                icon: false,
                duration: 10000,
                closeBtn: false,
                offset: [0, 53],
                content: (h) =>
                    h(MessageBox, {
                        Data: data.Data,
                        onHide: () => {
                            NotifyInstance.close();
                        },
                    }),
            } as any);
        }
    },
});
this.see = {
    close: () => ctrl.abort(),
};

-------------------------------------------风雨里做个大人，阳光下做个孩子。-------------------------------------------

Supreme_Sir
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务器端轮询推送消息,消息推送机制-轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)...
weixin_27966471的博客
08-12 1472
实际应用中经常会有实现页面无刷新更新内容的需求。本文就轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)介绍具体的应用场景。相关知识点：es6 API、nodejs、html5文章结构：轮询长轮询SSE(Server Sent Event)WS(WebSocket)1. 轮询-数据拉取轮询是在特定的的时间间隔(如每隔1秒)，由浏览器(客户端)对服务器发出HTTP...
polling-websocket-sse:服务器推送研究，包括长轮询，短轮询，SSE，WS
05-14
服务器推送目的比较服务器推送技术解决服务器推送中的负载平衡问题比较短轮询简单的HTTP基本，负载平衡兼容性好发出大量请求，包括大量HTTP标头（浪费） 无需管理连接单面长轮询简单的HTTP基本，负载平衡兼容性好...
如果让你实现实时消息推送你会用什么技术?轮询、websocket还是sse
程序员成长指北
02-28 131
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群前言在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如_数据大屏的实时数据_，比如_消息中心的未读消息_，比如_聊天功能_等等。本文主要介绍SSE的使用场景和如何使用SSE。image.png服务端向客户端推送数据的实现方案有哪几种？我们常规实现这些需求的方案有以下三种...
ajax轮询 websocket SEE 实现实时消息推送与优缺点详解
@必意玲
04-20 1022
在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的伪推送，为什么说轮询是伪推送？因为轮询本质上还是通过客户端向服务端发起一个单项传输的请求，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。首先轮询需要不断的发起请求，每一个请求都需要经过http建立连接的流程（比如三次握手，四次挥手），是没有必要的消耗。客户端需要从页面被打开的那一刻开始就一直处理请求。
消息推送技术（sse、websocket）
码农之路，向死而生
10-18 3835
消息推送-ajax长短轮循、sse技术、websocket技术
如果让你实现实时消息推送你会用什么技术？轮询、websocket还是sse
广漂程序猿DevinRock
03-11 1070
在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的_伪推送_，为什么说轮询是伪推送？因为_轮询本质上还是通过客户端向服务端发起一个单项传输的请求_，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。首先轮询需要不断的发起请求，_每一个请求都需要经过http建立连接的流程_（比如三次握手，四次挥手），是没有必要的消耗。客户端需要从页面被打开的那一刻开始就_一直处理请求_。
webSocket的简易低配？SSE实现服务器向客户端的实时消息推送
qq_45776953的博客
01-16 558
sse可以简单平替webSocket部分场景下的使用情况。sse能简单且方便的实现客户端与服务器端的消息实时通信。但只支持单向通信。
Web实时通信的学习之旅：轮询、WebSocket、SSE的区别以及优缺点
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-26 1991
WebSocket比SSE功能更加强大，WebSocket是在服务端和客户端建立的双向实时数据通道，而SSE只支持服务端想客户端的单向通讯浏览器对WebSocket的支持也更加广泛，IE、Edge几乎不支持SSEWebSocket有一套独立的标准协议，在使用过程中必须按照标准协议来，而SSE使用的是Http协议，只需要更改Context-Type为"text/event-stream;charset=utf-8"即可，这里需要特殊注意的一点，必须是utf-8。
【Java网络编程与IO流】Web实时通信技术即消息推送机制- 简要介绍短连接 长连接 轮询 长轮询 SSE WebSocket？
Mind_programmonkey的博客
11-24 967
Web实时通信技术即消息推送机制- 简要介绍短连接 长连接 轮询 长轮询 SSE WebSocket？ 一、什么是长连接和短连接？ HTTP的长连接和短连接实质上是TCP长连接的短连接。 在了解HTTP的长连接和短连接之前先来了解一下HTTP协议。 1.预备知识 1.1 HTTP协议与TCP/IP协议的关系 HTTP属于应用层协议，在传输层中使用TCP协议，在网络层中使用IP协议。其中IP协议主要解决网络路由和寻址的问题，TCP协议主要解决如何在IP层之上传输可靠的数据包。 1.2 如何理解HTTP协议
服务器推送技术之短轮询、长轮询、SSE和Websocket
热门推荐
morris
12-07 1万+
服务器推送技术 服务器推送技术干嘛用？就是让用户在使用网络应用的时候，不需要一遍又一遍的去手动刷新就可以及时获得更新的信息。大家平时在上各种视频网站时，对视频节目进行欢乐的吐槽和评论，会看到各种弹幕，当然，他们是用flash技术实现的，对于我们没有用flash的应用，一样可以实现弹幕。又比如在股票网站，往往可以看到，各种股票信息的实时刷新，上面的这些都是基于服务器推送技术。 Ajax短轮询 Ajax短轮询就是用一个定时器不停的去网站上请求数据。 下面的代码实现浏览器页面实时显示服务器的当前时间。 服务器端
消息推送实例
05-25
为了解决这个问题，出现了长轮询（Long Polling）、WebSocket、Server-Sent Events (SSE) 等技术，它们允许服务器在有新数据时主动推送给客户端，实现了真正的双向通信。 RTPollingDemo-master中的“RTPolling”...
asp.net mvc实现简单的实时消息推送
10-21
总结来说，ASP.NET MVC结合SignalR可以轻松地实现高效、跨浏览器的实时消息推送。通过创建Hub、配置OWIN Startup和处理客户端通信，开发者可以构建出具有实时通信功能的Web应用程序。不过，为了优化性能和用户体验，...
Android Websocket
01-09
WebSocket与传统的Long Polling、Polling、Server-Sent Events (SSE)等推送技术相比，具有更低的延迟和更高的效率。尤其是对于Android这样的移动平台，WebSocket能更好地节省电池和网络资源。 七、实际开发注意事项...
asp.net core 使用SignalR推送消息
08-23
在本文中，我们将深入探讨如何使用ASP.NET Core SignalR来实现两个关键功能：简单在线聊天功能以及定向推送消息给指定用户。 首先，让我们理解SignalR的基本概念。SignalR是一个用于实时Web应用的库，支持WebSocket...
IDEA创建 Git 分支
Supreme_Sir的博客
08-03 1万+
IDEA 创建 Git 分支 1、选中项目后右键（如果右键没有 Git，则 VCS–&gt;Enable Version Control Integration 即可） 2、选择新建分支 3、输入分支名称，并勾选 Checkout branch 4、提交代码至本地 5、 推送代码至服务器 6、弹出窗口中选择 Push 7、登录...
java浏览器无界面后台截屏工具
Supreme_Sir的博客
04-30 1万+
java浏览器无界面后台截屏工具 不同于上一篇文章中所讲到的通过客户端浏览器将 HTML 转 canvas 再生成图片的方式，本次记录的内容为服务器端（Windows Server）截屏工具。该工具特点为：通过 java 代码调用无界面浏览器的 .exe 文件，让无界面浏览器在后台完成 HTML 的渲染和截屏，并将截图保存至指定路径下。代码如下： ScreenshotDemo.java imp...
IDEA导入Git中的Maven项目
Supreme_Sir的博客
08-02 9506
IDEA 导入 Git 中的 Maven 项目 1、获取项目连接 2、Clone 项目至本地（由于本人在安装 IDEA 时并未安装其他版本控制软件，故在第一步后可以直接出 Clone Repository 窗口。如果您安装了其他版本控制软件则在第一步后下拉菜单中选择 Git 即可） 3、导入刚刚 Clone 的 Maven 项目 4、接下来一路 Next 后，项...
Maven 配置 commons-codec 下的MD5加密
Supreme_Sir的博客
03-08 8534
apache的commons-codec 1）maven配置（现在的版本有很多，选择自己需要的）： <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.6</version
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值