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

news2024/11/24 1:29:08

 最近在研究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、车辆进出管理

二、系统搭建视频教程

源码免费领取方式

扫码后台回复  停车场

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1680280.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式系统的一致性与共识算法(三)

顺序一致性(Sequential Consistency) ZooKeeper 一种说法是ZooKeeper是最终一致性&#xff0c;因为由于多副本、以及保证大多数成功的ZAB协议&#xff0c;当一个客户端进程写入一个新值&#xff0c;另外一个客户端进程不能保证马上就能读到这个值&#xff0c;但是能保证最终能…

VB6连接各种类型的数据库

VB6连接各种类型的数据库 一、连接VFP数据库 Dim CNN As New ADODB.Connection Dim rssys As New ADODB.Recordset If CNN.state 1 Then CNN.Close CNN.ConnectionString "Driver{Microsoft Visual FoxPro Driver};SourceType.DBc;SourceDb" Trim(Text1) CNN…

掌握这些神器,让你的编程之路更加“丝滑”

前言&#xff1a; 在软件开发的旅程中&#xff0c;程序员的实用神器确实如同指南针&#xff0c;帮助他们在复杂的代码海洋中导航。以下是从三个方向——自动化测试工具、持续集成/持续部署&#xff08;CI/CD&#xff09;以及代码审查与质量分析——来探讨这些实用神器的应用和影…

Google Ads谷歌广告账户被封停怎么办?

跨境出海业务少不了需要做Google Ads推广业务&#xff1b;其中让投手们闻风丧胆的消息就是帐户被暂停。当 Google 检测到任何违反其政策且可能损害用户在线体验的行为时&#xff0c;就会发生这种情况。那么如何在做广告推广的同时&#xff0c;保证账号不被封禁呢&#xff1f;看…

如何向全国各大新闻网站投稿?

在信息爆炸的时代,新闻媒体的投稿工作对于单位的信息宣传员来说,既是一项重要的职责,也是一项充满挑战的任务。作为一名信息宣传员,我负责着单位的对外信息宣传投稿工作,每个月都需要在各大媒体上发表文章,以展示单位的成果和风采。 然而,刚开始的投稿之路并不顺畅。我习惯性地…

scp服务器之间相互传输文件命令

一、格式 scp -r 文件夹路径或者文件路径(绝对路径) 用户名ip地址:目标位置路径选项含义– h显示帮助文档-p尝试保留副本的修改时间和原文件的模式-x在主机之间传输加密所有信息-r如果原文件是目录&#xff0c;复制该目录中每个字树-D<端口>指定连接到远程主机上的端口-…

54.指针

目录 一.什么是指针&#xff1f; 二&#xff0e;定义一个指针变量 三&#xff0e;指针变量类型 四&#xff0e;取地址运算符& 五.取值运算符* 六.视频教程 一.什么是指针&#xff1f; 口语中的指针一般指指针变量&#xff0c;指针变量存放的是一个地址。普通变量存放…

大模型算法(一):从Transformer到ViT再到LLaMA

单任务/单领域模型 深度学习最早的研究集中在针对单个领域或者单个任务设计相应的模型。 对于CV计算机视觉领域&#xff0c;最常用的模型是CNN卷积模型。其中针对计算机视觉中的不同具体任务例如分类任务&#xff0c;目标检测任务&#xff0c;图像分割任务&#xff0c;以CNN作…

双向RNN和双向LSTM

双向RNN和双向LSTM 一、双向循环神经网络BiRNN 1、为什么要用BiRNN 双向RNN&#xff0c;即可以从过去的时间点获取记忆&#xff0c;又可以从未来的时间点获取信息,也就是说具有以下两个特点&#xff1a; 捕捉前后文信息&#xff1a;传统的单向 RNN 只能利用先前的上下文信息…

电路板维修【四】

【开关电源输出电压偏低不稳&#xff0c;用示波器立马锁定故障范围】&#xff1a;https://www.bilibili.com/video/BV1pf421D73K?vd_source3cc3c07b09206097d0d8b0aefdf07958 可以用示波器查看MOS的输出波形来查看其是否损坏&#xff1a; 电源芯片的供电电压来回跳变&#xf…

一位不合格的面试官在这两周让三位同学破防了

一位不合格的面试官在这两周让三位同学破防了 最近部门招聘 Java 技术同学&#xff1b; 技术需要两面&#xff0c;我也参与招聘过程并作为第一面的面试官&#xff0c;这两周平均每天一个。但是这两周我却让好几位同学破防了&#xff0c;内心其实也是五味杂陈的&#xff0c;做一…

Linux基础之僵尸进程与孤儿进程

目录 一、僵尸进程 1.1 什么是僵尸进程 1.2 为什么要有僵尸状态 1.3 观察我们的僵尸状态 1.4 关于僵尸进程的小Tip 二、孤儿进程 2.1 什么是孤儿进程 一、僵尸进程 1.1 什么是僵尸进程 在上一篇文章中&#xff0c;我们有提到过进程的死亡状态的概念&#xff0c;而我们的…

计算机寄存器是如何实现的

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

labelimg删除用不到的标签(yolo格式)以及 下载使用

问题&#xff1a;当我们标注完成新的类别后后直接删除classes.txt中不需要的类别之后再次打开labelimg会闪退&#xff0c;如何删除不需要的标签并且能够正确运行呢&#xff1f;&#xff08;yolo格式&#xff09; 原因&#xff1a;当我们打开labelimg进行标注的时候&#xff0c…

Golang RPC实现-day02

导航 Golang RPC实现一、客户端异步并发多个请求1、 客户端结构体2、 一个客户端&#xff0c;异步发送多个请求&#xff0c;使用call结构体代表客户端的每次请求3、客户端并发多个请求4、客户端接收请求 Golang RPC实现 day01 我们实现了简单的服务端和客户端。我们简单总结一…

26 分钟惊讶世界,GPT-4o 引领未来人机交互

前言 原文链接&#xff1a;OpenAI最新模型——GPT-4o&#xff0c;实时语音视频交互&#xff0c;未来人机交互近在眼前 - Kaiho小站 北京时间 5 月 14 日凌晨&#xff0c;OpenAI 发布新一代模型——GPT-4o&#xff0c;仅在 ChatGPT 面世 17 个月后&#xff0c;OpenAI 再次通过…

985大学电子信息专硕,考C语言+数据结构!中央民族大学25计算机考研考情分析!

中央民族大学&#xff08;Minzu University of China&#xff09;坐落于北京市学府林立的海淀区&#xff0c;南邻国家图书馆&#xff0c;北依中关村科技园&#xff0c;校园环境典雅&#xff0c;古朴幽美&#xff0c;人文氛围浓郁&#xff0c;具有鲜明的民族特色。由北京市、国家…

ubuntu下不生成core dumped

1、先用ulimit -c&#xff0c;如果看到0&#xff0c;说明没有开core dump。 所以我们输入ulimit -c unlimited&#xff0c;打开core dump。 再次用ulimit -c&#xff0c;看到unlimited了&#xff0c;说明core dump打开了。 注意这句ulimit -c unlimited只对当前会话有效。要永…

通俗易懂讲乐观锁与悲观锁

浅谈乐观锁与悲观锁 乐观锁和悲观锁是Java并发编程中的两个概念。使用乐观锁和悲观锁可以解决并发编程中数据不一致性、死锁、性能差等问题&#xff0c;乐观锁与悲观锁的实行方式不同&#xff0c;所以其特性也不近相同&#xff0c;下文将详细介绍两者的特性与适用场景。 《熊…

STM32-09-IWDG

文章目录 STM32 IWDG1. IWDG2. IWDG框图3. IWDG寄存器4. IWDG寄存器操作步骤5. IWDG溢出时间计算6. IWDG配置步骤7. 代码实现 STM32 IWDG 1. IWDG IWDG Independent watchdog&#xff0c;即独立看门狗&#xff0c;本质上是一个定时器&#xff0c;这个定时器有一个输出端&#…