如何理解HTML5的WebSocket與服務(wù)器推送事件

本篇文章為大家展示了如何理解HTML5的WebSocket與服務(wù)器推送事件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)平城免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

WebSockets

Web Sockets 是用于 Web 應(yīng)用程序的新一代雙向通信技術(shù)，運行在單一套接字之上，它通過 JavaScript 接口暴漏在 HTML5 兼容的瀏覽器中。

一旦取得 Web 服務(wù)器上的 Web Socket 連接之后，就可以通過調(diào)用 send() 方法從瀏覽器發(fā)送數(shù)據(jù)到服務(wù)器上，通過 onmessage 事件處理程序從服務(wù)器接收數(shù)據(jù)到瀏覽器中。

下面是創(chuàng)建一個新的 WebSocket 對象的 API。

JavaScript Code復(fù)制內(nèi)容到剪貼板

var Socket = new WebSocket(url, [protocal] );

第一個參數(shù) url 用于指定要連接的 URL。第二個屬性 - 端口是可選的，如果提供，就會指定一個服務(wù)器必須支持連接成功的子協(xié)議。

WebSocket 屬性
下面是 WebSocket 對象的屬性。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象：

屬性	描述
Socket.readyState	只讀屬性readyState表示連接的狀態(tài)。有以下取值： 0 表示連接尚未建立。 1 表示連接已建立，可以進(jìn)行通信。 2 表示連接正在進(jìn)行關(guān)閉握手。 3 表示連接已經(jīng)關(guān)閉或者連接不能打開。
Socket.bufferedAmount	只讀屬性bufferedAmount表示已經(jīng)使用 send() 方法排隊的 URF-8 文本字節(jié)數(shù)。

屬性

描述

Socket.readyState

只讀屬性readyState表示連接的狀態(tài)。有以下取值：

0 表示連接尚未建立。
1 表示連接已建立，可以進(jìn)行通信。
2 表示連接正在進(jìn)行關(guān)閉握手。
3 表示連接已經(jīng)關(guān)閉或者連接不能打開。

Socket.bufferedAmount

只讀屬性bufferedAmount表示已經(jīng)使用 send() 方法排隊的 URF-8 文本字節(jié)數(shù)。

WebSocket 事件
下面是 WebSocket 對象相關(guān)的事件。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象：

事件	事件處理程序	描述
open	Socket.onopen	建立 socket 連接時觸發(fā)這個事件。
message	Socket.onmessage	客戶端從服務(wù)器接收數(shù)據(jù)時觸發(fā)。
error	Socket.onerror	連接發(fā)生錯誤時觸發(fā)。
close	Socket.onclose	連接被關(guān)閉時觸發(fā)。

WebSocket 方法
下面是 WebSocket 對象相關(guān)的方法。假定我們已經(jīng)創(chuàng)建了上述的 Socket 對象：

方法	描述
Socket.send()	send(data) 方法使用連接傳輸數(shù)據(jù)。
Socket.close()	close() 方法用于終止任何現(xiàn)有連接。

服務(wù)器推送事件
傳統(tǒng)的 Web 應(yīng)用程序生成發(fā)送到 Web 服務(wù)器端的事件。比如，點擊一個鏈接會從服務(wù)器請求一個新頁面。

這種從 Web 瀏覽器到 Web 服務(wù)器的時間類型可以稱作客服端事件。

隨著 HTML5 的出現(xiàn)，WHATWG Web Applications 1.0 引入了一個從 Web 服務(wù)器到 Web 瀏覽器的事件流，被稱作服務(wù)器推送事件（SSE）。使用 SSE 可以不停的將 DOM 事件推送到用戶的瀏覽器中。

這個事件流方法會打開一個到服務(wù)器的持久連接，新消息可用時發(fā)送數(shù)據(jù)到客戶端，從而不再需要持續(xù)的輪詢。

SSE Web 應(yīng)用程序
要在 Web 應(yīng)用程序中使用服務(wù)器推送事件，我們需要給文檔添加一個 <eventsource>元素。

<eventsource> 元素的 src 屬性應(yīng)該指向一個 URL，這個 URL 應(yīng)該提供一個 HTTP 持久連接用于發(fā)送包含事件的數(shù)據(jù)流。

這個 URL 將會指向一個持續(xù)發(fā)送事件數(shù)據(jù)的 PHP，PERL 或者任意 Python 腳本。下面是一個簡單的期望獲得服務(wù)器時間的 Web 應(yīng)用程序示例。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker">
<TIME>
</div>
</body>
</html>

SSE 服務(wù)器端腳本
服務(wù)器端腳本應(yīng)該發(fā)送 Content-type 頭指定類型為 text/event-stream，如下所示：

代碼如下:

print "Content-Type: text/event-stream\n\n";

設(shè)置 Content-type 之后，服務(wù)器端腳本將發(fā)送一個后面緊跟事件名稱的 Event: 標(biāo)簽。下面的示例將會發(fā)送一個以換行符結(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ù)器推送時間。下面是最終示例：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
document.getElementsByTagName("eventsource")[0].
addEventListener("server-time", eventHandler, false);
function eventHandler(event)
{
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker" name="ticker">
[TIME]
</div>
</body>
</html>

在測試服務(wù)器推送事件之前，建議你確保你的 Web 瀏覽器支持這一概念。

上述內(nèi)容就是如何理解HTML5的WebSocket與服務(wù)器推送事件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：如何理解HTML5的WebSocket與服務(wù)器推送事件
文章分享：http://m.rwnh.cn/article34/ggddpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何理解HTML5的WebSocket與服務(wù)器推送事件