HTML5資料推送SSE原理及應用程式開發的圖文詳解-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5資料推送SSE原理及應用程式開發的圖文詳解

黄舟

Mar 08, 2017 pm 03:23 PM

JavaScript表達行為，CSS表達外觀，注意HTML既表達結構（邏輯結構），又表達內容（資料本身）通常需要更新資料時，並不需要更新結構，正是這種不改變組織結構僅改變資料的訴求，推動了資料拉取和資料推送技術的產生。

SSE是一種允許伺服器端向客戶端推送新資料（簡稱資料推送）的HTML5技術。資料推送有兩種替代方案：無更新方案和資料拉取方案。

無更新方案：

#載入完畢HTML之後，得到一個HTML頁面，之後瀏覽器會要求圖片、CSS檔案和JavaScript檔案等，他們都是瀏覽器可以快取的靜態檔案。如果頁面使用後端語言，例如PHP、Ruby和Python等為使用者動態產生HTML的語言。

資料拉取方案：

瀏覽器會基於一些使用者行為，或在一定時間之後，或基於某種別的觸發方案，向伺服器端請求或全部更新數據，透過javascript或一個meta標籤能夠命令整個頁面重新載入。我們所熟悉的Ajax技術只被用來要求最新數據，當收到數據時，javascript函數會利用它來局部更新DOM。資料拉取的要義：僅拉取新數據，並且只更新頁面中受影響部分。

以上的都不是資料推送，資料推送不是靜態文件，也不涉及瀏覽器為更新資料而發起請求，資料推送是由伺服器選擇客戶端發送新資料。

當資料來源有新資料時，伺服器端能立刻傳送給一個或多個客戶端，而不用等客戶端來請求，這些新資料可能是突發新聞、最新股票、上線朋友的聊天資訊、新的天氣預報、策略遊戲中的下一步等。

SSE適用於更新頻繁、低延遲且資料都是從服務端到客戶端。它和WebSocket的差別：

1）便利，不需要增加任何新元件，用任何習慣的後端語言和框架就能繼續使用，不用為新建虛擬機器弄一個新的IP或新的端口號而勞神。

2）伺服器端的簡潔。因為SSE能在現有的HTTP/HTTPS協定上運作，所以它能夠直接運作於現有的代理伺服器和認證技術。

WebSocket相較SSE最大的優勢在於它是雙向交流的，這意味著伺服器發送資料就像從伺服器接受資料一樣簡單，而SSE一般透過一個獨立的Ajax請求從客戶端向服務端傳送數據，因此相對於WebSocket使用Ajax會增加開銷。因此，如果需要以每秒一次或更快的頻率向服務端傳輸數據，就應該使用WebSocket。

具體程式碼如下：

html程式碼

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...

以上是HTML5資料推送SSE原理及應用程式開發的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。