本篇文章為大家展示了如何理解HTML5的WebSocket與服務(wù)器推送事件，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)平城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
WebSockets
Web Sockets 是用于 Web 應(yīng)用程序的新一代雙向通信技術(shù)，運(yùn)行在單一套接字之上，它通過 JavaScript 接口暴漏在 HTML5 兼容的瀏覽器中。
一旦取得 Web 服務(wù)器上的 Web Socket 連接之后，就可以通過調(diào)用 send() 方法從瀏覽器發(fā)送數(shù)據(jù)到服務(wù)器上，通過 onmessage 事件處理程序從服務(wù)器接收數(shù)據(jù)到瀏覽器中。
下面是創(chuàng)建一個(gè)新的 WebSocket 對(duì)象的 API。
JavaScript Code復(fù)制內(nèi)容到剪貼板
var Socket = new WebSocket(url, [protocal] );
第一個(gè)參數(shù) url 用于指定要連接的 URL。第二個(gè)屬性 - 端口是可選的，如果提供，就會(huì)指定一個(gè)服務(wù)器必須支持連接成功的子協(xié)議。
WebSocket 屬性
下面是 WebSocket 對(duì)象的屬性。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對(duì)象：
| 屬性 | 描述 |
|---|---|
| Socket.readyState | 只讀屬性readyState表示連接的狀態(tài)。有以下取值：
|
| Socket.bufferedAmount | 只讀屬性bufferedAmount表示已經(jīng)使用 send() 方法排隊(duì)的 URF-8 文本字節(jié)數(shù)。 |
WebSocket 事件
下面是 WebSocket 對(duì)象相關(guān)的事件。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對(duì)象：
| 事件 | 事件處理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 建立 socket 連接時(shí)觸發(fā)這個(gè)事件。 |
| message | Socket.onmessage | 客戶端從服務(wù)器接收數(shù)據(jù)時(shí)觸發(fā)。 |
| error | Socket.onerror | 連接發(fā)生錯(cuò)誤時(shí)觸發(fā)。 |
| close | Socket.onclose | 連接被關(guān)閉時(shí)觸發(fā)。 |
WebSocket 方法
下面是 WebSocket 對(duì)象相關(guān)的方法。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對(duì)象：
| 方法 | 描述 |
|---|---|
| Socket.send() | send(data) 方法使用連接傳輸數(shù)據(jù)。 |
| Socket.close() | close() 方法用于終止任何現(xiàn)有連接。 |
服務(wù)器推送事件
傳統(tǒng)的 Web 應(yīng)用程序生成發(fā)送到 Web 服務(wù)器端的事件。比如，點(diǎn)擊一個(gè)鏈接會(huì)從服務(wù)器請(qǐng)求一個(gè)新頁面。
這種從 Web 瀏覽器到 Web 服務(wù)器的時(shí)間類型可以稱作客服端事件。
隨著 HTML5 的出現(xiàn)，WHATWG Web Applications 1.0 引入了一個(gè)從 Web 服務(wù)器到 Web 瀏覽器的事件流，被稱作服務(wù)器推送事件（SSE）。使用 SSE 可以不停的將 DOM 事件推送到用戶的瀏覽器中。
這個(gè)事件流方法會(huì)打開一個(gè)到服務(wù)器的持久連接，新消息可用時(shí)發(fā)送數(shù)據(jù)到客戶端，從而不再需要持續(xù)的輪詢。
SSE Web 應(yīng)用程序
要在 Web 應(yīng)用程序中使用服務(wù)器推送事件，我們需要給文檔添加一個(gè)
這個(gè) URL 將會(huì)指向一個(gè)持續(xù)發(fā)送事件數(shù)據(jù)的 PHP，PERL 或者任意 Python 腳本。下面是一個(gè)簡單的期望獲得服務(wù)器時(shí)間的 Web 應(yīng)用程序示例。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
/* Define event handling logic here */
SSE 服務(wù)器端腳本
服務(wù)器端腳本應(yīng)該發(fā)送 Content-type 頭指定類型為 text/event-stream，如下所示：
代碼如下:
print "Content-Type: text/event-stream\n\n";
設(shè)置 Content-type 之后，服務(wù)器端腳本將發(fā)送一個(gè)后面緊跟事件名稱的 Event: 標(biāo)簽。下面的示例將會(huì)發(fā)送一個(gè)以換行符結(jié)束的 Server-Time 作為事件名稱。
代碼如下:
print "Event: server-time\n";
最后一步是使用 Data: 標(biāo)簽發(fā)送事件數(shù)據(jù)，緊隨其后的是以換行符結(jié)束的整數(shù)字符串值，如下所示：
代碼如下:
$time = localtime();
print "Data: $time\n";
下面是用 perl 編寫的完整 ticker.cgi：
代碼如下:
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
處理服務(wù)器推送事件
讓我們修改一下我們的 Web 應(yīng)用程序來處理服務(wù)器推送時(shí)間。下面是最終示例：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
document.getElementsByTagName("eventsource")[0].
addEventListener("server-time", eventHandler, false);
function eventHandler(event)
{
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
[TIME]
在測試服務(wù)器推送事件之前，建議你確保你的 Web 瀏覽器支持這一概念。
上述內(nèi)容就是如何理解HTML5的WebSocket與服務(wù)器推送事件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
