沈阳专业做网站方案,重庆住建部官网,免费搭建网站 域名,wordpress+资源分享最近在研究H5推送#xff0c;发现除了我们常用的WebSocket以外#xff0c;其实还有一种协议也能实现H5推送#xff0c;那就是SSE协议。
而且#xff0c;当前主流的大模型平台#xff0c;比如ChatGPT、通义千问、文心一言#xff0c;对话时采用的就是SSE。
什么是SSE协议… 最近在研究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协议。 dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-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测试类*/Slf4jRestControllerRequestMapping(/sse)public class SseController {private static final MapString, 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.EntryString, 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 htmlhtml langenheadmeta charsetUTF-8title实时股票价格监控/title/headbodyh1实时股票价格/h1div idstock-price/divscriptconst source new EventSource(/sse/createSseEmitter?clientId123456);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- 给大家分享一套基于SpringbootVue的停车场管理系统源码在实际项目中可以直接复用。(免费提供文末自取)
一、系统运行图
1、登陆页面 2、车位管理 3、车辆进出管理 二、系统搭建视频教程 源码免费领取方式
扫码后台回复 停车场
