摘要：接口用于接收服務(wù)器發(fā)送的事件。因此，是目前來說最佳的選擇。最大特點就是，服務(wù)器可以主動向客戶端推送消息，客戶端也可以主動向服務(wù)器發(fā)送信息，是一種不受限的全雙工通信。若是，則交給的回調(diào)函數(shù)處理，否則，還是走正常的回調(diào)的路子。

傳統(tǒng)的http協(xié)議有一個根本性的缺陷，那就是請求只能由客戶端向服務(wù)器發(fā)起，服務(wù)器接收到請求后再進行響應(yīng)，把數(shù)據(jù)返回給客戶端。也就是說，服務(wù)器是沒有辦法主動向客戶端傳送消息的。

這樣一來，如果服務(wù)器有狀態(tài)是頻繁變化的，那么，客戶端想要實時獲悉這些狀態(tài)勢必非常麻煩。如在線多人游戲，聊天室等。

一種可行的解決方案是使用輪詢。輪詢是指瀏覽器通過JavaScript啟動一個定時器，然后以固定的間隔給服務(wù)器發(fā)請求，詢問服務(wù)器有沒有新消息。

這種機制不僅效率低下，實時性不夠，而且頻繁地發(fā)起請求也會給服務(wù)器帶來極大的壓力。

另外一種比較靠譜的技術(shù)是HTML5的EventSource。EventSource 接口用于接收服務(wù)器發(fā)送的事件。它通過HTTP連接到一個服務(wù)器，以text/event-stream 格式接收事件, 不關(guān)閉連接。

相對于WebSocket，這種技術(shù)要簡單很多，但是其只是從服務(wù)器端往客戶端單向傳輸數(shù)據(jù)，并不能實現(xiàn)真正意義上的全雙工通信。因此，WebSocket是目前來說最佳的選擇。

有興趣了解EventSource的小伙伴可以點擊這里

WebSocket是HTML5新增的協(xié)議，其誕生于2008年。最大特點就是，服務(wù)器可以主動向客戶端推送消息，客戶端也可以主動向服務(wù)器發(fā)送信息，是一種不受限的全雙工通信。

該協(xié)議有以下特征：

握手階段利用了HTTP協(xié)議來建立連接，因此WebSocket連接必須由瀏覽器發(fā)起。

建立在 TCP 協(xié)議之上，服務(wù)器端的實現(xiàn)比較容易。

其可以接收和發(fā)送的數(shù)據(jù)有兩種，一種是文本，一種是二進制數(shù)據(jù)（blob對象或Arraybuffer對象）。一般情況下，我們可以發(fā)送JSON格式的文本，這樣，在瀏覽器處理起來就十分容易。

數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。

請求是以ws://為開頭的地址（如果加密，則為wss://）。

WebSocket協(xié)議本身不要求同源策略，也就是某個地址為"http://a.com"的網(wǎng)頁可以通過WebSocket連接到"ws://b.com"。但是，瀏覽器會發(fā)送Origin的HTTP頭給服務(wù)器，服務(wù)器可以根據(jù)Origin拒絕這個WebSocket請求。

Chrome

Firefox

IE >= 10

Sarafi >= 6

Android >= 4.4

iOS >= 8

不同的編程語言和框架，實現(xiàn)方式各有不同。這里主要講一下用node如何實現(xiàn)。

node常用的實現(xiàn)有一下幾種：

Socket.IO

WebSocket-Node

μWebSockets

具體如何使用可以查看它們各自的api。下面，我要詳細介紹的是另一個WebSocket模塊ws。

通過npm install ws --save之后，我們就可以可以編寫一個簡單WebSocket服務(wù)器程序。

// 首先導(dǎo)入ws模塊
let WebSocket = require("ws");

// 通過ws模塊的Server類實例化一個websocket服務(wù)器
let webSocketServer = new WebSocket.Server({
  port: 8030
}, err => {
  console.log("The WebSocket Server already running on: 8030");
});

// 監(jiān)聽客戶端請求接入的connection事件，連接建立后，回調(diào)函數(shù)中會傳入這個WebSocket連接實例
webSocketServer.on("connection", ws => {
  console.log(`Server is connected`)
  // 對于每個WebSocket連接，可以綁定監(jiān)聽某些事件來進行不同的處理。這里，通過響應(yīng)message事件，在收到客戶端發(fā)來消息后再返回一個消息過去。
  ws.on("message", mes => {
    console.log(`Message sent by client: ${mes}`);
    ws.send(`data responded by Server: ${mes}`, err => {
      if (err) {
        console.log(`Server error: ${err}`);
      }
    })
  })
})

也可以對http服務(wù)器進行拓展，在其基礎(chǔ)上建立WebSocket服務(wù)器。

const Koa = require("koa");
const WebSocket = require("ws");
const bodyParser = require("koa-bodyparser");
const controller = require("./controller.js");

const server = new Koa();

const webSocketServer = new WebSocket.Server({server}, () => console.log("The WebSocket Server already running on: 8030"));

// 為websocket服務(wù)器添加一個broadcast()方法
webSocketServer.broadcast = data => {
    // 通過遍歷webSocketServer.clients，找到所有與該服務(wù)器成功建立websocket連接的客戶端，發(fā)送同一條消息
    for (const client of webSocketServer.clients) {
        if (client.readyState === WebSocket.OPEN) {
            client.send(data, err => console.log(`Server error: ${err}`));
        }
    }
}

webSocketServer.on("connection", ws => {
    console.log(`Server is connected`);
    ws.on("message", mes => {
        console.log(`Message sent by client: ${mes}`);
        // 接受到其中一個客戶端發(fā)來的消息后，廣播給所有同時連接過來的客戶端
        const data = {
            message: mes
        }
        webSocketServer.broadcast(JSON.stringify(data))
    })
})

server.use(bodyParser());

server.use(controller());

server.listen(8030);
console.log("server running on 8030...");

現(xiàn)在，websocket服務(wù)器與http服務(wù)器同時使用8030端口。當有一個請求發(fā)送過來，首先會判斷其是否ws請求。若是，則交給WebSocketServer的回調(diào)函數(shù)處理，否則，還是走正常的http server回調(diào)的路子。

另外，我們注意到，這里還給WebSocketServer添加了一個broadcast()方法，用于將消息廣播到所有與該服務(wù)器成功建立WebSocket連接的客戶端上。

每當從其中一個客戶端收到一條消息，就將該消息發(fā)送到所有WebSocket連接上，基于這種方式，我們就可以搭建一個聊天室應(yīng)用的后臺服務(wù)。

ws模塊的完整使用方法請看這里

客戶端要創(chuàng)建一個WebSocket連接就比較簡單了。下面是一個簡單的事例：

// 創(chuàng)建一個WebSocket連接:
var ws = new WebSocket("ws://localhost:8030/ws");

ws.onopen = function(event) { 
  console.log("Connection open"); 
  // 給服務(wù)器發(fā)送一個消息:
  ws.send("Hello WebSocket!");
};

// 響應(yīng)onmessage事件:
ws.onmessage = function(event) { 
  console.log(event.data); 
};

// 也可以指定接收的二進制數(shù)據(jù)類型為blob對象
ws.binaryType = "blob";
ws.onmessage = function(event) {
  console.log(event.data.size);
};

// 或

// 指定接收的二進制數(shù)據(jù)類型為ArrayBuffer對象
ws.binaryType = "arraybuffer";
ws.onmessage = function(event) {
  console.log(event.data.byteLength);
};

詳細的屬性和方法可以看這里

另外，使用ws模塊提供的WebSocket構(gòu)造函數(shù)也可以充當客戶端創(chuàng)建連接。

let ws = new WebSocket("ws://localhost:8030/ws");

// 打開WebSocket連接后立刻發(fā)送一條消息
ws.on("open", () => {
    console.log(`Client open`);
    ws.send("Hello WebSocket!");
});

// 響應(yīng)收到的消息
ws.on("message", mes => {
    console.log(mes);
});

http://www.ruanyifeng.com/blo...

https://www.liaoxuefeng.com/w...

http://es6.ruanyifeng.com/#do...

https://developer.mozilla.org...