SpringBoot / Vue 对SSE的基本使用

一、SSE是什么?


SSE技术是基于单工通信模式,只是单纯的客户端向服务端发送请求,服务端不会主动发送给客户端。服务端采取的策略是抓住这个请求不放,等数据更新的时候才返回给客户端,当客户端接收到消息后,再向服务端发送请求,周而复始。

注意:因为EventSource对象是SSE的客户端,可能会有浏览器对其不支持

二、sse 与 websoket

1、SSE(Server-Sent Events)


是 HTML5 遵循 W3C 标准提出的客户端和服务端之间进行实时通信的协议。

优点

SSE 客户端可以接收来自服务器的“流”数据,而不需要进行轮询。由于没有浪费的请求,因此 SSE 对于减轻服务器的压力非常有用。
SSE 使用纯 JavaScript 实现简单,不需要额外的插件或库来处理消息。客户端可以使用 EventSource 接口轻松地与 SSE 服务器通信。
SSE 天生具有自适应性,由于 SSE 是基于 HTTP 响应使用 EventStream 传递消息,因此它利用了 HTTP 的开销和互联网上的结构。
SSE 可以与任何服务器语言和平台一起使用,因为 SSE 是一种规定了消息传递方式的技术,不依赖于具体的服务器语言和平台。
缺点

SSE 是单向通信,只能从服务器推送到客户端。如果应用程序需要双向通信,就需要使用 Websocket。
SSE无法发送二进制数据,只能发送 UTF-8 编码的文本。如果应用程序需要发送二进制数据,就需要使用 Websocket。
SSE 不是所有浏览器都支持。虽然 SSE 是 HTML5 的一部分,但具体的浏览器支持性可能会有差异。


2、Websocket


是 HTML5 的一部分,提供了一种双向通信的机制。

优点

Websocket 支持双向通信。使用 Websocket 可以同时向客户端发送和接收数据。
Websocket 协议可以传输二进制数据,这使得 Websocket 更加灵活和强大。
Websocket 连接长期存在,而不需要仅仅为了接收数据而保持 HTTP 连接打开。
Websocket 的实现支持跨域的通信,可以方便地进行跨域通信。
缺点

Websocket 不支持所有浏览器。特别是老浏览器可能不支持 Websocket 协议。
Websocket 是一种全双工的通信方式。由于 Websocket 长期存在,会占用服务器资源。在高并发场景下,应该考虑使用 SSE。

三、前端示例代码

// 建立连接createSseConnect(clientId){if(window.EventSource){const eventSource = new EventSource('http://127.0.0.1:8083/sse/createSseConnect?clientId='+clientId);console.log(eventSource)eventSource.onmessage = (event) =>{console.log("onmessage:"+clientId+": "+event.data)};eventSource.onopen = (event) =>{console.log("onopen:"+clientId+": "+event)};eventSource.onerror = (event) =>{console.log("onerror :"+clientId+": "+event)};eventSource.close = (event) =>{console.log("close :"+clientId+": "+event)};}else{console.log("你的浏览器不支持SSE~")}console.log(" 测试 打印")
},

四、后端示例代码

SseController

package com.joker.cloud.linserver.controller;import com.joker.cloud.linserver.conf.sse.sseUtils;
import com.joker.common.message.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;import java.util.Map;/*** SseController***/
@RestController
@Slf4j
@CrossOrigin
@RequestMapping("/sse")
public class SseController {@Autowiredprivate sseUtils sseUtils;@GetMapping(value = "/createSseConnect", produces="text/event-stream;charset=UTF-8")public SseEmitter createSseConnect(@RequestParam(name = "clientId", required = false) Long clientId) {return sseUtils.connect(clientId);}@PostMapping("/sendMessage")public void sendMessage(@RequestParam("clientId") Long clientId, @RequestParam("message")  String message){sseUtils.sendMessage(clientId, "123456789", message);}@GetMapping(value = "/listSseConnect")public Result<Map<Long, SseEmitter>> listSseConnect(){Map<Long, SseEmitter> sseEmitterMap = sseUtils.listSseConnect();return Result.success(sseEmitterMap);}/*** 关闭SSE连接** @param clientId 客户端ID**/@GetMapping("/closeSseConnect")public Result closeSseConnect(Long clientId) {sseUtils.deleteUser(clientId);return Result.success();}}

sseUtils工具类

package com.joker.cloud.linserver.conf.sse;import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;import java.util.Map;
import java.util.UUID;
import java.util.concurrent.ConcurrentHashMap;/*** sseUtils**/
@Slf4j
@Component
public class sseUtils {private static final Map<Long, SseEmitter> sseEmitterMap = new ConcurrentHashMap<>();/*** 创建连接*/public SseEmitter connect(Long userId) {if (sseEmitterMap.containsKey(userId)) {SseEmitter sseEmitter =sseEmitterMap.get(userId);sseEmitterMap.remove(userId);sseEmitter.complete();}try {UUID uuid = UUID.randomUUID();String str = uuid.toString();String temp = str.substring(0, 8) + str.substring(9, 13) + str.substring(14, 18) + str.substring(19, 23) + str.substring(24);// 设置超时时间,0表示不过期。默认30秒SseEmitter sseEmitter = new SseEmitter(30*1000L);sseEmitter.send(SseEmitter.event().id(temp).data(""));
//            reconnectTime(10*1000L)// 注册回调sseEmitter.onCompletion(completionCallBack(userId));
//            sseEmitter.completeWithError(errorCallBack(userId));sseEmitter.onTimeout(timeoutCallBack(userId));sseEmitterMap.put(userId, sseEmitter);log.info("创建sse连接完成,当前用户:{}", userId);return sseEmitter;} catch (Exception e) {log.info("创建sse连接异常,当前用户:{}", userId);}return null;}/*** 给指定用户发送消息**/public boolean sendMessage(Long userId,String messageId, String message) {if (sseEmitterMap.containsKey(userId)) {SseEmitter sseEmitter = sseEmitterMap.get(userId);try {sseEmitter.send(SseEmitter.event().id(messageId).data(message));
//                reconnectTime(10*1000L)log.info("用户{},消息id:{},推送成功:{}", userId,messageId, message);return true;}catch (Exception e) {sseEmitterMap.remove(userId);log.info("用户{},消息id:{},推送异常:{}", userId,messageId, e.getMessage());sseEmitter.complete();return false;}}else {log.info("用户{}未上线", userId);}return false;}/*** 删除连接* @param userId*/public void deleteUser(Long userId){removeUser(userId);}private static Runnable completionCallBack(Long userId) {return () -> {log.info("结束sse用户连接:{}", userId);removeUser(userId);};}private static Throwable errorCallBack(Long userId) {log.info("sse用户连接异常:{}", userId);removeUser(userId);return new Throwable();}private static Runnable timeoutCallBack(Long userId) {return () -> {log.info("连接sse用户超时:{}", userId);removeUser(userId);};}/*** 断开* @param userId*/public static void removeUser(Long userId){if (sseEmitterMap.containsKey(userId)) {SseEmitter sseEmitter = sseEmitterMap.get(userId);sseEmitterMap.remove(userId);sseEmitter.complete();}else {log.info("用户{} 连接已关闭",userId);}}public Map<Long, SseEmitter> listSseConnect(){return sseEmitterMap;}
}

五、模拟测试

浏览器建立的连接中会看到服务器推送到客户端的消息内容及ID等基础信息

控制台也可以监听到事件的变化并输出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB算法实战应用案例精讲-【图像处理】相机标定(补充篇)

目录 前言 知识储备 摄像头基础知识 一、摄像头结构和工作原理 二、相关参

postman使用POST,却收到的是GET请求

现象&#xff1a; 可以看到我们postman发出的确实是post请求&#xff0c;message却报错这个接口不支持get请求&#xff0c;说明服务器实际上收到的是一个get请求。 产生原因分析 如果我们访问的是线上的接口&#xff0c;线上的nginx一般都会对http访问做一个302重定向&#xf…

生成的二维码如何解析出原来的地址?

生成的二维码如何解析出原来的地址&#xff1f; 随着移动互联网的发展&#xff0c;二维码作为一种快速获取信息的方式&#xff0c;在我们的生活中越来越常见。而PHP作为Web语言之一&#xff0c;也有着二维码解码的功能。 PHP中有着众多的二维码解码库&#xff0c;例如&#x…

k8s 集群部署

目录 1. 集群环境初始化 2. 所有节点安装kubeadm 3. 拉取集群所需镜像 4. 集群初始化 5. 安装flannel网络插件 6. 扩容节点 7. 设置kubectl命令补齐 官网&#xff1a; https://v1-23.docs.kubernetes.io/zh/docs/setup/production-environment/tools/kubeadm/install-kubeadm/ …

git的使用——如何创建.gitignore文件,排除target、.idea文件夹的提交

前言 git作为开发人员必备的技能&#xff0c;需要熟练掌握&#xff0c;本篇博客记录一些git使用的场景&#xff0c;结合具体问题进行git使用的记录。以gitee的使用为例。 本篇博客介绍如何创建.gitignore文件&#xff0c;排除一些文件夹的提交&#xff0c;比如排除target、.i…

2023前端面试整理

1. 介绍一下最近参与的项目,负责那些业务,在开发过程中遇到过问题吗&#xff1f;最后是咋样处理的&#xff1f; 之前负责过大小十几个项目&#xff0c;负责过浙里办的整套上架流程&#xff0c;负责过数据大屏统计&#xff0c;后台管理系统文书生成表单生成等&#xff0c;浙政钉…

树莓派4B安装ffmpeg

环境&#xff1a; piraspberrypi:~/x264 $ lsb_release -aNo LSB modules are available.Distributor ID: RaspbianDescription: Raspbian GNU/Linux 10 (buster)Release: 10Codename: buster 装H264 git clone --depth 1 https://code.videolan.org/video…

c++拷贝构造与赋值运算符重载

目录 目录&#xff1a; 1&#xff1a;拷贝构造 2&#xff1a;赋值运算符重载 前言&#xff1a;在上一章我们已经学习过了&#xff0c;构造与析构这两个默认成员函数了&#xff0c;接下来让我们一起来学习另外两个重要的默认成员函数。 首先让我们来讲一下默认成员函数这个概念…

【ARM Trace32(劳特巴赫) 使用介绍 2 -- Trace32 cmm 脚本基本语法及常用命令】

文章目录 Trace32 CMM 概述1.1 Trace32 系统命令 SYStem1.1.1 Trace32 SYStem.CONFIG1.1.2 SYStem.MemAccess1.1.3 SYStem.Mode1.1.3.1 TRST-Resets the JTAG TAP controller and the CPU internal debug logic1.1.3.2 SRST- Resets the CPU core and peripherals 1.2 Trace32 …

Azure - 自动化机器学习AutoML Azure使用详解

目录 一、AutoML是如何工作的&#xff1f;二、何时考虑AutoML&#xff1f;三、AutoML助力训练与集成过程四、实战案例五、总结 自动化机器学习&#xff0c;简称为AutoML&#xff0c;旨在将机器学习模型的开发中繁琐且重复的任务自动化。这使得数据科学家、分析师以及开发人员能…

ThinkPad电脑HDMI接口失灵如何解决?

ThinkPad电脑HDMI接口失灵如何解决&#xff1f; 如果平时正常使用的外接显示器&#xff0c;某天突然无法使用了&#xff0c;重新插拔依然无信号的话&#xff0c;可以打开系统的设备管理器&#xff08;快捷键winx&#xff09;&#xff0c;首先看一下监视器的识别情况&#xff0c…

Vue3.0组件的生命周期

每个Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到DOM&#xff0c;以及在数据改变时更新 DOM。在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让开发者有机会在特定阶段…

Istio 实战

文章目录 Istio流量管理分享会【1】什么是istio?【2】istio 可以干什么?【3】业务中的痛点?【4】istio 高级流量管理5.1 istio 组件介绍与原理5.2 sidercar何时注入?如何控制是否注入?5.3 查看sidecar 容器插入的容器中的iptablesDestination RuleVirtual ServiceGateways…

使用es实现轻量级分布式锁

文章目录 [toc] 1.前言2.实现3.总结 1.前言 一般来说&#xff0c;实现分布式锁的方式有哪几种&#xff1f; 一&#xff1a;Redisson实现 二&#xff1a;ZK实现 这两种实现网上的实现是千篇一律&#xff0c;在本文就不做过多的讲解了 其它方式好像没有了&#xff0c;真的是这…

Camtasia Mac 2023版怎么给视频加字幕

在视频制作过程中&#xff0c;字幕和马赛克是两项非常常用的编辑功能&#xff0c;添加字幕可以提高观众的观看体验&#xff0c;添加马赛克可以保护视频创作者不想公开的画面内容。Camtasia作为一款知名的视频制作软件&#xff0c;在具备基本的录制和视频编辑功能的同时&#xf…

Windows11搭建kafka-python环境

文章目录 安装软件javazookeeperkafka命令行调试环境python-kafka环境参数解释名词解释定义基础架构同步发送、异步发送消息队列的两种模式消费者与消费组幂等性文件清理策略kafka消费模式offset作用kafka消费顺序如何保证参考文献安装软件 java 下载jdk,配置环境变量JAVA_H…

win10安装spark

一、进入spark下载页面 连接 Downloads | Apache Spark 二、解压下载后的.tgz文件 直接解压即可 三、运行 运行bin目录下的 spark-shell.cmd 提示 Did not find winutils.exe: java.io.FileNotFoundException: java.io.FileNotFoundException: HADOOP_HOME and hadoop.hom…

二蛋赠书六期:《Linux管理入门经典(第8版)》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

2023-09-09 青少年软件编程(C语言)等级考试试卷(五级)解析

2023-09-09 青少年软件编程(C语言)等级考试试卷(五级)解析T1、红与黑 有一间长方形的房子,地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上,只能向相邻的黑色瓷砖移动。请写一个程序,计算你总共能够到达多少块黑色的瓷砖。 时间限制:1000 内存限制…

[量化投资-学习笔记002]Python+TDengine从零开始搭建量化分析平台-MA均线的多种实现方式

MA 均线时最基本的技术指标&#xff0c;也是最简单&#xff0c;最不常用的&#xff08;通常使用EMA、SMA&#xff09;。 以下用两种不同的计算方法和两种不同的画图方法进行展示和说明。 MA 均线指标公式 MA (N)(C1 C2 C3 …C N )/N目录 方式一1.SQL 直接查询均值2.使用 pyp…