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…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...