還在用輪詢嗎，SSE服務(wù)端推送實(shí)現(xiàn)頁(yè)面實(shí)時(shí)更新
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
背景最近開發(fā)一個(gè)頁(yè)面碰到一個(gè)需求，需要對(duì)部分?jǐn)?shù)據(jù)需要實(shí)時(shí)更新狀態(tài)，面對(duì)這樣子的場(chǎng)景，我們通常有以下幾個(gè)方案：
是什么我們先簡(jiǎn)單認(rèn)識(shí)一下這三者的區(qū)別： 輪詢輪詢就是利用setTimeout的定時(shí)器，定時(shí)向服務(wù)器發(fā)起請(qǐng)求，代碼如下： let timeout = 0; functon rollRequest(requestFunc, times, immediately){ if(timeout !== 0){ clearTimeout(timeout); } if(immediately){ requestFunc && requestFunc(); } timeout = setTimeout(()=>{ requestFunc && requestFunc(); rollRequest(requestFunc, times, false); }, times); } 缺點(diǎn)
WebSocket針對(duì)上面輪詢的缺點(diǎn)，WebSokcet長(zhǎng)鏈接就能很好解決，如：
具體實(shí)現(xiàn)代碼如下： // 客戶端 const ws = new WebSocket(`wss://127.0.0.1:8081`); ws.send("這是一條消息：" + count); // 監(jiān)聽消息 ws.onmessage = function (event) { console.log(event.data); } // 關(guān)閉連接 ws.close(); // 服務(wù)端 var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: 8181 }); wss.on('connection', function (ws) { console.log('client connected'); ws.on('message', function (message) { console.log(message); }); }); 缺點(diǎn)可能實(shí)現(xiàn)方案對(duì)于一個(gè)頁(yè)面數(shù)據(jù)更新有點(diǎn)太重了，主要包括以下幾點(diǎn)：
SSE服務(wù)端推送SSE全稱Server-sent Events，是HTML 5 規(guī)范的一個(gè)組成部分，它主要由兩部分組成：
對(duì)比WebSocket：
實(shí)現(xiàn)一個(gè)SSE代碼如下： 瀏覽器： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SSE Demo測(cè)試</title> </head> <body> <h3>SSE返回內(nèi)容</h3> <div id="app"></div> <script> const eventSource = new EventSource('http://localhost:3000/sse'); eventSource.onmessage = (event) => { document.getElementById('app').innerHTML = document.getElementById('app').innerHTML + `<p>${event.data}</p>`; } </script> </body> </html> 服務(wù)端： const http = require('http') const fs = require('fs') // create a server const server = http.createServer() // 監(jiān)聽路由 server.on('request', (req, res) => { console.log('request', req.url) if (req.url === '/sse') { // Set CORS headers res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS') res.setHeader('Access-Control-Allow-Headers', 'Content-Type') // Set SSE headers res.setHeader('Content-Type', 'text/event-stream') res.setHeader('Cache-Control', 'no-cache') // Send a ping approx every 2 seconds res.write("retry: 10000\n\n"); res.write("event: connecttime\n\n"); res.write("data: 第一次發(fā)送:" + (new Date()) + "\n"); // 模擬收到消息推送給客戶端 interval = setInterval(function () { res.write("data: 后續(xù)更新" + (new Date()) + "\n\n"); }, 5000); } if (req.url === '/index.html' || req.url === '/') { // 如果是html文件，返回html文件 res.setHeader('Content-Type', 'text/html') const html = fs.readFileSync('./public/index.html'); res.end(html) } }) // Listen server.listen(3000, () => { console.log('Server started on port 3000') }) 缺點(diǎn)
總結(jié)前端實(shí)時(shí)更新需求，有多個(gè)解決方案，下面進(jìn)行總結(jié)：
參考資料數(shù)據(jù)不夠?qū)崟r(shí)：試試長(zhǎng)連接？ 該文章在 2023/6/25 8:55:29 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
