在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ HTML5 WebSockets 教程
HTML5 Web 存儲
HTML5 Web SQL 數(shù)據(jù)庫
HTML5 字符編碼
HTML5 URL 編碼
HTML5 Modernizr
HTML5 快速指南
HTML5 畫布
HTML5 語法
HTML5 顏色代碼生成器
HTML5 音頻和視頻
HTML5 微數(shù)據(jù)
HTML5 標(biāo)簽參考
HTML5 在線編輯器
HTML5 表單 2.0
HTML5 概述
HTML5 SVG 教程
HTML5 驗證
有用的 HTML5 資源
HTML5 字體參考
HTML5 屬性
HTML5 新標(biāo)簽(元素)
HTML5 地理定位
HTML5 拖放
HTML5 字符實體參考
HTML5 Web Workers
HTML5 過時標(biāo)簽和屬性
HTML5 顏色名稱
HTML5 WebSockets 教程
HTML5 服務(wù)器推送事件
HTML5 事件
HTML5 MathML 教程

HTML5 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。

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

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

WebSocket 屬性

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

屬性 描述
Socket.readyState

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

  1. 0 表示連接尚未建立。

  2. 1 表示連接已建立,可以進(jìn)行通信。

  3. 2 表示連接正在進(jìn)行關(guān)閉握手。

  4. 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)有連接。

WebSocket 示例

一個 WebSocket 就是客戶端和服務(wù)端之間的標(biāo)準(zhǔn)雙向 TCP 套接字。套接字以 HTTP 連接開始,在 HTTP 握手之后“升級”為 TCP 套接字。握手之后,任意一端都可以發(fā)送數(shù)據(jù)。

客戶端 HTML 和 JavaScript 代碼

編寫這篇教程時,只有少數(shù)幾個瀏覽器支持 WebSocket() 接口。你可以使用最新版的 Chrome,Mozilla,Opera 和 Safari 嘗試下面這個例子。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://localhost:9998/echo");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt) 
     { 
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     { 
        // websocket is closed.
        alert("Connection is closed..."); 
     };
  }
  else
  {
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

安裝 pywebsocket

在測試上面的客戶端程序之前,需要一個支持 WebSocket 的服務(wù)器??梢詮?pywebsocket 下載 mod_pywebsocket-x.x.x.tar.gz,它只在為 Apache HTTP 服務(wù)器提供 WebSocket 擴(kuò)展,然后按照如下步驟安裝。

  1. 解壓縮和解壓下載的文件
  2. 進(jìn)入 pywebsocket-x.x.x/src/ 目錄。
  3. 執(zhí)行 $python setup.py build
  4. 執(zhí)行 $sudo python setup.py install
  5. 然后通過 $pydoc mod_pywebsocket 讀取文檔

這將會把他安裝到我們的 python 環(huán)境中。

啟動服務(wù)器

進(jìn)入 __pywebsocket-x.x.x/src/mod_pywebsocket__ 文件夾并運行如下命令:

$sudo python standalone.py -p 9998 -w ../example/

這會啟動監(jiān)聽 9998 端口的服務(wù)器,然后使用通過 -w 選項指定的處理程序目錄,也就是 echo_wsh.py 所在目錄。

現(xiàn)在使用 Chrome 瀏覽器打開起初創(chuàng)建的 html 文件。如果瀏覽器支持 WebSocket(),那么會得到一個指示瀏覽器支持 WebSocket 的消息框,當(dāng)我們點擊 “Run WebSocket” 時會得到服務(wù)器腳本發(fā)出的 Goodbye 信息。

上一篇:HTML5 Modernizr下一篇:HTML5 語法