前端常見知識四之webscoket

1. 概覽

1）WebSocket 它的最大特點就是，服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話，屬于服務器推送技術的一種。（誕生在2008年，2011年成為國際標準）

2. 其他特點包括：

（1）建立在 TCP 協議之上，服務器端的實現比較容易。
（2）與 HTTP 協議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
（3）數據格式比較輕量，性能開銷小，通信高效。
（4）可以發送文本，也可以發送二進制數據。
（5）沒有同源限制，客戶端可以與任意服務器通信。
（6）協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。（ws://example.com:80/some/path）

3. 實例

var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); };ws.onmessage = function(evt) {console.log( "Received Message: " + evt.data);ws.close(); };ws.onclose = function(evt) {console.log("Connection closed."); };

4. 客戶端的 API：

• WebSocket 對象作為一個構造函數，用于新建 WebSocket 實例

  var ws = new WebSocket('ws://localhost:8080');

• webSocket.readyState
  readyState屬性返回實例對象的當前狀態，共有四種：
  CONNECTING：值為0，表示正在連接。
  OPEN：值為1，表示連接成功，可以通信了。
  CLOSING：值為2，表示連接正在關閉。
  CLOSED：值為3，表示連接已經關閉，或者打開連接失敗

• webSocket.onopen
  實例對象的onopen屬性，用于指定連接成功后的回調函數。

  ws.onopen = function () {ws.send('Hello Server!'); } //如果要指定多個回調函數，可以使用addEventListener方法。 addEventListener('open', function (event) {ws.send('Hello Server!'); })

• webSocket.onclose
  實例對象的onclose屬性，用于指定連接關閉后的回調函數。

  ws.onclose = function(event) {var code = event.code;var reason = event.reason;var wasClean = event.wasClean;// handle close event };ws.addEventListener("close", function(event) {var code = event.code;var reason = event.reason;var wasClean = event.wasClean;// handle close event });

• webSocket.onmessage
  實例對象的onmessage屬性，用于指定收到服務器數據后的回調函數。

  ws.onmessage = function(event) {var data = event.data;// 處理數據 };ws.addEventListener("message", function(event) {var data = event.data;// 處理數據 });

• webSocket.send()
  實例對象的send()方法用于向服務器發送數據。

  ws.send('your message');

• webSocket.bufferedAmount
  實例對象的bufferedAmount屬性，表示還有多少字節的二進制數據沒有發送出去。它可以用來判斷發送是否結束。

  var data = new ArrayBuffer(10000000); socket.send(data);if (socket.bufferedAmount === 0) {// 發送完畢 } else {// 發送還沒結束 }

• webSocket.onerror
  實例對象的onerror屬性，用于指定報錯時的回調函數。

  socket.onerror = function(event) {// handle error event };socket.addEventListener("error", function(event) {// handle error event });

原文請移步：WebSocket 教程

總結

以上是生活随笔為你收集整理的前端常见知识点四之webscoket的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。