一文了解服務端推送（含JS程式碼示例）
阿新 • • 發佈：2020-03-20
常用的服務端推送技術，包括輪詢、長輪詢、websocket、server-sent-event（SSE）
傳統的HTTP請求是由客戶端傳送一個request，服務端返回對應response，所以當服務端想主動給客戶端傳送訊息時就遇到了問題。常見的業務場景如新訊息提醒。
## 1、輪詢（Polling）
最簡單的方法是輪詢，即客戶端不斷的傳送請求來獲取最新的訊息。優點是實現簡單。缺點是請求中有大半是無用，浪費頻寬和伺服器資源，同時，根據輪詢的時間間隔不同，獲取訊息會有對應的延遲。
例項，新浪微博新訊息提示。開啟控制檯可以發現 `https://rm.api.weibo.com/2/remind/push_count.json` 一個 `jsonp` 請求，這個請求每隔 30s 傳送一次，每次需求 100ms 左右。
## 2、長輪詢（Long Polling）
長輪詢也比較容易理解，就是前端發起請求，並設定一個比較長的超時時間，後端接收到請求後，如果沒有相關資料，會hold住請求直到有結果了，或者等待一定時間超時才返回。返回後，客戶端會立即發起下一次請求。長輪詢的控制權的伺服器端，出現相關資料後會立即返回，實時性較高。
例項，QQ郵箱的新訊息提醒。可以看到 `https://wp.mail.qq.com/poll` 請求不斷髮送， 沒有新訊息時，請求每次都會需要 30s，上一次請求返回後立即傳送下一次請求，而當服務端有新訊息時會立即返回，實時性較高。
用程式碼簡單實現以上兩種輪詢
服務端程式碼
```js
const express = require('express');
const port = 2333;
const app = express();
app.get('/start', start);
app.get('/getCurrentResult', getCurrentResult);
app.get('/getFinalResult', getFinalResult);
app.listen(port, () => console.log(`Server listening on port ${port}`));
// 開始一個任務
function start(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*'); // 允許跨域
_startTask();
res.json({
code: 0,
data: '開始任務'
});
}
// 返回實時結果
function getCurrentResult(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.json({
code: 0,
data: result
});
}
// 任務執行結束之後再返回執行結果
async function getFinalResult(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
let result = await _startTask();
res.json({
code: 0,
data: result
});
}
// 模擬執行一個任務
let result = null;
function _startTask() {
result = null;
return new Promise((res, rej) => {
// 任務需要10s 10s後得到result
setTimeout(() => {
result = 'hello world';
res(result);
}, 10000);
});
}
```
客戶端程式碼
```html
輪詢&長輪詢 WebSocket Document
```
## 5、HTTP/2 Server Push
文章比較少，而且和上面的推送並不一樣，看到這篇講得不錯~
[Node HTTP/2 Server Push 從瞭解到放棄](https://juejin.im/post/5ae3f17ef265da0ba062e7e3)
## 參考資料
- [Long Polling長輪詢詳解](https://www.jianshu.com/p/d3f66b1eb748)
- [websockets/ws](https://github.com/websockets/ws)
- [Server-Sent Events 教程](http://www.ruanyifeng.com/blog/2017/05/server-sent_event