快捷導(dǎo)航

Javascript WebSocket使用實例介紹（簡明入門教程）

更新時間：2014年04月16日 09:48:49 作者：

網(wǎng)絡(luò)套接字是下一代WEB應(yīng)用程序雙向通信技術(shù)，它是基于一個獨立的socket并且需要客戶端瀏覽器支持HTML5

一旦你了解了網(wǎng)絡(luò)套接字與WEB服務(wù)器的連接，你將可以從瀏覽器發(fā)送數(shù)據(jù)到服務(wù)器并且可以接收由服務(wù)器返回的響應(yīng)數(shù)據(jù)。

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

復(fù)制代碼代碼如下:

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

這里第一個參數(shù)是指要連接的URL，第二個參數(shù)是可選的，如果需要的話，則是指定一個的服務(wù)器支持的協(xié)議。

WEB Socket屬性：

屬性	說明
Socket.readyState	readyState的代表的ReadOnly屬性的連接狀態(tài)。它可以有以下值：一個0值表示該連接尚未建立。值為1表示連接建立和溝通是可能的。值為2表示連接是通過將結(jié)束握手。值為3表示連接已關(guān)閉或無法打開。
Socket.bufferedAmount	讀屬性的bufferedAmount代表文本的字節(jié)數(shù),utf - 8的排隊使用send()方法。

WEB Socket事件：

事件	處理程序	說明
open	Socket.onopen	此事件發(fā)生在套接字建立連接。
message	Socket.onmessage	此事件發(fā)生時，客戶端收到來自服務(wù)器的數(shù)據(jù)。
error	Socket.onerror	此事件發(fā)生時有任何通信錯誤。
close	Socket.onclose	此事件發(fā)生在連接關(guān)閉。

WEB Socket方法：

方法	說明
Socket.send()	send（data）方法用來連接傳輸數(shù)據(jù)。
Socket.close()	close（）方法將被用于終止任何現(xiàn)有的連接。

WEB Socket例子：

復(fù)制代碼代碼如下:

<!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>