uniapp使用sse连接后端，接收后端推过来的消息

小白终成大白

---

前言

一般的请求就是前端发 后端回复 你一下我一下

如果需要有什么实时性的 后端可以主动告诉前端的技术 我首先会想到 websocket
啊 这个东西学名应该是叫流式 流式请求
但是这个websocket长连接 非常消耗服务器性能 不能支持很多用户去同时连接使用

最近听说了一个sse 推送式的
使用场景：我们在做的项目是一个游戏 到达活动时间，需要在所有用户的界面上弹出一个提示框框
这就需要后端到时间告诉前端 也可以前端不断地轮询 去发请求问后端 现在是否有活动
但是都有点消耗服务器 我们的服务器不堪一击
这个时候提出了这个Server-Sent Events sse

一、什么是SSE呢？和websocket的异同点有什么？

话不多说先来点概念

相同点

不同点

二、直接上实现代码

1. 调用创建sse方法 可以写在某个方法下面 也可以直接写在 “< script setup >< script >”里面 和onLoad方法同级

 onLoad(async (options) => {state.myEnergyName = options.myEnergyName;let userInfo = await sheep.$store('user').getInfo();state.userId = userInfo.userId;//括号里换成你的接口地址const sseConnection = createSSEConnection('http://192.168.110.128:9068/notification/sse/subscribe/1000287')});

2.方法具体内容

   function createSSEConnection(url) {// 创建一个标准的XMLHttpRequest对象const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.setRequestHeader('Accept', 'text/event-stream')xhr.setRequestHeader('Cache-Control', 'no-cache')// 设置响应类型为文本xhr.responseType = 'text'// 数据缓冲区let buffer = ''// 处理进度事件xhr.onprogress = function(e) {// 获取新数据const newData = xhr.responseText.substring(buffer.length)if (newData) {buffer += newData// 按行分割数据const lines = newData.split('\n')for (const line of lines) {if (line.startsWith('data:')) {const eventData = line.substring(5).trim()// 触发数据处理handleSSEData(eventData)}}}}xhr.onerror = function(e) {console.error('SSE连接错误:', e)}xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log('SSE连接完成')} else {console.error('SSE连接失败:', xhr.status)}}}// 发送请求xhr.send()return xhr
}// 处理SSE数据
function handleSSEData(data) {try {const parsedData = JSON.parse(data)console.log('收到SSE数据:', parsedData)// 处理数据...} catch (e) {console.log('收到SSE文本:', data)// 处理非JSON数据...}
}

注意不要重复建立连接 该关闭时要记得关闭

// 关闭连接
function closeSSE() {
if (sseConnection) {sseConnection.abort()
}
}

总结

暂时先用到这些 学会新的招式再来补充

感谢你的阅读