小白終成大白

---

前言

一般的請求就是前端發 后端回復 你一下我一下

如果需要有什么實時性的 后端可以主動告訴前端的技術 我首先會想到 websocket
啊 這個東西學名應該是叫流式 流式請求
但是這個websocket長連接 非常消耗服務器性能 不能支持很多用戶去同時連接使用

最近聽說了一個sse 推送式的
使用場景：我們在做的項目是一個游戲 到達活動時間，需要在所有用戶的界面上彈出一個提示框框
這就需要后端到時間告訴前端 也可以前端不斷地輪詢 去發請求問后端 現在是否有活動
但是都有點消耗服務器 我們的服務器不堪一擊
這個時候提出了這個Server-Sent Events sse

（這里說一下 uniapp寫的h5 和普通web都可以的 但是uniapp寫的app是不支持的 一打開就白屏！！！好氣）

一、什么是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()
}
}

總結

暫時先用到這些 學會新的招式再來補充

感謝你的閱讀