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()
}
}

总结

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

感谢你的阅读