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

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

news 2026/3/31 19:51:57

 最近在研究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

PHP-JWT：PHP 中 JSON Web Tokens 的完整实现指南

PHP-JWT&#xff1a;PHP 中 JSON Web Tokens 的完整实现指南 【免费下载链接】php-jwt 项目地址: https://gitcode.com/gh_mirrors/ph/php-jwt Firebase PHP-JWT 是一个遵循 RFC 7519 标准的 PHP JSON Web Tokens 实现库&#xff0c;提供安全、高效的 JWT 编码和解码功…...

编程新知 2026/3/31 19:49:29

从实验室到生活场景：近红外脑成像(fNIRS)如何重塑认知研究边界

1. 从实验室到客厅&#xff1a;fNIRS如何打破认知研究的围墙 十年前我第一次接触近红外脑成像设备时&#xff0c;它还是个需要固定在三脚架上的"庞然大物"&#xff0c;被试必须像雕塑般保持静止。如今看着学生戴着LUMO设备在操场自由活动时采集数据&#xff0c;这种技…...

编程新知 2026/3/31 18:40:11

Linux 核心操作合集（网络配置、XShell远程连接、vim文本编辑与操作、权限管理 实操手册）

一、网络连接管理&#xff08;nmli&#xff09;&#xff08;一&#xff09;nmcli命令行配置IPtylmyhost:~$ nmcli connection modify ens160 ipv4.method manual ipv4.addresses 192.168.24.24/24 tylmyhost:~$ nmcli connection modify ens160 ipv4.gateway 192.168.24.2 tyl…...

编程新知 2026/3/31 17:00:37

MelonLoader终极指南：Unity游戏模组加载器的完整安装与使用教程

MelonLoader终极指南&#xff1a;Unity游戏模组加载器的完整安装与使用教程 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 还在…...

编程新知 2026/3/31 16:58:36

ViT图像分类-中文-日常物品完整指南：4090D单卡环境配置与中文类别映射说明

ViT图像分类-中文-日常物品完整指南&#xff1a;4090D单卡环境配置与中文类别映射说明 想试试用AI模型来识别你手机里的照片吗&#xff1f;比如&#xff0c;拍一张桌上的水杯、键盘或者零食&#xff0c;让模型告诉你它是什么。今天要介绍的这个工具&#xff0c;就能帮你轻松实…...

编程新知 2026/3/31 15:55:35

Power BI 网页数据抓取实战：以新浪外汇为例，教你5分钟搞定动态表格导入与清洗

Power BI 网页数据抓取实战&#xff1a;新浪外汇动态表格导入与清洗全流程解析 外汇市场瞬息万变&#xff0c;作为业务分析师&#xff0c;每天手动记录汇率数据既耗时又容易出错。今天我们就以新浪财经外汇数据为例&#xff0c;手把手教你用Power BI实现5分钟自动化抓取清洗的完…...

编程新知 2026/3/31 15:20:40

C语言结构体定义与自增运算符a++详解

有一个结构体名是stu&#xff0c;它当中包含着5个成员&#xff0c;其中一个成员是name&#xff0c;还有一个成员是num&#xff0c;另外一个成员是age&#xff0c;再有一个成员是group&#xff0c;最后一个成员是score。 除了不能初始化这一点外&#xff0c;结构体成员的定义方式…...

编程新知 2026/3/31 14:32:04

CoPaw个人助理深度体验：多通道对话+定时执行，解放双手的实用工具

CoPaw个人助理深度体验&#xff1a;多通道对话定时执行&#xff0c;解放双手的实用工具 1. CoPaw简介与核心功能 CoPaw是一款基于Qwen3-4B-Instruct-2507模型的个人助理型产品&#xff0c;由AgentScope团队开发。它最大的特点是能够部署在用户自己的环境中&#xff0c;实现数…...

编程新知 2026/3/31 14:09:19

Ostrakon-VL-8B打通企业数据流：与内部CRM系统集成实现智能客户分析

Ostrakon-VL-8B打通企业数据流&#xff1a;与内部CRM系统集成实现智能客户分析 你有没有遇到过这样的情况&#xff1f;销售团队抱怨客户画像太模糊&#xff0c;营销活动像在“盲人摸象”&#xff0c;投入了大量资源&#xff0c;转化率却总是不尽如人意。传统的客户关系管理&am…...

编程新知 2026/3/31 13:57:12

Wan2.2-I2V-A14B镜像免配置：SSH直连后cd /workspace即可执行全部命令

Wan2.2-I2V-A14B镜像免配置&#xff1a;SSH直连后cd /workspace即可执行全部命令 1. 镜像概述与核心优势 Wan2.2-I2V-A14B私有部署镜像是一款专为文生视频模型定制的开箱即用解决方案。这个镜像最大的特点就是"免配置"——通过SSH连接后&#xff0c;只需进入/works…...

编程新知 2026/3/31 13:49:10