前端知識點——Web Sockets

前端知識點——Web Sockets

本系列文章是我在實習面試之前的對自己掌握的知識點的總結，就從一直不太熟悉的webSockets開始吧～

WebSockets的第一印象：
可以創建和服務器進行雙向會話的高級技術，取代了曾經使用的輪詢方法。

API

• WebSocket：用於連接WebSocket服務器的對象
• CloseEvent：關閉連接時WebSocket對象觸發的事件
• MessageEvent：從服務器獲取到消息的時候，WebSocket觸發的事件

WebSocket對象

WebSocket對象用於創建和管理WebSockets連接，並通過這個連接發送和接受

參數：

• url：要連接的url,ws或wss
• protocols：協議名字字符串或數組，子協議，默認爲空

異常：

• SECURITY_ERR：表示試圖連接的端口被屏蔽

方法：

• WebSocket.close([code,[reason]])

  • 關閉WebSocket連接或停止正在進行的連接請求
  • 參數
    • code：關閉連接的狀態號，默認爲1000
    • reason：字符串，連接被關閉的原因
  • 異常
    • INVALID_ACCESS_ERR：無效的code
    • SYNTAX_ERR：reason太長

• WebSocket.send(data)

  • 通過連接向服務器發送數據
  • 參數
    • data：發送的數據
  • 異常
    • INVALID_STATE_ERR：當前的連接狀態不是open
    • SYNTAX_ERR：數據不合法

屬性：

屬性名	類型	描述
binaryType	string	傳輸的二進制內容類型，blob/arrayBuffer
bufferedAmount	long	調用send方法後，隊列中等等待數據的大小，發送後爲0
extensions	string	服務器選定的擴展
onclose	EventListener	監聽close
onerror	EventListener	監聽error
onmessage	EventListener	監聽message，消息到達觸發
onopen	EventListener	監聽連接打開事件，readyState爲open時觸發
protpcol	string	服務器選定的子協議的字符串
readyState	short	連接的當前狀態
url	string	傳入構造器的url

readyState常量：

常量	值	描述
CONNECTING	0	連接尚未開啓
OPEN	1	連接已經開啓，準備通信
CLOSING	2	連接正在關閉
CLOSED	3	連接已經關閉或者無法建立

例子

url來自http://www.blue-zero.com/WebSocket/

// Create WebSocket connection.
const socket = new WebSocket('ws://121.40.165.18:8800');

// Connection opened
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data);
});

// Listen for closed
socket.addEventListener('close', function (event) {
  console.log('Message from server ', event.data);
});

同時WebSocket需要服務器端支持，比如Node.js端可以使用以下常用的庫：

• Socket.IO
• WebSocket-Node
• ws

Socket.IO例

客戶端

let socket = io('http://localhost');
socket.on('news', function (data) {
  console.log(data);
  socket.emit('clientMsg', { my: 'data' });
});

服務端

首先要安裝socket.io模塊

npm install socket.io --save

或者在本目錄下執行 npm install

在 serve.js 中粘貼如下代碼

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('clientMsg', function (data) {
    console.log(data);
  });
});

執行 node serve.js並訪問http://localhost:80

關於socket.io的其他API，文檔以後再補充