前端项目中的Server-sent Events(SSE)项目实践及其与websocket的区别

news2024/11/15 1:38:01

前端项目中的Server-sent Events(SSE)项目实践

前言

在前端开发中,实时数据更新是提升用户体验的重要因素之一。Server-SentEvents(SSE)是一种高效的技术,允许服务器通过单向连接将实时数据推送到客户端。下面将从SSE的基本改变,使用场景展开了解,并提供一个实际案例来更好的理解如何在前端项目中应用SSE。websocket实践总结走这里>>>>

SSE的主要特点

  1. 单项数据流:数据从服务器推送到客户端。
  2. 自动重连:在链接丢失时,浏览器会自动尝试重新链接。
  3. 简单易用:基于HTTP协议,不需要额外的库或协议。

SSE的使用场景

sse适用于需要从服务器定期推送数据的场景,例如:

  1. 实时通知系统。
  2. 实时更新的动态数据,如新闻,股票行情。
  3. 数据流展示,如仪表,数据统计大屏报表。

SSEvue2中实际项目中代码解释

created():在组件实例创建之后立即调用setupSSE()方法来初始化SSE链接。
beforeDestroy()这是在组件销毁之前调用closeSSE()方法来关闭SSE链接,确保在组件被销毁时清理资源。

created() {
    this.setupSSE();
  },
  beforeDestroy() {
    this.closeSSE();
  }

setupEES():用于初始化SSE链接。
“const url = ....”:设定SSE连接的URL
"this.eventSource = new EventSource(url);":创建一个新的”EventSource“实例,连接到指定的URL"this.eventSource.addEventListener("message", this.handleMessage)":监听服务器推送的message时间,当服务器推送数据时,会调用handleMessage方法来处理这些数据。
this.eventSource.addEventListener("error",this.handleError); :监听error事件,当发生错误时,会调用handleError方法来处理错误。

// 开始SSE
    setupSSE() {
      const url = `http://192.168.60.37:32483/data-analysis-center/CompanyScreen/subscribe?id=1`;
      // SSE连接的URL,这里假设使用相对路径,可以根据实际情况修改
      this.eventSource = new EventSource(url);

      // 监听消息事件
      this.eventSource.addEventListener("message", this.handleMessage);

      // 监听错误事件
      this.eventSource.addEventListener("error", this.handleError);
    }

handleMessage(event): 处理 message 事件的方法。
console.log("Message received:", event.data);: 输出接收到的消息数据。你可以在这里根据需要对数据进行处理或更新组件的状态。

handleMessage(event) {    
// 在这里处理收到的消息
console.log("Message received:", event.data);
}

handleError(error): 处理 error 事件的方法。
console.error("SSE Error:", error);: 输出错误信息,以便调试。
this.eventSource.close();: 关闭 SSE 连接。在发生错误时,通常需要关闭连接以防止进一步的错误。

handleError(error) {
    console.log(error);
    // 处理连接错误
    console.error("SSE Error:", error);
    this.eventSource.close(); // 关闭SSE连接
}

closeSSE(): 这个方法用于关闭 SSE 连接。
if (this.eventSource) { this.eventSource.close(); }: 在关闭连接之前,检查 eventSource 是否已定义,并调用 close() 方法来关闭连接。

closeSSE() {
	// 关闭SSE连接
	if (this.eventSource) {
		this.eventSource.close();
	}
},

总体代码:

<template>
  <div id="data-view">
    </div>
</template>
<script>
export default {
  components: {},
  created() {
    this.setupSSE();
  },
  beforeDestroy() {
    this.closeSSE();
  },
  mounted() {
  },
  data() {
    return {};
  },
  methods: {
    // 开始SSE
    setupSSE() {
      const url = `http://192.168.60.37:32483/data-analysis-center/CompanyScreen/subscribe?id=1`;
      // SSE连接的URL,这里假设使用相对路径,可以根据实际情况修改
      this.eventSource = new EventSource(url);

      // 监听消息事件
      this.eventSource.addEventListener("message", this.handleMessage);

      // 监听错误事件
      this.eventSource.addEventListener("error", this.handleError);
    },
    handleMessage(event) {
      console.log("event", JSON.parse(event.data).data);

      // 处理收到的消息
      this.messages.push(event.data);
    },
    // 订阅报错关闭链接
    handleError(error) {
      console.log(error);
      // 处理连接错误
      console.error("SSE Error:", error);
      this.eventSource.close(); // 关闭SSE连接
    },
    closeSSE() {
      // 关闭SSE连接
      if (this.eventSource) {
        this.eventSource.close();
      }
    }
  },
};
</script>

项目中实现的效果:

在这里插入图片描述
在这里插入图片描述

SSE项目实践总结

SSE总结

上面的大屏项目中使用 SSE

在组件创建时,初始化 SSE 连接。

  • 在组件销毁时,清理 SSE 连接以释放资源。
  • 使用事件监听器处理来自服务器的消息和错误。

通过这种方式,你可以在 Vue 项目中实现实时数据更新,同时确保在组件生命周期结束时正确地关闭SSE 连接。

SSE 与 WebSocket 的详细对比

数据流方向:

  • SSE:单向(服务器到客户端)。适用于从服务器推送数据到客户端的场景,如实时通知、新闻更新。
  • WebSocket:双向(客户端和服务器)。适用于需要双向交互的场景,如在线聊天、实时游戏。

协议和开销:

  • SSE:基于HTTP协议,开销较小,易于实现和维护。适合低延迟的数据流。
  • WebSocket:在初次连接时有较高的开销,但在长期连接下具有更高的数据传输效率。适合需要高频率消息交换的应用。

浏览器支持:

  • SSE:支持现代浏览器,但某些老旧浏览器(如 Internet Explorer)不支持。
  • WebSocket:广泛支持,包括所有主流浏览器。

安全性:

  • SSE:通过HTTPS提供数据安全性,但只支持单向数据流。
  • WebSocket:支持加密的 wss 协议,确保双向通信的安全性。

实现复杂度:

  • SSE:实现简单,基于 HTTP,不需要额外的库。
  • WebSocket:需要处理更多的协议细节,初次连接和维护较为复杂。

什么时候使用 SSE,什么时候使用 WebSocket

选择 SSE

  • 当你的应用只需要从服务器推送数据到客户端时,例如新闻更新、股票行情、实时通知等。
  • 当你需要实现简单的实时数据传输,且不需要复杂的双向交互。
  • 当兼容性问题不是主要考虑因素时。

选择 WebSocket

  • 当你的应用需要双向通信,例如在线聊天、实时游戏、协作编辑等。
  • 当你需要高频率的数据交换,并且需要在客户端和服务器之间进行实时交互。
  • 当你的应用需要长时间保持连接,并且能够处理连接建立的开销时。

sse VS websocket总结

SSEWebSocket是实现实时通信的两种有效技术,各有优缺点。了解它们的工作原理和适用场景,可以帮助你选择最适合你项目的解决方案。SSE 适合简单的单向数据流需求,而 WebSocket 适合复杂的双向交互应用。在项目中做出明智的选择,能够有效提升用户体验,并确保系统的高效性和可维护性。

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

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

相关文章

TCP问题总结

TCP三次握手与四次挥手 1.TCP 头格式有哪些&#xff1f; 标注颜⾊的表示与本⽂关联⽐较⼤的字段&#xff0c;其他字段不做详细阐述。 序列号&#xff1a;在建⽴连接时由计算机⽣成的随机数作为其初始值&#xff0c;通过 SYN 包传给接收端主机&#xff0c;每发送⼀次数 据&am…

MapReduce入门教程

这可不是目录 入门定义与说明数据分析Map和Reduce阶段的任务<Kn,Vn>分析MapReduce的数据类型其他说明(持续更新) 开发案例(持续更新)自定义的wordcountcsv文件操作序列化操作 入门 定义与说明 数据分析 以下未数据分析示意图 Map和Reduce阶段的任务 Map阶段的任务&a…

安科瑞Acrel-2000ES储能能量管理系统在新型电力系统下分布式储能的研究

摘要&#xff1a;传统电力系统的结构和运行模式在以新能源为主体的新型电力系统中发生了巨大的变化&#xff0c;分布式储能作为电力系统中重要的能量调节器&#xff0c;也迎来了新的发展机遇。立足于储能技术发展现状&#xff0c;分析了分布式储能技术特点及在清洁可再生能源方…

ALLEGRO直接转PADS方法

1.ALLEGRO转PADS之前系统上添加用户变量 打开环境变量窗口&#xff0c;以WIN10为例 添加变量和值 变量名&#xff1a;AEX_BIN_ROOT值&#xff1a; PADS软件中translators软件的bin目录路径比如我的&#xff1a;AEX_BIN_ROOTD:\MentorGraphics\PADSVX.2.3\SDD_HOME\translator…

用python的manim库实现表格的绘制和制作【table 上】

表格的定义&#xff1a;按行和列排列的信息&#xff08;如数字和说明&#xff09;。 这是人们参加的运动的表格&#xff1a; 接下来绘制一些表格&#xff1a; 1. 创建一个包含小数数字的表格{DecimalTable} DecimalTable 是 Manim 中用于创建一个包含小数数字的表格的类。这个…

SD-WAN在海外网络加速中的优势

随着全球化的加剧&#xff0c;企业在海外业务拓展中面临着网络延迟、数据安全和成本等一系列挑战。针对这些问题&#xff0c;SD-WAN(软件定义广域网&#xff09;成为了企业网络架构的良好选择。本文将详细介绍SD-WAN在海外加速中的应用和优势。 1.SD-WAN是什么? SD-WAN是一种网…

软件开发者申请代码签名证书流程

软件目前已经成为人们生活和工作不可或缺的一部分&#xff0c;随着互联网的普及和软件分发渠道的多样化&#xff0c;软件的安全性和可信度变得越来越重要。 为了确保软件的完整性、安全性和来源可信性&#xff0c;代码签名证书应运而生。 在软件完成了开发之后&#xff0c;开…

硬件面试经典 100 题(31~40 题)

31、多级放大电路的级间耦合方式有哪几种&#xff1f;哪种耦合方式的电路零点偏移最严重&#xff1f;哪种耦合方式可以实现阻抗变换&#xff1f; 有三种耦合方式&#xff1a;直接耦合、阻容耦合、变压器耦合。直接耦合的电路零点漂移最严重&#xff0c;变压器耦合的电路可以实现…

软件测试经典面试题(答案解析+文档)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行&#xff0c;可以实现跨平台&#xff0c;客户端零维护&#xff0c;维护成本低&#xff0c;但是个性化…

EXCEL数据清洗步骤

1.合并的单元格: 用Ctrl+g查找空值,拆分单元格,ctrl enter填充 2.空值+空行: 辅助列+counta,筛选出空值行 3.重复值: 条件格式——突出显示单元格规则——重复值 数据——数据工具——删除重复值 4.脏数据 图片,批注,空格,条件格式 5.数据提取 ctrl e智能填充…

Web自动化测试:UI自动化框架结构以及思路!

在学会使用unittest后&#xff0c;实际上UI自动化的基础骨架已经搭建起来了&#xff0c;剩下的就是利于这套框架&#xff0c;增添一些我们需要的功能&#xff0c;目前看来&#xff0c;我们已经可以使用此框架来批量运行用例&#xff0c;欠缺的是整体的思路以及一些其他功能细节…

RSA算法解析

目录 引言 网络通信的明文传输风险 HTTP的不安全性及其风险点 ​编辑HTTPS的引入 为什么需要HTTPS HTTPS与HTTP的主要区别 TLS协议概述 TLS的作用和重要性 TLS在网络层的位置 TLS握手过程 握手过程的目的和步骤 TLS握手的各个阶段 RSA算法原理 RSA算法的基本概念 …

八股文学习总结

八股文学习总结 文章目录 八股文学习总结一、总体概况二、Java基础三、集合四、JUC五、JVM六、MYSQL七、Redis八、MQ九、计网十、OS十一、附上我记的笔记 一、总体概况 八股文也看了好多天了&#xff0c;我对八股文基本上考察哪些点也都有了印象&#xff0c;主要的分为Java基础…

uni-app 开发App时调用uni-push 实现在线系统消息推送通知 保姆教程

一、引言 在开发App时避免不了需要推送系统通知&#xff0c;以提高用户的使用体验。在自己的一个工具型的小app上全流程接入了uni-push2.0的推送能力&#xff0c;做个记录&#xff0c;以防后期需要用到。在阅读本教程前最好先看看官方文档&#xff0c;结合官方文档使用&#xf…

Android自定义view

前言 在Android开发时&#xff0c;我们经常会碰见在很多地方会重复使用相同的布局&#xff0c;或者是需要显示一些非基础组件&#xff0c;这个时候我们第一反应就是去自定义布局。将很多常用的UI业务需求&#xff0c;封装成一个View来操作&#xff0c;可以有效加快我们编码和开…

笔中藏音,非凡录制 — WT2003H录音芯片方案,让每一支笔都成为你的高清录音神器

开发背景&#xff1a; 在数字化时代&#xff0c;录音笔作为记录与传播声音的重要工具&#xff0c;其性能与功能的提升直接关系到用户的使用体验。随着科技的飞速发展&#xff0c;市场对于录音笔的需求不再仅仅局限于基本的录音功能&#xff0c;而是更加注重音质、便携性、耐用…

Java中包的使用

针对在同一个类中使用不同包中的同名类时&#xff0c;这时候我们需要使用全类名。

React学习-jsx语法

jsx语法&#xff0c;浏览器不认识&#xff0c;需要经过babel编译 https://babeljs.io/ 面试题&#xff1a;jsx的作用&#xff1f; 普通回答&#xff1a;可以在js中返回dom&#xff0c;经过babel编译成js认识的代码import { jsx as _jsx, jsxs as _jsxs } from "react/j…

Maven的理解与应用

Maven使用 一、Maven的含义 Maven是一个构建项目的工具&#xff0c;也是一个管理项目的工具 二、Maven的应用 构建项目 管理依赖 做项目的热部署 基于项目做多模块&#xff08;modle&#xff09;的构建 三、Maven的安装 注意&#xff1a;maven本身不需要安装&#xff0c;下…

JVM(十)深入理解JVM类加载模型以及双亲委派模型

本文详细介绍了Java的类加载机制&#xff0c;包括加载、链接和初始化三个阶段。强调了双亲委派模型的重要性&#xff0c;这是一种避免重复加载类并维持Java核心库安全的类加载策略。文章还探讨了Java类加载器的不同类型&#xff0c;包括启动类加载器、扩展类加载器和应用类加载…