實(shí)戰(zhàn)教程

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

議程1：WebSocket在服務(wù)器和客戶端之間建立握手在服務(wù)器級(jí)別創(chuàng)建握手

我們可以用單個(gè)端口來分別提供 HTTP 服務(wù)和 WebSocket 服務(wù)。下面的代碼顯示了一個(gè)簡單的 HTTP 服務(wù)器的創(chuàng)建過程。一旦創(chuàng)建，我們會(huì)將 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ù)器后，我們需要在接收來自客戶端的請(qǐng)求時(shí)接受握手。我將所有連接的客戶端作為對(duì)象保存在代碼中，并在收請(qǐng)從瀏覽器發(fā)來的求時(shí)使用唯一的用戶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)接受連接時(shí)會(huì)發(fā)生什么？

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

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

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

在客戶端，我使用與服務(wù)器中的相同 WebSocket 包來建立與服務(wù)器的連接（Web IDL 中的 WebSocket API 正在由W3C 進(jìn)行標(biāo)準(zhǔn)化）。一旦服務(wù)器接受請(qǐng)求，我們將會(huì)在瀏覽器控制臺(tái)上看到 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ā)送以下標(biāo)頭來建立握手：

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ù)器通過相互握手進(jìn)行了連接，WebSocket 連接可以在接收消息時(shí)傳輸消息，從而實(shí)現(xiàn) WebSocket 協(xié)議的第二個(gè)議程。

議程2：實(shí)時(shí)信息傳輸

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

用戶活動(dòng)：每次用戶加入或離開時(shí)，我都會(huì)將消息廣播給所有連接其他的客戶端。內(nèi)容更改：每次修改編輯器中的內(nèi)容時(shí)，都會(huì)向所有連接的其他客戶端廣播。

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

只要我們對(duì)套接字事件onopen、onclose 和 onmessage有了充分的了解，理解和實(shí)現(xiàn) WebSockets 就非常簡單?？蛻舳撕头?wù)器端的術(shù)語相同。

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

在客戶端，當(dāng)新用戶加入或內(nèi)容更改時(shí)，我們用 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",
   .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 時(shí)，我們需要手動(dòng)將消息發(fā)送給所有客戶端。 Socket.IO 是一個(gè)成熟的庫，所以它自己來處理。

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)閉后會(huì)發(fā)生什么？

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

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 中。

結(jié)論

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

編碼快樂！

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程教學(xué)?。?/p>

更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問題，請(qǐng)?jiān)L問西部數(shù)碼官網(wǎng)：m.ps-sw.cn





猜你還會(huì)喜歡下面的內(nèi)容

• 做一個(gè)獨(dú)立站需要多少錢
• 西部數(shù)碼怎樣搶注域名
• B2C 電子商務(wù)網(wǎng)站如何做推廣和優(yōu)化
• 網(wǎng)站推廣增加外鏈最好的方法
• 新手站長淺談：如何在線提升產(chǎn)品轉(zhuǎn)化率
• 網(wǎng)站策劃：九大思維理念助你策劃能力提升
• 如何高效輸出移動(dòng)app產(chǎn)品原型？
• 為什么說產(chǎn)品思考是進(jìn)行用戶體驗(yàn)設(shè)計(jì)時(shí)所不可或缺的？
• 六套 App：構(gòu)建我的產(chǎn)品設(shè)計(jì)工作流
• 如果Vine模式重來，大概就是Biu這個(gè)樣子
• 新手入門：如何做需求分析
• 產(chǎn)品狗的日常：如何更好的去分解功能點(diǎn)
• 簡單明了丨如何寫出好的PRD
• 產(chǎn)品必修課——輕松搞定UML
• 如果你是個(gè)苦逼的App測(cè)試人員，這款產(chǎn)品或許能拯救你
• 手把手教你制作實(shí)用美觀的交互設(shè)計(jì)文檔

熱門標(biāo)簽

其他問題云服務(wù)器問題域名及賬戶問題企業(yè)郵局市場(chǎng)咨詢云服務(wù)器云建站/云站群/小程序虛擬主機(jī)網(wǎng)絡(luò)知識(shí)企業(yè)郵箱域名注冊(cè)域名備案域名商標(biāo)注冊(cè)云主機(jī)更多標(biāo)簽...

大家感興趣的內(nèi)容