当前位置： 首页 > news >正文

WebSocket or SSE？即时通讯的应用策略【送源码】

news 文章来源：https://blog.csdn.net/java_121388/article/details/138925058 2025/5/18 8:12:36

 最近在研究H5推送，发现除了我们常用的WebSocket以外，其实还有一种协议也能实现H5推送，那就是SSE协议。

而且，当前主流的大模型平台，比如ChatGPT、通义千问、文心一言，对话时采用的就是SSE。

什么是SSE协议？

Server-Sent Events (SSE) 是一种基于HTTP协议的服务器到客户端的单向数据通信技术，允许服务器向浏览器实时推送更新，而不需要客户端通过轮询等方式反复请求数据。

SSE协议主要用于实现实时更新的Web应用，比如股票报价、新闻更新、社交网络的新消息通知等场景。

那么，同为H5推送的主流协议，SSE和WebSocket有什么区别？

SSE VS WebSocket

我们从以下几个方面来进行对比：

维度SSEWebSocket
协议原理基于HTTP/1.1，通过长连接实现服务器单向推送通过独立的WebSocket协议建立双向实时通信连接
易用性简单，前端使用EventSource对象即可相对复杂，需要更多的开发和配置工作
兼容性现代浏览器广泛支持同样广泛支持，但需注意旧版浏览器兼容性
通信方向单向（服务器→客户端）双向（服务器↔客户端）
事件驱动支持，事件数据可通过事件类型区分需自行在应用层实现
数据格式主要支持文本数据，可携带自定义元数据支持文本和二进制数据，格式灵活
连接管理浏览器自动处理连接恢复，可能面临连接断开问题开发者可全面控制连接状态和错误处理
资源效率长期无数据传输时可能出现连接中断，需重新连接建立连接后，资源消耗相对更低，无需频繁重建连接
缓存策略利用HTTP缓存策略需要开发者自行实现缓存策略

综合以上对比结果，若是H5动作较少的单向刷新场景，例如股价刷新、新闻动态等，建议选择SSE；若是在线协作、实时游戏等H5跟服务端交互较多的场景，建议使用WebSocket。

SSE实例

接下来，我们就用SpringBoot写一个SSE实例。

首先是服务端引入spring-boot-starter-web包，它自带支持SSE协议。

    <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>

接下来是创建SSE的Controller接口：

    package com.test.web;import lombok.extern.slf4j.Slf4j;import org.springframework.http.MediaType;import org.springframework.scheduling.annotation.Scheduled;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;import java.io.IOException;import java.util.HashMap;import java.util.Map;/*** SSE测试类*/@Slf4j@RestController@RequestMapping("/sse")public class SseController {private static final Map<String, SseEmitter> map = new HashMap<>();@GetMapping(value = "/createSseEmitter", produces = MediaType.TEXT_EVENT_STREAM_VALUE)public SseEmitter createSseEmitter(String clientId) {SseEmitter emitter = new SseEmitter(0L);emitter.onCompletion(() -> map.remove(emitter));emitter.onTimeout(() -> map.remove(emitter));map.put(clientId, emitter);return emitter;}@Scheduled(fixedDelay = 1000) // 每隔5秒推送一次模拟数据public void pushDataToAllClients() {for (Map.Entry<String, SseEmitter> entry : map.entrySet()) {try {String data = "This is some updated data from server at " + System.currentTimeMillis();entry.getValue().send(SseEmitter.event().name("message").data(data));} catch (IOException e) {log.error("Error sending data to client", e);}}}}

然后是前端测试代码：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>实时股票价格监控</title></head><body><h1>实时股票价格</h1><div id="stock-price"></div><script>const source = new EventSource('/sse/createSseEmitter?clientId=123456');source.onopen = function() {console.log('Connection to the server was opened.');};source.onmessage = function (event) {// document.getElementById('stock-price').innerHTML = event.data;const logItem = document.createElement('p');logItem.textContent = event.data;document.getElementById('stock-price').appendChild(logItem);};source.onerror = function(error) {console.error('Error occurred:', error);// 处理重连或其他错误逻辑};</script></body></html>

由于SSE不支持跨域，此处再加个NGINX代理：

    location /test {root /home;}location /sse {proxy_pass  http://10.10.2.100:8080;proxy_http_version 1.1; # 使用HTTP/1.1以支持长连接proxy_set_header Upgrade $http_upgrade; # 用于Websocket和SSE的Upgrade头proxy_set_header Connection "upgrade"; # 设置Connection头为upgrade，维持长连接proxy_set_header Host $host; # 传递原始Host头给后端proxy_cache_bypass $http_upgrade; # 忽略缓存，对于实时连接很重要proxy_read_timeout 60m; # 增加读取超时时间以适应长时间的SSE连接}

运行结果如下：

  -EOF-

 给大家分享一套基于Springboot+Vue的停车场管理系统源码，在实际项目中可以直接复用。(免费提供，文末自取)

一、系统运行图

1、登陆页面

2、车位管理

3、车辆进出管理

二、系统搭建视频教程

源码免费领取方式

扫码后台回复  停车场

相关文章：

WebSocket or SSE？即时通讯的应用策略【送源码】

最近在研究H5推送&#xff0c;发现除了我们常用的WebSocket以外&#xff0c;其实还有一种协议也能实现H5推送&#xff0c;那就是SSE协议。 而且&#xff0c;当前主流的大模型平台&#xff0c;比如ChatGPT、通义千问、文心一言&#xff0c;对话时采用的就是SSE。 什么是SSE协议…...

编程日记 2024/5/15 23:22:58

QT实现Home框架的两种方式

在触摸屏开发QT界面一般都是一个Home页面&#xff0c;然后button触发进入子页面显示&#xff0c;下面介绍这个home框架实现的两种方式&#xff1a; 1.方式一&#xff1a;用stackedWidget实现 &#xff08;1&#xff09;StackedWidget控件在Qt框架中是一个用于管理多个子窗口或…...

编程日记 2024/5/15 23:21:57

机器学习笔记03

1.线性回归&#xff08;linear regression&#xff09; 是利用回归方程&#xff08;函数&#xff09;对一个或者多个自变量&#xff08;特征值&#xff09;和因变量&#xff08;目标值&#xff09;之间关系进行建模的一种分析方法。 线性模型&#xff1a; 1.线性关系&#xff1…...

编程日记 2024/5/15 23:18:54

【全面介绍下Spring】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…...

编程日记 2024/5/15 23:16:52

MYSQL-存储引擎

存储引擎就是储数据、建立索引、更新/查询数据等技术的实现方式。存储引擎是基于表的,而不是基于库的,所以存储引擎也可被 称为表类型。 存储引擎特点 . InnoDB 介绍 InnoDB是一种兼顾高可靠性和高性能的通用存储引擎,在MySQL 5.5之后,InnoDB是默认的MySQL存储引擎。 >特…...

编程日记 2024/5/15 23:15:51

红蓝对抗 网络安全 网络安全红蓝对抗演练

什么是红蓝对抗 在军事领域&#xff0c;演习是专指军队进行大规模的实兵演习&#xff0c;演习中通常分为红军、蓝军&#xff0c;演习多以红军守、蓝军进攻为主。类似于军事领域的红蓝军对抗&#xff0c;网络安全中&#xff0c;红蓝军对抗则是一方扮演黑客&#xff08;蓝军&…...

编程日记 2024/5/15 23:14:50

springboot 序列化和反序列化

介绍 在Java中&#xff0c;序列化和反序列化是一种将对象转换为字节流或将字节流转换为对象的机制。通过序列化&#xff0c;可以将对象存储到文件中、传输到网络上&#xff0c;或者在分布式系统中进行对象的传递。本文将详细介绍Java序列化和反序列化的原理、使用方法和常见应用…...

编程日记 2024/5/15 23:12:47

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第一周) - 自然语言处理介绍和线性分类

自然语言处理介绍和线性分类 1. 自然语言处理介绍2. 线性二分类3. 情感分析和基础特征提取 3.1. 情感分析3.2. 特征提取3.3. 文本预处理 4. 学习的基础-梯度下降算法5. 感知机6. 逻辑回归7. 情感分析8. 感知机和逻辑回归 1. 自然语言处理介绍 自然语言处理的目标是什么 能够解…...

编程日记 2024/5/15 23:09:44

SQL注入漏洞常用绕过方法

SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行&#xff0c;导致参数中的特殊字符打破了原有的SQL 语句逻辑&#xff0c;黑客可以利用该漏洞执行任意 SQL 语句&#xff0c;如查询数据、下载数据、写入webshell 、执行系统命令以及…...

编程日记 2024/5/15 23:08:41

C语言输出符

C语言输出符 以下是C语言中一些常用的格式化输出的格式控制符及其对应的数据类型&#xff1a; 格式控制符描述对应数据类型%d十进制有符号整数int%ld长整型long int%lld长长整型long long int%u十进制无符号整数unsigned int%lu无符号长整型unsigned long int%llu无符号长长整…...

编程日记 2024/5/15 23:06:39

申请一个开发者域名

申请一个开发者域名 教程 fourm.js.org 因本地没安装 hexo 环境&#xff0c;模板下载的 html...

编程日记 2024/5/15 23:04:36

接搭建仿美团、代付系统源码搭建教程

最近很多粉丝催更、分享一下地球号&#xff1a;xiaobao0214520(WX) 现在大家都很流行搞网恋&#xff0c;我们搭建一个跟美团相似的系统 然后开发一个好友代付&#xff0c;我们在点单的时候转发链接让网恋对象付钱 若只是单点外卖的话&#xff0c;能榨出的油水还是太少。 所以…...

编程日记 2024/5/15 22:59:30

迭代的难题：敏捷团队每次都有未完成的工作，如何破解？

各位是否遇到过类似的情况&#xff1a;每次迭代结束后&#xff0c;团队都有未完成的任务&#xff0c;很少有完成迭代全部的工作&#xff0c;相反&#xff0c;总是将上期未完成的任务重新挪到本期计划会中&#xff0c;重新规划。敏捷的核心之一是“快速迭代&#xff0c;及时反馈…...

编程日记 2024/5/15 22:57:28

ChatGPT未来可能应用于iPhone？

苹果接即将与OpenAI达成协议 ChatGPT未来应用于iPhone 前言 就在5月11日&#xff0c;苹果公司正与OpenAI进行深入讨论&#xff0c;计划在其最新的iOS操作系统中整合OpenAI的先进技术。这一举措是苹果公司在为其产品线融入更先进的人工智能功能所做努力的一部分。 目前情况双方…...

编程日记 2024/5/15 22:56:27

Spring之bean的细节（创建方式、作用范围、生命周期）

在Spring框架中&#xff0c;Bean是一个非常重要的概念&#xff0c;它代表了应用程序中需要被管理的对象。关于Bean的细节&#xff0c;我们可以从创建方式、作用范围以及生命周期三个方面进行阐述。 创建方式 Spring支持以下三种方式创建Bean&#xff1a; 调用构造器创建Bean…...

编程日记 2024/5/15 22:54:25

探索STLport：C++标准模板库的开源实现

在C++编程的世界里，STL（标准模板库）是一个不可或缺的工具。它提供了许多用于数据结构、算法和其他重要功能的模板类和函数。然而，标准模板库的实现并非只有一种，而其中一个备受推崇的选择就是STLport。 官方下载： STLport: Welcome! STLport是什么？ STLport是一个开…...

编程日记 2024/5/15 22:53:24

计算机Java项目｜Springboot高校心理教育辅导设计与实现

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…...

编程日记 2024/5/15 22:52:22

数据结构简单介绍、算法简单介绍、算法复杂度、时间复杂度等的介绍

文章目录 前言一、什么是数据结构二、什么是算法三、算法复杂度1. 时间复杂度① 时间复杂度的定义② 大O的渐进表示法 总结 前言 数据结构简单介绍、算法简单介绍、算法复杂度、时间复杂度等的介绍 一、什么是数据结构 数据结构是计算机存储&#xff0c;组织数据结构的方式&…...

编程日记 2024/5/15 22:51:21

Google I/O 2024：有关AI的一切已公布｜TodayAI

2024年谷歌I/O大会圆满落幕&#xff0c;谷歌在会上发布了一系列更新&#xff0c;涵盖从最新的人工智能技术到Android系统的多项改进。此次大会特别关注于谷歌的Gemini人工智能模型&#xff0c;并详细介绍了这些模型如何被融入到Workspace、Chrome等多个应用程序中&#xff0c;展…...

编程日记 2024/5/15 22:50:20

【Shell脚本】Shell编程之数组

目录 一.数组 1.基本概念 2.定义数组的方法 2.1.方法一 2.2.方法二 2.3.方法三 2.4.方法四 2.5.查看数组长度 2.6.查看数组元素下标 3.数组分片 4.数组字符替换 4.1.临时替换 4.2.永久替换 5.数组删除 5.1.删除某个下标 5.2.删除整组 6.数组遍历和重新定义 7…...

编程日记 2024/5/15 22:49:18

Python 全栈系列246 任务调度对象WFlaskAPS

说明 之前已经完全跑通了任务调度&#xff0c;实现了S2S的流转Python 全栈系列243 S2S flask_celery。由于request请求用起来比较别扭&#xff0c;所以创建一个对象来进行便捷操作。 内容 1 功能 WFlaskAPS包含管理定时任务的必要功能 from datetime import datetime from…...

编程日记 2024/5/15 22:48:17

关于Windows中的NTUSER.DAT文件的知识，看这篇文章就差不多了

每个用户配置文件中都隐藏着一个名为NTUSER.DAT的文件。此文件包含每个用户的设置和首选项，因此你不应该删除它，也可能不应该编辑它。Windows会自动为你加载、更改和保存该文件。 NTUSER.DAT包含你的用户配置文件设置 每次更改Windows和已安装程序的外观和行为时，无论是桌…...

编程日记 2024/5/15 22:47:14

【Linux】动态库与静态库的底层比较

送给大家一句话&#xff1a; 人生最遗憾的&#xff0c;莫过于&#xff0c;轻易地放弃了不该放弃的&#xff0c;固执地坚持了不该坚持的。 – 柏拉图 (x(x_(x_x(O_o)x_x)_x)x) (x(x_(x_x(O_o)x_x)_x)x) (x(x_(x_x(O_o)x_x)_x)x) 底层比较 1 前言2 编译使用比较2 如何加载Than…...

编程日记 2024/5/15 22:46:13

私活更好用：SpringBoot开源项目！！【送源码】

今天分享一款非常香的SpringBoot大屏开源项目&#xff0c;非常适合接私活用。 这是一款基于SpringBoot代码生成器的快速开发平台&#xff01;采用前后端分离架构&#xff1a;SpringBoot&#xff0c;Mybatis&#xff0c;Shiro&#xff0c;JWT&#xff0c;Vue&Ant Design。强…...

编程日记 2024/5/15 22:44:10

SprintBoot案例-增删改查

黑马程序员JavaWeb开发教程 文章目录 一、准备工作1. 准备数据库表1.1 新建数据库mytlias1.2 新建部门表dept1.3 新建员工表emp 2. 准备一个Springboot工程2.1 新建一个项目 3. 配置文件application.properties中引入mybatis的配置信息&#xff0c;准备对应的实体类3.1 引入myb…...

编程日记 2024/5/15 22:42:08

【机器学习】：基于决策树与随机森林对数据分类

机器学习实验报告&#xff1a;决策树与随机森林数据分类 实验背景与目的 在机器学习领域&#xff0c;决策树和随机森林是两种常用的分类算法。决策树以其直观的树形结构和易于理解的特点被广泛应用于分类问题。随机森林则是一种集成学习算法&#xff0c;通过构建多个决策树并…...

编程日记 2024/5/15 22:41:07

.NET 4.8和.NET 8.0的区别和联系、以及查看本地计算机的.NET版本

文章目录 .NET 4.8和.NET 8.0的区别查看本地计算机的.NET版本 .NET 4.8和.NET 8.0的区别 .NET 8.0 和 .NET 4.8 之间的区别主要体现在它们的发展背景、目标平台、架构设计和功能特性上。下面是它们之间的一些主要区别&#xff1a; 发展背景&#xff1a; .NET 4.8 是.NET Fram…...

编程日记 2024/5/15 22:40:06

23.HashMap的put方法流程

一、put方法的流程图 二、put方法的执行步骤 首先&#xff0c;根据key值计算哈希值。然后判断table数组是否为空或者数组长度是否为0&#xff0c;是的话则要扩容&#xff0c;resize&#xff08;&#xff09;。接着&#xff0c;根据哈希值计算数组下标。如果这个下标位置为空&a…...

编程日记 2024/5/15 22:39:04

元类结合__new__

__new__:用来生成骨架 __init__:骨架添加血肉 【一】类中的__new__ class MyClass(object):def __init__(self,name,age):print(f"给当前MyClass类的对象初始化属性的时候会触发__init__")self.name nameself.age age ​def __call__(self,*args,**kwargs):pri…...

编程日记 2024/5/15 22:38:03

(C语言)队列实现与用队列实现栈

目录 1.队列 1.1队列的概念及结构 1.2 队列的实际应用联想 1.3队列的实现 2. 队列应用——队列实现栈 主要思路 1.队列 1.1队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进…...

编程日记 2024/5/15 22:37:02