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

小白终成大白

文章目录


前言

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

如果需要有什么实时性的 后端可以主动告诉前端的技术 我首先会想到 websocket

啊 这个东西学名应该是叫流式 流式请求

但是这个websocket长连接 非常消耗服务器性能 不能支持很多用户去同时连接使用

最近听说了一个sse 推送式的

使用场景:我们在做的项目是一个游戏 到达活动时间,需要在所有用户的界面上弹出一个提示框框

这就需要后端到时间告诉前端 也可以前端不断地轮询 去发请求问后端 现在是否有活动

但是都有点消耗服务器 我们的服务器不堪一击

这个时候提出了这个Server-Sent Events sse

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

话不多说先来点概念

相同点

不同点

二、直接上实现代码

  1. 调用创建sse方法 可以写在某个方法下面 也可以直接写在 "< script setup >< script >"里面 和onLoad方法同级
c 复制代码
 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.方法具体内容

c 复制代码
   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数据...
  }
}

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

c 复制代码
// 关闭连接
function closeSSE() {
if (sseConnection) {
  sseConnection.abort()
}
}

总结

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

感谢你的阅读

相关推荐
2501_915918415 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909068 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师9 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj9 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q51100828516 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code18 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张18 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214319 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q51100828521 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app