摘要：服務(wù)器推遲響應(yīng)，直到發(fā)生更改更新或超時。旨在取代現(xiàn)有的雙向通信技術(shù)。只要我們對套接字事件和有了充分的了解，理解和實現(xiàn)就非常簡單。

翻譯：瘋狂的技術(shù)宅
原文：blog.logrocket.com/websockets-…

Web 為了支持客戶端和服務(wù)器之間的全雙工（或雙向）通信已經(jīng)走過了很長的路。這是 WebSocket 協(xié)議的主要目的：通過單個 TCP 套接字連接在客戶端和服務(wù)器之間提供持久的實時通信。

WebSocket 協(xié)議只有兩個議程：1）打開握手，2）幫助數(shù)據(jù)傳輸。一旦服務(wù)器和客戶端握手成功，他們就可以隨意地以較少的開銷相互發(fā)送數(shù)據(jù)。

WebSocket 通信使用WS（端口80）或WSS（端口443）協(xié)議在單個 TCP 套接字上進行。根據(jù) Can I Use，撰寫本文時除了 Opera Mini 之外幾乎所有的瀏覽器支持 WebSockets 。

從歷史上看，創(chuàng)建需要實時數(shù)據(jù)通訊（如游戲或聊天應(yīng)用程序）的 Web 應(yīng)用需要濫用 HTTP 協(xié)議來建立雙向數(shù)據(jù)傳輸。盡管有許多種方法用于實現(xiàn)實時功能，但沒有一種方法與 WebSockets 一樣高效。 HTTP 輪詢、HTTP流、Comet、SSE —— 它們都有自己的缺點。

HTTP 輪詢

解決問題的第一個嘗試是定期輪詢服務(wù)器。 HTTP 長輪詢生命周期如下：

客戶端發(fā)出請求并一直等待響應(yīng)。

服務(wù)器推遲響應(yīng)，直到發(fā)生更改、更新或超時。請求保持“掛起”，直到服務(wù)器有東西返回客戶端。

當(dāng)服務(wù)器端有一些更改或更新時，它會將響應(yīng)發(fā)送回客戶端。

客戶端發(fā)送新的長輪詢請求以偵聽下一組更改。

長輪詢中存在很多漏洞 —— 標頭開銷、延遲、超時、緩存等等。

HTTP 流式傳輸

這種機制減少了網(wǎng)絡(luò)延遲的痛苦，因為初始請求無限期地保持打開狀態(tài)。即使在服務(wù)器推送數(shù)據(jù)之后，請求也永遠不會終止。 HTTP 流中的前三步生命周期方法與 HTTP 輪詢是相同的。

但是，當(dāng)響應(yīng)被發(fā)送回客戶端時，請求永遠不會終止，服務(wù)器保持連接打開狀態(tài)，并在發(fā)生更改時發(fā)送新的更新。

服務(wù)器發(fā)送事件（SSE）

使用 SSE，服務(wù)器將數(shù)據(jù)推送到客戶端。聊天或游戲應(yīng)用不能完全依賴 SSE。 SSE 的完美用例是類似 Facebook 的新聞 Feed：每當(dāng)有新帖發(fā)布時，服務(wù)器會將它們推送到時間線。 SSE 通過傳統(tǒng) HTTP 發(fā)送，并且對打開的連接數(shù)有限制。

這些方法不僅效率低下，維護它們的代碼也使開發(fā)人員感到厭倦。

WebSockets 旨在取代現(xiàn)有的雙向通信技術(shù)。當(dāng)涉及全雙工實時通信時，上述現(xiàn)有方法既不可靠也不高效。

WebSockets 類似于 SSE，但在將消息從客戶端傳回服務(wù)器方面也很優(yōu)秀。由于數(shù)據(jù)是通過單個 TCP 套接字連接提供的，因此連接限制不再是問題。

正如介紹中所提到的，WebSocket 協(xié)議只有兩個議程。讓我們看看 WebSockets 如何實現(xiàn)這些議程。為此我將分析一個 Node.js 服務(wù)器并將其連接到使用 React.js 構(gòu)建的客戶端上。

在服務(wù)器級別創(chuàng)建握手

我們可以用單個端口來分別提供 HTTP 服務(wù)和 WebSocket 服務(wù)。下面的代碼顯示了一個簡單的 HTTP 服務(wù)器的創(chuàng)建過程。一旦創(chuàng)建，我們會將 WebSocket 服務(wù)器綁定到 HTTP 端口：

const webSocketsServerPort = 8000;
const webSocketServer = require("websocket").server;
const http = require("http");
// Spinning the http server and the websocket server.
const server = http.createServer();
server.listen(webSocketsServerPort);
const wsServer = new webSocketServer({
  httpServer: server
});

創(chuàng)建 WebSocket 服務(wù)器后，我們需要在接收來自客戶端的請求時接受握手。我將所有連接的客戶端作為對象保存在代碼中，并在收請從瀏覽器發(fā)來的求時使用唯一的用戶ID。

// I"m maintaining all active connections in this object
const clients = {};

// This code generates unique userid for everyuser.
const getUniqueID = () => {
  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return s4() + s4() + "-" + s4();
};

wsServer.on("request", function(request) {
  var userID = getUniqueID();
  console.log((new Date()) + " Recieved a new connection from origin " + request.origin + ".");
  // You can rewrite this part of the code to accept only the requests from allowed origin
  const connection = request.accept(null, request.origin);
  clients[userID] = connection;
  console.log("connected: " + userID + " in " + Object.getOwnPropertyNames(clients))
});

那么，當(dāng)接受連接時會發(fā)生什么？

在發(fā)送常規(guī) HTTP 請求以建立連接時，在請求頭中，客戶端發(fā)送 *Sec-WebSocket-Key*。服務(wù)器對此值進行編碼和散列，并添加預(yù)定義的 GUID。它回應(yīng)了服務(wù)器發(fā)送的握手中 *Sec-WebSocket-Accept*中生成的值。

一旦請求在服務(wù)器中被接受（在必要驗證之后），就完成了握手，其狀態(tài)代碼為 101。如果在瀏覽器中看到除狀態(tài)碼 101 之外的任何內(nèi)容，則意味著 WebSocket 升級失敗，并且將遵循正常的 HTTP 語義。

*Sec-WebSocket-Accept* 頭字段指示服務(wù)器是否愿意接受連接。此外如果響應(yīng)缺少 *Upgrade* 頭字段，或者 *Upgrade* 不等于 websocket，則表示 WebSocket 連接失敗。

成功的服務(wù)器握手如下所示：

HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
Connection: Upgrade
Sec-WebSocket-Accept: Nn/XHq0wK1oO5RTtriEWwR4F7Zw=
Upgrade: websocket

在客戶端級別創(chuàng)建握手

在客戶端，我使用與服務(wù)器中的相同 WebSocket 包來建立與服務(wù)器的連接（Web IDL 中的 WebSocket API 正在由W3C 進行標準化）。一旦服務(wù)器接受請求，我們將會在瀏覽器控制臺上看到 WebSocket Client Connected。

這是創(chuàng)建與服務(wù)器的連接的初始腳手架：

import React, { Component } from "react";
import { w3cwebsocket as W3CWebSocket } from "websocket";

const client = new W3CWebSocket("ws://127.0.0.1:8000");

class App extends Component {
  componentWillMount() {
    client.onopen = () => {
      console.log("WebSocket Client Connected");
    };
    client.onmessage = (message) => {
      console.log(message);
    };
  }
  
  render() {
    return (
      <div>
        Practical Intro To WebSockets.
      div>
    );
  }
}

export default App;

客戶端發(fā)送以下標頭來建立握手：

HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: vISxbQhM64Vzcr/CD7WHnw==
Origin: http://localhost:3000
Sec-WebSocket-Version: 13

現(xiàn)在客戶端和服務(wù)器通過相互握手進行了連接，WebSocket 連接可以在接收消息時傳輸消息，從而實現(xiàn) WebSocket 協(xié)議的第二個議程。

我將編寫一個基本的實時文檔編輯器，用戶可以將它們連接在一起并編輯文檔。我跟蹤了兩個事件：

**用戶活動：**每次用戶加入或離開時，我都會將消息廣播給所有連接其他的客戶端。

**內(nèi)容更改：**每次修改編輯器中的內(nèi)容時，都會向所有連接的其他客戶端廣播。

該協(xié)議允許我們用二進制數(shù)據(jù)或 UTF-8 發(fā)送和接收消息（注意：傳輸和轉(zhuǎn)換 UTF-8 的開銷較小）。

只要我們對套接字事件onopen、onclose 和 onmessage有了充分的了解，理解和實現(xiàn) WebSockets 就非常簡單。客戶端和服務(wù)器端的術(shù)語相同。

在客戶端發(fā)送和接收消息

在客戶端，當(dāng)新用戶加入或內(nèi)容更改時，我們用 client.send 向服務(wù)器發(fā)消息，以將新信息提供給服務(wù)器。

/* When a user joins, I notify the
server that a new user has joined to edit the document. */
logInUser = () => {
  const username = this.username.value;
  if (username.trim()) {
    const data = {
      username
    };
    this.setState({
      ...data
    }, () => {
      client.send(JSON.stringify({
        ...data,
        type: "userevent"
      }));
    });
  }
}

/* When content changes, we send the
current content of the editor to the server. */
onEditorStateChange = (text) => {
 client.send(JSON.stringify({
   type: "contentchange",
   username: this.state.username,
   content: text
 }));
};

我們跟蹤的事件是：用戶加入和內(nèi)容更改。

從服務(wù)器接收消息非常簡單：

componentWillMount() {
  client.onopen = () => {
   console.log("WebSocket Client Connected");
  };
  client.onmessage = (message) => {
    const dataFromServer = JSON.parse(message.data);
    const stateToChange = {};
    if (dataFromServer.type === "userevent") {
      stateToChange.currentUsers = Object.values(dataFromServer.data.users);
    } else if (dataFromServer.type === "contentchange") {
      stateToChange.text = dataFromServer.data.editorContent || contentDefaultMessage;
    }
    stateToChange.userActivity = dataFromServer.data.userActivity;
    this.setState({
      ...stateToChange
    });
  };
}

在服務(wù)器端發(fā)送和偵聽消息

在服務(wù)器中，我們只需捕獲傳入的消息并將其廣播到連接到 WebSocket 的所有客戶端。這是臭名昭著的 Socket.IO 和 WebSocket 之間的差異之一：當(dāng)我們使用 WebSockets 時，我們需要手動將消息發(fā)送給所有客戶端。 Socket.IO 是一個成熟的庫，所以它自己來處理。

const sendMessage = (json) => {
  // We are sending the current data to all connected clients
  Object.keys(clients).map((client) => {
    clients[client].sendUTF(json);
  });
}

connection.on("message", function(message) {
    if (message.type === "utf8") {
      const dataFromClient = JSON.parse(message.utf8Data);
      const json = { type: dataFromClient.type };
      if (dataFromClient.type === typesDef.USER_EVENT) {
        users[userID] = dataFromClient;
        userActivity.push(`${dataFromClient.username} joined to edit the document`);
        json.data = { users, userActivity };
      } else if (dataFromClient.type === typesDef.CONTENT_CHANGE) {
        editorContent = dataFromClient.content;
        json.data = { editorContent, userActivity };
      }
      sendMessage(JSON.stringify(json));
    }
  });

將消息廣播到所有連接的客戶端。

瀏覽器關(guān)閉后會發(fā)生什么？

在這種情況下，WebSocket調(diào)用 close 事件，它允許我們編寫終止當(dāng)前用戶連接的邏輯。在我的代碼中，當(dāng)用戶離開文檔時，會向其余用戶廣播消息：

connection.on("close", function(connection) {
    console.log((new Date()) + " Peer " + userID + " disconnected.");
    const json = { type: typesDef.USER_EVENT };
    userActivity.push(`${users[userID].username} left the document`);
    json.data = { users, userActivity };
    delete clients[userID];
    delete users[userID];
    sendMessage(JSON.stringify(json));
  });

該應(yīng)用程序的源代碼位于GitHub上的 repo 中。

WebSockets 是在應(yīng)用中實現(xiàn)實時功能的最有趣和最方便的方法之一。它為我們提供了能夠充分利用全雙工通信的靈活性。我強烈建議在嘗試使用 Socket.IO 和其他可用庫之前先試試 WebSockets。

編碼快樂！