前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WebSockets实战:在 Node 和 React 之间进行实时通信[每日前端夜话0x6C]

WebSockets实战:在 Node 和 React 之间进行实时通信[每日前端夜话0x6C]

作者头像
疯狂的技术宅
发布2019-05-21 22:55:29
2.1K0
发布2019-05-21 22:55:29
举报
文章被收录于专栏:京程一灯

每日前端夜话0x6C

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:2506 字

预计阅读时间: 8 分钟

翻译:疯狂的技术宅

来源:logrocket

Web 为了支持客户端和服务器之间的全双工(或双向)通信已经走过了很长的路。这是 WebSocket 协议的主要目的:通过单个 TCP 套接字连接在客户端和服务器之间提供持久的实时通信。

WebSocket 协议只有两个议程:1)打开握手,2)帮助数据传输。一旦服务器和客户端握手成功,他们就可以随意地以较少的开销相互发送数据。

WebSocket 通信使用WS(端口80)或WSS(端口443)协议在单个 TCP 套接字上进行。根据 Can I Use,撰写本文时除了 Opera Mini 之外几乎所有的浏览器支持 WebSockets 。

现状

从历史上看,创建需要实时数据通讯(如游戏或聊天应用程序)的 Web 应用需要滥用 HTTP 协议来建立双向数据传输。尽管有许多种方法用于实现实时功能,但没有一种方法与 WebSockets 一样高效。 HTTP 轮询、HTTP流、Comet、SSE —— 它们都有自己的缺点。

HTTP 轮询

解决问题的第一个尝试是定期轮询服务器。 HTTP 长轮询生命周期如下:

  1. 客户端发出请求并一直等待响应。
  2. 服务器推迟响应,直到发生更改、更新或超时。请求保持“挂起”,直到服务器有东西返回客户端。
  3. 当服务器端有一些更改或更新时,它会将响应发送回客户端。
  4. 客户端发送新的长轮询请求以侦听下一组更改。

长轮询中存在很多漏洞 —— 标头开销、延迟、超时、缓存等等。

HTTP 流式传输

这种机制减少了网络延迟的痛苦,因为初始请求无限期地保持打开状态。即使在服务器推送数据之后,请求也永远不会终止。 HTTP 流中的前三步生命周期方法与 HTTP 轮询是相同的。

但是,当响应被发送回客户端时,请求永远不会终止,服务器保持连接打开状态,并在发生更改时发送新的更新。

服务器发送事件(SSE)

使用 SSE,服务器将数据推送到客户端。聊天或游戏应用不能完全依赖 SSE。 SSE 的完美用例是类似 Facebook 的新闻 Feed:每当有新帖发布时,服务器会将它们推送到时间线。 SSE 通过传统 HTTP 发送,并且对打开的连接数有限制。

这些方法不仅效率低下,维护它们的代码也使开发人员感到厌倦。

WebSocket

WebSockets 旨在取代现有的双向通信技术。当涉及全双工实时通信时,上述现有方法既不可靠也不高效。

WebSockets 类似于 SSE,但在将消息从客户端传回服务器方面也很优秀。由于数据是通过单个 TCP 套接字连接提供的,因此连接限制不再是问题。


实战教程

正如介绍中所提到的,WebSocket 协议只有两个议程。让我们看看 WebSockets 如何实现这些议程。为此我将分析一个 Node.js 服务器并将其连接到使用 React.js 构建的客户端上。

议程1:WebSocket在服务器和客户端之间建立握手

在服务器级别创建握手

我们可以用单个端口来分别提供 HTTP 服务和 WebSocket 服务。下面的代码显示了一个简单的 HTTP 服务器的创建过程。一旦创建,我们会将 WebSocket 服务器绑定到 HTTP 端口:

代码语言:javascript
复制
1const webSocketsServerPort = 8000;
2const webSocketServer = require('websocket').server;
3const http = require('http');
4// Spinning the http server and the websocket server.
5const server = http.createServer();
6server.listen(webSocketsServerPort);
7const wsServer = new webSocketServer({
8  httpServer: server
9});

创建 WebSocket 服务器后,我们需要在接收来自客户端的请求时接受握手。我将所有连接的客户端作为对象保存在代码中,并在收请从浏览器发来的求时使用唯一的用户ID。

代码语言:javascript
复制
 1// I'm maintaining all active connections in this object
 2const clients = {};
 3
 4// This code generates unique userid for everyuser.
 5const getUniqueID = () => {
 6  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
 7  return s4() + s4() + '-' + s4();
 8};
 9
10wsServer.on('request', function(request) {
11  var userID = getUniqueID();
12  console.log((new Date()) + ' Recieved a new connection from origin ' + request.origin + '.');
13  // You can rewrite this part of the code to accept only the requests from allowed origin
14  const connection = request.accept(null, request.origin);
15  clients[userID] = connection;
16  console.log('connected: ' + userID + ' in ' + Object.getOwnPropertyNames(clients))
17});

那么,当接受连接时会发生什么?

在发送常规 HTTP 请求以建立连接时,在请求头中,客户端发送 *Sec-WebSocket-Key*。服务器对此值进行编码和散列,并添加预定义的 GUID。它回应了服务器发送的握手中 *Sec-WebSocket-Accept*中生成的值。

一旦请求在服务器中被接受(在必要验证之后),就完成了握手,其状态代码为 101。如果在浏览器中看到除状态码 101 之外的任何内容,则意味着 WebSocket 升级失败,并且将遵循正常的 HTTP 语义。

*Sec-WebSocket-Accept* 头字段指示服务器是否愿意接受连接。此外如果响应缺少 *Upgrade* 头字段,或者 *Upgrade* 不等于 websocket,则表示 WebSocket 连接失败。

成功的服务器握手如下所示:

代码语言:javascript
复制
1HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
2Connection: Upgrade
3Sec-WebSocket-Accept: Nn/XHq0wK1oO5RTtriEWwR4F7Zw=
4Upgrade: websocket
在客户端级别创建握手

在客户端,我使用与服务器中的相同 WebSocket 包来建立与服务器的连接(Web IDL 中的 WebSocket API 正在由W3C 进行标准化)。一旦服务器接受请求,我们将会在浏览器控制台上看到 WebSocket Client Connected

这是创建与服务器的连接的初始脚手架:

代码语言:javascript
复制
 1import React, { Component } from 'react';
 2import { w3cwebsocket as W3CWebSocket } from "websocket";
 3
 4const client = new W3CWebSocket('ws://127.0.0.1:8000');
 5
 6class App extends Component {
 7  componentWillMount() {
 8    client.onopen = () => {
 9      console.log('WebSocket Client Connected');
10    };
11    client.onmessage = (message) => {
12      console.log(message);
13    };
14  }
15
16  render() {
17    return (
18      <div>
19        Practical Intro To WebSockets.
20      </div>
21    );
22  }
23}
24
25export default App;

客户端发送以下标头来建立握手:

代码语言:javascript
复制
1HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
2Upgrade: websocket
3Connection: Upgrade
4Sec-WebSocket-Key: vISxbQhM64Vzcr/CD7WHnw==
5Origin: http://localhost:3000
6Sec-WebSocket-Version: 13

现在客户端和服务器通过相互握手进行了连接,WebSocket 连接可以在接收消息时传输消息,从而实现 WebSocket 协议的第二个议程。

议程2:实时信息传输

内容修改的实时流。

我将编写一个基本的实时文档编辑器,用户可以将它们连接在一起并编辑文档。我跟踪了两个事件:

  1. 用户活动:每次用户加入或离开时,我都会将消息广播给所有连接其他的客户端。
  2. 内容更改:每次修改编辑器中的内容时,都会向所有连接的其他客户端广播。

该协议允许我们用二进制数据或 UTF-8 发送和接收消息(注意:传输和转换 UTF-8 的开销较小)。

只要我们对套接字事件onopenoncloseonmessage有了充分的了解,理解和实现 WebSockets 就非常简单。客户端和服务器端的术语相同。

在客户端发送和接收消息

在客户端,当新用户加入或内容更改时,我们用 client.send 向服务器发消息,以将新信息提供给服务器。

代码语言:javascript
复制
 1/* When a user joins, I notify the
 2server that a new user has joined to edit the document. */
 3logInUser = () => {
 4  const username = this.username.value;
 5  if (username.trim()) {
 6    const data = {
 7      username
 8    };
 9    this.setState({
10      ...data
11    }, () => {
12      client.send(JSON.stringify({
13        ...data,
14        type: "userevent"
15      }));
16    });
17  }
18}
19
20/* When content changes, we send the
21current content of the editor to the server. */
22onEditorStateChange = (text) => {
23 client.send(JSON.stringify({
24   type: "contentchange",
25   username: this.state.username,
26   content: text
27 }));
28};

我们跟踪的事件是:用户加入和内容更改。

从服务器接收消息非常简单:

代码语言:javascript
复制
 1componentWillMount() {
 2  client.onopen = () => {
 3   console.log('WebSocket Client Connected');
 4  };
 5  client.onmessage = (message) => {
 6    const dataFromServer = JSON.parse(message.data);
 7    const stateToChange = {};
 8    if (dataFromServer.type === "userevent") {
 9      stateToChange.currentUsers = Object.values(dataFromServer.data.users);
10    } else if (dataFromServer.type === "contentchange") {
11      stateToChange.text = dataFromServer.data.editorContent || contentDefaultMessage;
12    }
13    stateToChange.userActivity = dataFromServer.data.userActivity;
14    this.setState({
15      ...stateToChange
16    });
17  };
18}
在服务器端发送和侦听消息

在服务器中,我们只需捕获传入的消息并将其广播到连接到 WebSocket 的所有客户端。这是臭名昭着的 Socket.IO 和 WebSocket 之间的差异之一:当我们使用 WebSockets 时,我们需要手动将消息发送给所有客户端。 Socket.IO 是一个成熟的库,所以它自己来处理。

代码语言:javascript
复制
 1const sendMessage = (json) => {
 2  // We are sending the current data to all connected clients
 3  Object.keys(clients).map((client) => {
 4    clients[client].sendUTF(json);
 5  });
 6}
 7
 8connection.on('message', function(message) {
 9    if (message.type === 'utf8') {
10      const dataFromClient = JSON.parse(message.utf8Data);
11      const json = { type: dataFromClient.type };
12      if (dataFromClient.type === typesDef.USER_EVENT) {
13        users[userID] = dataFromClient;
14        userActivity.push(`${dataFromClient.username} joined to edit the document`);
15        json.data = { users, userActivity };
16      } else if (dataFromClient.type === typesDef.CONTENT_CHANGE) {
17        editorContent = dataFromClient.content;
18        json.data = { editorContent, userActivity };
19      }
20      sendMessage(JSON.stringify(json));
21    }
22  });

将消息广播到所有连接的客户端。

浏览器关闭后会发生什么?

在这种情况下,WebSocket调用 close 事件,它允许我们编写终止当前用户连接的逻辑。在我的代码中,当用户离开文档时,会向其余用户广播消息:

代码语言:javascript
复制
1connection.on('close', function(connection) {
2    console.log((new Date()) + " Peer " + userID + " disconnected.");
3    const json = { type: typesDef.USER_EVENT };
4    userActivity.push(`${users[userID].username} left the document`);
5    json.data = { users, userActivity };
6    delete clients[userID];
7    delete users[userID];
8    sendMessage(JSON.stringify(json));
9  });

该应用程序的源代码位于GitHub上的 repo 中:

https://github.com/AvanthikaMeenakshi/node-websockets

结论

WebSockets 是在应用中实现实时功能的最有趣和最方便的方法之一。它为我们提供了能够充分利用全双工通信的灵活性。我强烈建议在尝试使用 Socket.IO 和其他可用库之前先试试 WebSockets。

编码快乐!?

原文:https://blog.logrocket.com/websockets-tutorial-how-to-go-real-time-with-node-and-react-8e4693fbf843

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

在公众号内回复“体系”查看高清大图

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

往期精选

小手一抖,资料全有。长按二维码关注前端先锋,阅读更多技术文章和业界动态。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 现状
    • HTTP 轮询
      • HTTP 流式传输
        • 服务器发送事件(SSE)
        • WebSocket
        • 实战教程
        • 议程1:WebSocket在服务器和客户端之间建立握手
          • 在服务器级别创建握手
            • 在客户端级别创建握手
            • 议程2:实时信息传输
              • 在客户端发送和接收消息
                • 在服务器端发送和侦听消息
                  • 浏览器关闭后会发生什么?
                  • 结论
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档