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

小白终成大白

文章目录

小白终成大白
前言
一、什么是SSE呢？和websocket的异同点有什么？
- 相同点
- 不同点
二、直接上实现代码
总结

前言

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

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

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

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

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

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

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

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

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

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

话不多说先来点概念

相同点

不同点

二、直接上实现代码

调用创建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()
}
}

总结

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

感谢你的阅读