js WebSocket用法簡單介紹

admin發表於2017-03-23
JSWeb

在web程式設計中，可以從瀏覽器傳送資料到伺服器並且可以接收由伺服器返回的響應資料，下面就介紹一下可以實現此功能的一個知識，那就是WebSocket的使用。

一.基本介紹:

語法結構:

[JavaScript] 純文字檢視 複製程式碼
var Socket = new WebSocket(url, [protocal] );

以上是建立一個WebSocket物件例項。

引數解析:

1.url:必需，規定要連線的url地址。

2.protocal:可選，規定伺服器支援的協議。

WebSocket的相關屬性:

1.Socket.readyState屬性:

readyState的代表的ReadOnly屬性的連線狀態。

它可以有以下值： 

0:表示該連線尚未建立。

1:表示連線建立和溝通是可能的。

2:表示連線是通過將結束握手。

3:表示連線已關閉或無法開啟。

2.Socket.bufferedAmount:

讀屬性的bufferedAmount代表文字的位元組數,utf - 8的排隊使用send()方法。

Socket事件相關:

1.Socket.onopen事件:此事件發生在套接字建立連線。

2.Socket.onmessage事件:此事件發生時，客戶端收到來自伺服器的資料。

3.Socket.onerror事件:此事件發生時有任何通訊錯誤。

4.Socket.onclose事件:此事件發生在連線關閉。

Socket方法:

1.Socket.send()方法:用來連線傳輸資料。 

2.Socket.close()方法:將被用於終止任何現有的連線。 

二.程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title> 
<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>

相關文章