WebSocket or SSE？即时通讯的应用策略【送源码】
最近在研究H5推送，发现除了我们常用的WebSocket以外，其实还有一种协议也能实现H5推送，那就是SSE协议。
而且，当前主流的大模型平台，比如ChatGPT、通义千问、文心一言，对话时采用的就是SSE。
什么是SSE协议？
Server-Sent Events (SSE) 是一种基于HTTP协议的服务器到客户端的单向数据通信技术，允许服务器向浏览器实时推送更新，而不需要客户端通过轮询等方式反复请求数据。
SSE协议主要用于实现实时更新的Web应用，比如股票报价、新闻更新、社交网络的新消息通知等场景。
那么，同为H5推送的主流协议，SSE和WebSocket有什么区别？
SSE VS WebSocket
我们从以下几个方面来进行对比：
| 维度 | SSE | WebSocket |
|---|---|---|
| 协议原理 | 基于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推送，发现除了我们常用的WebSocket以外，其实还有一种协议也能实现H5推送，那就是SSE协议。 而且，当前主流的大模型平台，比如ChatGPT、通义千问、文心一言，对话时采用的就是SSE。 什么是SSE协议…...
QT实现Home框架的两种方式
在触摸屏开发QT界面一般都是一个Home页面，然后button触发进入子页面显示，下面介绍这个home框架实现的两种方式： 1.方式一：用stackedWidget实现 （1）StackedWidget控件在Qt框架中是一个用于管理多个子窗口或…...
机器学习笔记03
1.线性回归（linear regression） 是利用回归方程（函数）对一个或者多个自变量（特征值）和因变量（目标值）之间关系进行建模的一种分析方法。 线性模型： 1.线性关系࿱…...
【全面介绍下Spring】
🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者，CSDN实力新星，CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共…...
MYSQL-存储引擎
存储引擎就是储数据、建立索引、更新/查询数据等技术的实现方式。存储引擎是基于表的,而不是基于库的,所以存储引擎也可被 称为表类型。 存储引擎特点 . InnoDB 介绍 InnoDB是一种兼顾高可靠性和高性能的通用存储引擎,在MySQL 5.5之后,InnoDB是默认的MySQL存储引擎。 >特…...
红蓝对抗 网络安全 网络安全红蓝对抗演练
什么是红蓝对抗 在军事领域，演习是专指军队进行大规模的实兵演习，演习中通常分为红军、蓝军，演习多以红军守、蓝军进攻为主。类似于军事领域的红蓝军对抗，网络安全中，红蓝军对抗则是一方扮演黑客（蓝军&…...
springboot 序列化和反序列化
介绍 在Java中，序列化和反序列化是一种将对象转换为字节流或将字节流转换为对象的机制。通过序列化，可以将对象存储到文件中、传输到网络上，或者在分布式系统中进行对象的传递。本文将详细介绍Java序列化和反序列化的原理、使用方法和常见应用…...
德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第一周) - 自然语言处理介绍和线性分类
自然语言处理介绍和线性分类 1. 自然语言处理介绍2. 线性二分类3. 情感分析和基础特征提取 3.1. 情感分析3.2. 特征提取3.3. 文本预处理 4. 学习的基础-梯度下降算法5. 感知机6. 逻辑回归7. 情感分析8. 感知机和逻辑回归 1. 自然语言处理介绍 自然语言处理的目标是什么 能够解…...
SQL注入漏洞常用绕过方法
SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行，导致参数中的特殊字符打破了原有的SQL 语句逻辑，黑客可以利用该漏洞执行任意 SQL 语句，如查询数据、下载数据、写入webshell 、执行系统命令以及…...
C语言输出符
C语言输出符 以下是C语言中一些常用的格式化输出的格式控制符及其对应的数据类型： 格式控制符描述对应数据类型%d十进制有符号整数int%ld长整型long int%lld长长整型long long int%u十进制无符号整数unsigned int%lu无符号长整型unsigned long int%llu无符号长长整…...
申请一个开发者域名
申请一个开发者域名 教程 fourm.js.org 因本地没安装 hexo 环境，模板下载的 html...
接搭建仿美团、代付系统源码搭建教程
最近很多粉丝催更、分享一下地球号：xiaobao0214520(WX) 现在大家都很流行搞网恋，我们搭建一个跟美团相似的系统 然后开发一个好友代付，我们在点单的时候转发链接让网恋对象付钱 若只是单点外卖的话，能榨出的油水还是太少。 所以…...
迭代的难题：敏捷团队每次都有未完成的工作，如何破解？
各位是否遇到过类似的情况：每次迭代结束后，团队都有未完成的任务，很少有完成迭代全部的工作，相反，总是将上期未完成的任务重新挪到本期计划会中，重新规划。敏捷的核心之一是“快速迭代，及时反馈…...
ChatGPT未来可能应用于iPhone？
苹果接即将与OpenAI达成协议 ChatGPT未来应用于iPhone 前言 就在5月11日，苹果公司正与OpenAI进行深入讨论，计划在其最新的iOS操作系统中整合OpenAI的先进技术。这一举措是苹果公司在为其产品线融入更先进的人工智能功能所做努力的一部分。 目前情况双方…...
Spring之bean的细节（创建方式、作用范围、生命周期）
在Spring框架中，Bean是一个非常重要的概念，它代表了应用程序中需要被管理的对象。关于Bean的细节，我们可以从创建方式、作用范围以及生命周期三个方面进行阐述。 创建方式 Spring支持以下三种方式创建Bean： 调用构造器创建Bean…...
探索STLport：C++标准模板库的开源实现
在C++编程的世界里，STL（标准模板库）是一个不可或缺的工具。它提供了许多用于数据结构、算法和其他重要功能的模板类和函数。然而，标准模板库的实现并非只有一种，而其中一个备受推崇的选择就是STLport。 官方下载： STLport: Welcome! STLport是什么？ STLport是一个开…...
计算机Java项目｜Springboot高校心理教育辅导设计与实现
作者主页：编程指南针 作者简介：Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简…...
数据结构简单介绍、算法简单介绍、算法复杂度、时间复杂度等的介绍
文章目录 前言一、什么是数据结构二、什么是算法三、算法复杂度1. 时间复杂度① 时间复杂度的定义② 大O的渐进表示法 总结 前言 数据结构简单介绍、算法简单介绍、算法复杂度、时间复杂度等的介绍 一、什么是数据结构 数据结构是计算机存储，组织数据结构的方式&…...
Google I/O 2024：有关AI的一切已公布｜TodayAI
2024年谷歌I/O大会圆满落幕，谷歌在会上发布了一系列更新，涵盖从最新的人工智能技术到Android系统的多项改进。此次大会特别关注于谷歌的Gemini人工智能模型，并详细介绍了这些模型如何被融入到Workspace、Chrome等多个应用程序中，展…...
【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…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...
倒装芯片凸点成型工艺
UBM（Under Bump Metallization）与Bump（焊球）形成工艺流程。我们可以将整张流程图分为三大阶段来理解： 🔧 一、UBM（Under Bump Metallization）工艺流程（黄色区域ÿ…...