EventSource和WebSocket用法
- 介绍
- 1、WebSocket
- 属性
- vue组件直接使用
- 单例模式创建webSocket连接
- (1)声明socket
- (2)组件使用
- 2、EventSource
- 属性
- get请求
- post请求
介绍
我们已熟知HTTP协议,但该协议只能由客户端发起,从服务端获取想要的数据。本文主要介绍WebSocket和EventSource。
区别 | WebSocket | EventSource |
---|---|---|
介绍 | 又称为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(); // 对新请求有效