前端常見知識(shí)四之webscoket

1. 概覽

1）WebSocket 它的最大特點(diǎn)就是，服務(wù)器可以主動(dòng)向客戶端推送信息，客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息，是真正的雙向平等對(duì)話，屬于服務(wù)器推送技術(shù)的一種。（誕生在2008年，2011年成為國際標(biāo)準(zhǔn)）

2. 其他特點(diǎn)包括：

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

3. 實(shí)例

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 對(duì)象作為一個(gè)構(gòu)造函數(shù)，用于新建 WebSocket 實(shí)例

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

• webSocket.readyState
  readyState屬性返回實(shí)例對(duì)象的當(dāng)前狀態(tài)，共有四種：
  CONNECTING：值為0，表示正在連接。
  OPEN：值為1，表示連接成功，可以通信了。
  CLOSING：值為2，表示連接正在關(guān)閉。
  CLOSED：值為3，表示連接已經(jīng)關(guān)閉，或者打開連接失敗

• webSocket.onopen
  實(shí)例對(duì)象的onopen屬性，用于指定連接成功后的回調(diào)函數(shù)。

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

• webSocket.onclose
  實(shí)例對(duì)象的onclose屬性，用于指定連接關(guān)閉后的回調(diào)函數(shù)。

  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
  實(shí)例對(duì)象的onmessage屬性，用于指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)。

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

• webSocket.send()
  實(shí)例對(duì)象的send()方法用于向服務(wù)器發(fā)送數(shù)據(jù)。

  ws.send('your message');

• webSocket.bufferedAmount
  實(shí)例對(duì)象的bufferedAmount屬性，表示還有多少字節(jié)的二進(jìn)制數(shù)據(jù)沒有發(fā)送出去。它可以用來判斷發(fā)送是否結(jié)束。

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

• webSocket.onerror
  實(shí)例對(duì)象的onerror屬性，用于指定報(bào)錯(cuò)時(shí)的回調(diào)函數(shù)。

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

原文請(qǐng)移步：WebSocket 教程

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。