EventSource和WebSocket用法

server/2024/12/14 5:27:05/

EventSource和WebSocket用法

  • 介绍
  • 1、WebSocket
    • 属性
    • vue组件直接使用
    • 单例模式创建webSocket连接
      • (1)声明socket
      • (2)组件使用
  • 2、EventSource
    • 属性
    • get请求
    • post请求

介绍

我们已熟知HTTP协议,但该协议只能由客户端发起,从服务端获取想要的数据。本文主要介绍WebSocket和EventSource。

区别WebSocketEventSource
介绍又称为SSE(Server-Sent Events)
通信过程双向连接,支持发送和接收数据单向连接,只能服务端向客户端发送数据,一个EventSource会对http服务开启一个持久化链接,它发送的事件格式是‘text/stream’,开启EventSource事件后,它会一直保持开启状态,直到被要求关闭
协议标识符ws(如果加密,则为wss)ws(如果加密,则为wss)
数据格式可以发送任何格式的数据,例如文本、二进制数据或JSON只能发送文本格式的数据
支持程度一些旧的浏览器不支持可被广泛使用
应用场景更适合需要实时双向通信的应用,例如视频会议更适合需要从服务器获取实时信息的应用,例如股票行情或推送

1、WebSocket

属性

WebSocket.binaryType (非只读):使用二进制的数据类型连接。
WebSocket.bufferedAmount (只读):未发送至服务器的字节数。
WebSocket.extensions (只读):服务器选择的扩展。
WebSocket.protocol (只读):服务器选择的下属协议。
WebSocket.readyState (只读):当前的链接状态。
WebSocket.url (只读):WebSocket 的绝对路径。

vue_20">vue组件直接使用

上面介绍了属性,此处介绍事件、方法(send、close)、使用示例,也可通过MyWebsocket.addEventListener监听事件(close、open、message、error)。

javascript">const url = "ws://localhost:9998/echo" || env.wsapi
const MyWebsocket = new WebSocket()MyWebsocket.binaryType = 'arraybuffer';
// WebSocket 事件:onOpen、onMessage、onClose、onError、
MyWebsocket.onopen= () => {// 连接建立时触发
}
// 可监听事件,使用回调函数,如open、message、close
MyWebsocket.addEventListener("open", function (event) {socket.send("Hello Server!");
});
MyWebsocket.onmessage = (e) => {// 接收服务端数据时触发console.log('e.data---->'. e.data)ws.send('Hello Server!');
}
MyWebsocket.onerror = () => {// 通信发生错误时触发
}
MyWebsocket.onclose = () => {// 连接关闭时触发
}
// WebSocket 方法,在某些情况下主动触发,发送给服务端数据或申请关闭
MyWebsocket.send()
MyWebsocket.close()

单例模式创建webSocket连接

(1)声明socket

文件路径:message/messageSocket.js

javascript">export default class MessageSocket {handleMessage = null // 接收数据后的处理方法,由构建时传入// 构造函数constructor(callback) {callback && (this.handleMessage = callback)this.establishWsConn()}socket = null // websocket对象url = `${location.protocol == 'https:' ? 'wss' : 'ws'}://${location.host}/message`heartbeatTimer = null // 心跳定时器// 初始化连接websocketestablishWsConn = () => {this.close()this.socket = new WebSocket(this.url)this.socket.onopen = this.onopenthis.socket.onclose = this.onclosethis.socket.onerror = this.onerrorthis.socket.onmessage = this.onmessage}// 手动断开连接close = () => {this.heartbeatTimer && clearInterval(this.heartbeatTimer)this.heartbeatTimer = nullthis.socket && this.socket.close()this.socket = null}// 连接成功onopen = (e) => {console.log('连接成功', e) this.socket.send(JSON.stringify({ msgType: 'heartbeat' }))this.keepHeartBeat() // 保持连接this.handleMessage && this.handleMessage({type: 'onopen'})}// 连接关闭onclose = () => {console.log('连接关闭')this.close()this.handleMessage && this.handleMessage({type: 'onclose'})}// 连接失败onerror(e) { console.log('失败', e) }// 接收数据onmessage = e => { const data = JSON.parse(e.data)console.log('onmessage', data)this.handleMessage({type: 'onmessage',data})}// 保持心跳连接keepHeartBeat = () => {this.heartbeatTimer = setInterval(() => {this.socket.send(JSON.stringify({ msgType: 'heartbeat' }))}, 59*1000)}
}

(2)组件使用

views/message/index.vue

javascript">import MessageSocket from './messageSocket.js'mounted() {this.getMessageList(); // 获取站内信未读消息},methods: {// 查询未读消息async getMessageList() {try {this.messageList = []// 传入回调函数new MessageSocket(({ type, data }) => {console.log('type-getUnreadMessages',type, data)if(type != 'onmessage' || !data) return // 此处根据具体情况进行处理,如下将新数据信息塞入列表前面this.messageList.unshift(...data)})} catch (err) {this.$message.error(err.message);}},},

2、EventSource

属性

EventSource.readyState (只读):一个代表连接状态的数字。可能值是 CONNECTING(0)、OPEN(1)或 CLOSED(2)。

EventSource.url (只读):一个表示事件源的 URL 字符串。

EventSource.withCredentials (只读):一个布尔值,表示 EventSource 对象是否使用跨源资源共享(CORS)凭据来实例化(true),或者不使用(false,即默认值)。

get请求

javascript"> // 初始化一个实例,传入请求地址URLconst eventSource = new EventSource('url')// 与事件源的连接刚打开时触发eventSource.onopen = function (e) {console.log(e, "连接刚打开时触发");};// 接收数据eventSource.onmessage = function (e) {console.log(e);};// 连接失败eventSource.onerror = function (e) {console.log(e);eventSource.close(); // 关闭连接};// 主动关闭连接eventSource.close();   

post请求

借助第三方库的fetchEventSource方法连接服务,通过AbortController 可以关闭服务。

javascript">npm install @microsoft/fetch-event-source

通过插件请求EventSource

javascript">import { fetchEventSource } from '@microsoft/fetch-event-source';fetchEventSource(Url, {method: 'POST',headers: {"Content-Type": 'application/json',"Accept": 'text/event-stream'},body: JSON.stringify(data),onmessage(event) {console.info(event.data);// 在这里操作流式数据},onclose(ee) {// 关闭流}onerror(error) {console.info(error);//返回流报错}})

取消请求。注意:取消过一次后需要再声明一个实例对象ctrlAbout去取消。

javascript">// 创建一个新的AbortController实例
const ctrlAbout = new AbortController();
// const { signal } = controller;
// 使用fetchEventSource发起请求,并传入新的AbortSignal
fetchEventSource(url, { signal: ctrlAbout.signal });// 当需要取消请求时执行
ctrlAbout.abort();// 如果需要再次发起请求并保留取消的能力,需要再次创建AbortController
const newCtrlAbout = new AbortController();
fetchEventSource(url, { signal: newCtrlAbout.signal });// 然后可以使用新的控制器来取消新的请求
newCtrlAbout.abort(); // 对新请求有效

http://www.ppmy.cn/server/150015.html

相关文章

可视化数据

数据科学家会直观呈现数据,以更好地理解数据。 他们可以扫描原始数据、检查摘要度量值(如平均值)或绘制数据图表。 图表是一种可视化数据的强有力方式,数据科学家经常使用图表快速了解适度复杂的模式。 直观地表示数据 绘制图表…

springboot425滑雪场管理系统(论文+源码)_kaic

摘要 近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定滑雪场管理系统的总体功能模块。然后,详…

数据结构开始——时间复杂度和空间复杂度知识点笔记总结

好了,经过了漫长的时间学习c语言语法知识,现在我们到了数据结构的学习。 首先,我们得思考一下 什么是数据结构? 数据结构(Data Structure)是计算机存储、组织数据的方式,指相互之间存在一种或多种特定关系的数据元素…

MySQL|通过JSON_UNQUOTE实现MySQL中JSON数据的干净提取

文章目录 语法使用示例注意事项 JSON_UNQUOTE() 是 MySQL 中用于处理 JSON 数据类型的一个函数。它的主要作用是从 JSON 字符串中移除最外层的引号,这对于从 JSON 对象或数组中提取字符串值特别有用。 语法 JSON_UNQUOTE(json_string)json_string: 这是你想要去掉引…

笔记本电脑升级硬盘存储、Windows10系统安装及后续步骤(以联想ThinkPad X1 Carbon Gen10为例)

文章目录 1.前言2.材料准备3.Win10系统安装盘制作3.1 系统下载3.2 系统启动U盘刻录 4.拆机更换硬盘5.开机启动项修改6.系统安装(以Win10为例)7.系统安装后可能需要的步骤7.1 缺少WIFI等网络驱动7.2 系统激活7.3 办公软件安装 8.旧硬盘变废为宝参考文献 1…

短视频矩阵抖音SEO源码OEM独立部署

短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序,目的是增强其在搜索引擎中的可见度,以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架,来解析抖音上的用户数据、视频信息及标签等元素,并…

手机租赁系统开发全面解析与实现指南

内容概要 手机租赁系统的设计理念是为了满足用户对便捷、灵活的手机使用需求。想象一下,谁还愿意花大价钱买一部手机呢?尤其是当新款手机频繁推出时,租赁似乎成了更受欢迎的选择。这个系统旨在让用户可以随时随地选择租用不同型号的手机&…

docker安装Emqx并使用自签名证书开启 SSL/TLS 连接

docker安装Emqx并使用自签名证书开启 SSL/TLS 连接 一、获取自签名证书1、创建openssl.cnf文件2、生成证书自签名证书 二、docker安装EMQX1、初始化目录2、加载镜像文件并挂载相应的文件目录3、启动docker容器4、EMQX加载自签名证书 三、客户端MQTTX连接测试四、Springboot整合…