qian
在網頁開發中，「前端的流式(streaming)請求」指的是一種資料傳輸方式，它允許程式碼從遠端伺服器接收持續的資料串流，而不是一次性下載全部內容後再進行處理。這種方法特別適用於大規模或無限量資料的傳輸，例如即時訊息、視頻串流、數據監控系統等等。以下將詳細介紹前端如何透過流式請求來獲取不斷更新的資料：
1. HTTP長連線與短連線
HTTP是一種基於請求/響應模式的協議，傳統上，每次請求都會建立新的TCP連接，完成任務後立即關閉。這稱為「短連線模型」。隨著技術發展，人們發現某些應用場景需要更高效且實時的資料傳輸，因此提出了「長連線模型」的概念。在長連線模式下，客戶端會保持與服務器的連線開啟狀態，直到某個條件被滿足才終止連線。
2. WebSockets
WebSocket是HTML5中的一項功能，它提供了一種全雙工、低延遲的通訊通道，可以實現真正的兩向流式傳輸。當一個WebSocket連線建立之後，雙方都可以隨時發送資料給對方，而不需要重新建連結。這使得即時應用程序（如聊天室、遊戲、股市行情更新）變得更加順暢和可靠。
var ws = new WebSocket('ws://example.com:80/path');
ws.onopen = function() {
console.log('Connected to the server!');
};
ws.onmessage = function(event) {
console.log('Received message from server:', event.data);
};
// Send a message to the server
ws.send('Hello, world!');
3. Server-Sent Events (SSE)
Server-Sent Events是一種單方向的事件推送機制，由HTML5標準定義。使用SSE時，瀏覽器會打開一個到服務器的持久連接，並等待來自服務器的資料更新。這些更新通常以事件的形式出現，並且格式化為JSON或其他易於解析的格式。
<script>
function handleEvent(e) {
document.getElementById('output').innerHTML += e.data + '<br>';
}
</script>
<div id="output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function(){
$.EventSource('/events', {withCredentials: true}); // 設置跨域資源共享(CORS)頭部
$('body').append('<div>' + $.now() + ' : Event Source Connected.
