在 React 中使用 WebSocket

======================================================================================================================================================> 我提供全栈区块链开发服务：ERC20/721 代币创建、代币销售智能合约、白名单、借贷协议、营销推荐、DAO 开发等等。

包含前端集成。

如果您需要智能合约，请联系我。
如果您需要将前端与智能合约集成，请联系我。

请访问以下链接查看我的作品、客户评价和过往案例 => https://www.muratcanyuksel.xyz

或者发送邮件至mail@muratcanyuksel.xyz
==============================================================================================================================================================>

想了解更多编程知识，请订阅我的 YouTube 频道 => https://www.youtube.com/channel/UCP1hJydcsPZCwbn8rPiohsg

我上一个项目需要用到 WebSocket 来创建一个显示实时交易数据的网站。我对 WebSocket 一窍不通，花了几个小时才勉强入门。其实，这算是入门的唯一难点；其他部分都很简单。这篇短文希望能帮助其他人节省我当初摸索基础知识所花费的时间。

网上大多数教程都会提到“require”语法。你肯定知道。当你想在JS或React的组件中使用某个工具、组件或图片时，你会写类似这样的代码：`const something = require("./folder/something")`。正如我所说，我找到的大多数教程都是从这个语法开始的，这引导你一开始就使用require语法来操作WebSocket。这完全没有必要，甚至在今天看来可能已经过时了。我不确定它是否仍然有效，但我可以肯定的是，在我撰写本文的2021年12月9日，我使用的方法运行良好。那么，废话不多说，让我们来谈谈如何使用这个协议。

本文假设您具备 Vanilla JS 和 React.js 的基本知识，知道如何处理 json 格式和异步代码。

我使用 vite 初始化我的应用（使用以下命令：npm init vite@latest，然后从菜单中选择 react），但你也可以使用你自己的结构，或者使用 create-react-app。其实都无所谓。

如需更深入了解 WebSocket，请访问javascript.info

我们将建造什么？

我们将构建一个非常简单的单页 React.js 应用程序，它会从 bitstamp.net 获取连续数据并将其显示在页面上。数据会不断变化。

你使用哪种服务其实并不重要，只要是 WebSocket 就行，其余部分都是普通的 Javascript。

构建应用程序

我们首先通过编写以下代码连接到 Bitstamp 的 WebSocket 协议。现在，使用这个 ws 常量，我们可以订阅 Bitstamp 网站上定义的任何频道，并从中获取连续数据。您可以在这里const ws = new WebSocket("wss://ws.bitstamp.net");找到有关频道、属性等所有信息。

现在，我们来订阅一个频道。我将订阅 oder_book_v2 频道，并指定要查看 BTC/USD 汇率。此调用在 Bitstamp 的指南中有定义。您可以根据需要更改频道和货币。以下是调用代码：

 const apiCall = {
    event: "bts:subscribe",
    data: { channel: "order_book_btcusd" },
  };

下一步是在打开时向服务器发送此调用 =>

  ws.onopen = (event) => {
    ws.send(JSON.stringify(apiCall));
  };

现在我们想对每条数据进行一些处理。所以，每当我们从服务器收到一条消息时，我们都会执行一些操作。让我们用 try/catch 编写一个异步代码。

ws.onmessage = function (event) {
const json = JSON.parse(event.data);
console.log(`[message] Data received from server: ${json}`);
try {
if ((json.event = "data")) {

        console.log(json.data);
      }
    } catch (err) {
      // whatever you wish to do with the err
    }

};

如果打开控制台，我们会看到服务器返回大量数据。就是这样。我们已经获取了数据，数据以数据流的形式传输，我们可以对它进行任何操作。就这么简单。

但我希望以特定的方式显示数据。我把代码贴出来，稍后会解释：

import React, { useState } from "react";

function  App() {
  //give an initial state so that the data won't be undefined at start
  const [bids, setBids] = useState([0]);

  const ws = new WebSocket("wss://ws.bitstamp.net");

  const apiCall = {
    event: "bts:subscribe",
    data: { channel: "order_book_btcusd" },
  };

  ws.onopen = (event) => {
    ws.send(JSON.stringify(apiCall));
  };

  ws.onmessage = function (event) {
    const json = JSON.parse(event.data);
    try {
      if ((json.event = "data")) {
        setBids(json.data.bids.slice(0, 5));
      }
    } catch (err) {
      console.log(err);
    }
  };
  //map the first 5 bids
  const firstBids = bids.map((item) => {
    return (
      <div>
        <p> {item}</p>
      </div>
    );
  });

  return <div>{firstBids}</div>;
}

export default  App;

所以，这里发生了什么？正如你所看到的，这是一个非常基础的 React.js 应用组件。我使用了 useState hook，所以也把它和 React 一起导入了。

我定义状态并赋予它一个初始值。

我按照之前指示的步骤进行操作——只是，为了方便起见，我将状态设置为 json.data.bids（bids 是实时订单通道的一个属性，在 bitstamp 的页面上有指示），并将我将接收的数据量限制为 5。

我将接收到的数据进行映射，并保存在状态中（如你所知，React 会为每个项目指定一个键。这里我不会使用它。我通常使用 uniqid，你可以自己去了解一下。）

我返回映射后的数据，瞧！如果你也做了同样的操作，你应该会在屏幕上看到正好 5 行不断变化的数据。

希望这篇文章对某些人有所帮助。

=====================================================================================================================================================> 我提供全栈区块链开发服务：ERC20/721 代币创建、代币销售智能合约、白名单、借贷协议、营销推荐、DAO 开发等等。

包含前端集成。

如果您需要智能合约，请联系我。
如果您需要将前端与智能合约集成，请联系我。

请访问以下链接查看我的作品、客户评价和过往案例 => https://www.muratcanyuksel.xyz

或者发送邮件至mail@muratcanyuksel.xyz
==============================================================================================================================================================>

祝一切顺利，继续编程！

想了解更多编程知识，请订阅我的 YouTube 频道 => https://www.youtube.com/channel/UCP1hJydcsPZCwbn8rPiohsg