前端实现简单的sse封装方式(React hook Vue3)

2024-11-2 22:46| 发布者: 284cc| 查看: 64| 评论: 0

摘要: 目次什么是SSE？封装简单的SSE，以React hook为例新建sse.ts文件下面代码为使用方法使用vue3实现总结什么是SSE？所谓的SSE(Sever-Sent Event)，就是欣赏器向服务器发送了一个HTTP哀求，保持长连接，服务器不停单向

什么是SSE？

所谓的SSE(Sever-Sent Event)，就是欣赏器向服务器发送了一个HTTP哀求，保持长连接，服务器不停单向地向欣赏器推送“信息”，这么做是为了节流网络资源，不消不停发哀求，建立新连接。

长处：SSE和WebSocket相比，最大的优势是便利，服务端不必要第三方组件，开发难度低，SSE和轮询相比它不消处置惩罚许多哀求，不消每次建立新连接，耽误低。
缺点：假如客户端有许多必要保持许多长连接，这回占用大量内存和连接数。

封装简单的SSE，以React hook为例

可参考简单的websocket封装

新建sse.ts文件

[code]import {useState, useRef, useEffect} from 'react' const useSSE = (url: string) => { const source = useRef<EventSource | null>(null) //接收到的sse数据 const [sseData, setSseData] = useState({}) // sse状态 const [sseReadyState, setSseReadyState] = useState({ key: 0, value: '正在链接中', }) const creatSource = () => { const stateArr = [ {key: 0, value: '正在链接中'}, {key: 1, value: '已经链接而且可以通讯'}, {key: 2, value: '连接已关闭大概没有链接乐成'}, ] try { source.current = new EventSource(url) source.current.onopen = (_e) => { setSseReadyState(stateArr[source.current?.readyState ?? 0]) } source.current.onerror = (e) => { setSseReadyState(stateArr[source.current?.readyState ?? 0]) } source.current.onmessage = (e) => { setSseData({...JSON.parse(e.data)}) } } catch (error) { console.log(error) } } const sourceInit = () => { if (!source.current || source.current.readyState === 2) { creatSource() } } // 关闭 WebSocket const closeSource = () => { source.current?.close() } //重连 const reconnectSSE = () => { try { closeSource() source.current = null creatSource() } catch (e) { console.log(e) } } useEffect(() => { sourceInit() },[]) return { sseData, sseReadyState, closeSource, reconnectSSE, } } export default useSSE[/code]

这里一共暴暴露四个参数。

分别是 sseData（接收到的 sse数据）、sseReadyState（当前 sse状态）、closeSource（关闭 sse）、reconnectSSE（重连）。

通过这几个简单的参数可以或许覆盖一样寻常场景的必要。

下面代码为使用方法

[code]import React, { useState, useEffect } from 'react' import useWebsocket from '../../tools/webSocket' export default function () { const {sseData,sseReadyState, closeSource,reconnectSSE} = useSSE(url) useEffect(() => { console.log( '当前状态'，sseReadyState) },[sseReadyState]) useEffect(() => { console.log( '接收到的数据'，sseData) }, [sseData]) }[/code]

使用vue3实现

[code]import { ref } from "vue"; const useSSE = (url: string) => { const source = ref<EventSource | null>(null); //接收到的sse数据 const sseData = ref({}); // sse状态 const readyState = ref({ key: 0, value: "正在链接中" }); const creatSource = () => { const stateArr = [ { key: 0, value: "正在链接中" }, { key: 1, value: "已经链接而且可以通讯" }, { key: 2, value: "连接已关闭大概没有链接乐成" }, ]; try { source.value= new EventSource(url); source.value.onopen = (e) => { readyState.value = stateArr[source.value?.readyState ?? 0]; }; source.value.onerror = (e) => { readyState.value = stateArr[source.value?.readyState ?? 0]; }; source.value.onmessage = (e) => { e.data && (sseData.value = { ...JSON.parse(e.data) }); }; } catch (error) { console.log(error); } }; const sourceInit = () => { if (!source.value|| source.value.readyState === 2) { creatSource(); } }; // 关闭 WebSocket const closeSource = () => { source.value?.close(); }; //重连 const reconnectSSE = () => { try { closeSource(); source.value= null; creatSource(); } catch (e) { console.log(e); } }; return { sseData, readyState, sourceInit, closeSource, reconnectSSE, }; }; export default useSSE;[/code]

总结

以上为个人经验，希望能给各人一个参考，也希望各人多多支持脚本之家。

来源：https://www.jb51.net/javascript/3266572of.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：vue3中利用sse最佳实践,封装工具详解下一篇：使用Vue3-Ace-Editor如安在Vue3项目中集成代码编辑器

账号		自动登录	找回密码
密码			立即注册