使用event-source-polyfill 前提：
嚴格的來說，HTTP協議無法做到服務端主動推送消息，但是，有一種方法，是服務器向客戶端聲明，接下來要發送的是流信息（streaming）。也就是說，發送的不是一次性的數據包，而是一個數據流，會連續不斷的發送過來，這時，客戶端不會關閉鏈接，會一直等待服務器發過來的新的數據流，視頻播放就是這樣的例子，本質上，這種通信就是以流信息的方式，完成一次用時很長的下載。
SSE就是利用這種機制，使用流信息向瀏覽器推送信息，它基於HTTP協議，現除了IE，其他主流瀏覽器都有一定程度的支持。因為要兼容IE，所以我們使用到了polyfill。
SSE與WebSocket作用相似，都是建立瀏覽器與服務器之間的通信渠道，然后服務器向瀏覽器推送信息。
總體來說，websocket更強大和靈活，因為它是全雙工通道，可以雙向通信，SSE是單向通道，只能服務器向瀏覽器發送，因為流本質上就是下載，如果瀏覽器向服務器發送消息，就變成了另一次HTTP請求。
但是SSE也有自己的優點。
SSE使用HTTP協議，現有的服務器軟件都支持，WebSocket是一個獨立協議。
SSE屬於輕量級，使用簡單；websocket協議相對復雜。
SSE默認支持斷線重連，websocket需要自己實現。
SSE一般只用來傳送文本，二進制數據需要編碼后傳送，websocket默認支持傳送二進制數據。
SSE支持自定義發送的消息類型。
因此，兩者各有特點，適合不同的場合。我們項目的需求是要做一個實時的消息通知，所以采用了SSE的技術棧，SSE的客戶端API部署在EventSource對象上，但是由於EventSource不支持IE，也不支持在對象的header定義token, 所以采用了event-source-polyfill 。
首先，安裝polyfill
npm install event-source-polyfill
or
brow install event-source-polyfill
因為event-source-polyfill沒有ts版本，所以要解決這個問題，需要建立src/types/index.d.ts文件
declare const event-source-polyfill: any;
declare module 'event-source-polyfill';
使用
important { EventSourcePolyfill } from 'event-source-polyfill';
useEffect(() => {
const evtSource = new EventSourcePolyfill('/stream', {
headers: {
Authorization: 'token'
}
})
evtSource.onmessage = function(event: any) {
// to to something...
}
}, []);
!!!!! 因為SSE傳送的流信息，所以在開發環境做反向代理時，一定要設置compress: false。否則監聽不到onmessage事件。