如何在 React 项目中使用 WebSocket？

WebSocket 是一种在 Web 应用程序中实现双向通信的技术，可以使客户端和服务器之间实时传输数据。在 React 项目中使用 WebSocket 可以极大地提高应用程序的实时性和交互性。本文将介绍如何在 React 项目中使用 WebSocket。

WebSocket 是什么？

WebSocket 是一种在 Web 应用程序中实现双向通信的技术。传统的 HTTP 请求是单向的，即客户端向服务器发起请求，服务器返回响应。而 WebSocket 允许客户端和服务器之间建立持久性连接，从而使得客户端和服务器之间可以实时地传输数据，而不需要每次都进行请求和响应。

在 React 项目中使用 WebSocket

在 React 项目中使用 WebSocket 需要先安装 websocket 库。可以使用 npm 或 yarn 安装：

npm install websocket

或者

yarn add websocket

安装完成后，可以在 React 组件中引入 WebSocket：

import { w3cwebsocket as WebSocket } from 'websocket';

建立 WebSocket 连接

要建立 WebSocket 连接，需要实例化 WebSocket 对象并指定服务器的地址和端口号。可以在 React 组件的 componentDidMount 方法中创建 WebSocket 连接：

componentDidMount() {
  const client = new WebSocket('ws://localhost:8000/');
  this.setState({ client });
}

上面的代码在组件加载完成后创建了一个 WebSocket 连接，并将 WebSocket 对象存储在组件状态中。

发送和接收消息

要发送消息，可以使用 WebSocket 对象的 send 方法。例如，要发送一个字符串消息，可以这样写：

this.state.client.send('Hello, WebSocket!');

要接收消息，可以在 WebSocket 对象上添加 onmessage 事件处理程序。例如，要在控制台中打印接收到的消息，可以这样写：

this.state.client.onmessage = (event) => {
  console.log(event.data);
};

关闭 WebSocket 连接

要关闭 WebSocket 连接，可以使用 WebSocket 对象的 close 方法。例如，要关闭连接并释放资源，可以这样写：

this.state.client.close();

完整示例代码

下面是一个完整的 React 组件示例，演示了如何使用 WebSocket：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ -- --------- - ---- ------------

----- --- ------- --------- -
  ------------------ -
    -------------

    ---------- - -
      ------- -----
      -------- ---
      --------- ---
    --
  -

  ------------------- -
    ----- ------ - --- ----------------------------------
    --------------- ------ ---

    ---------------- - ------- -- -
      --------------- --------- ------------------------ ----------- ---
    --
  -

  ------------------- - ------- -- -
    --------------- -------- ------------------ ---
  -

  ------------ - ------- -- -
    -----------------------
    -------------------------------------------
    --------------- -------- -- ---
  -

  -------- -
    ------ -
      -----
        ----
          ---------------------------------- ------ -- -
            --- --------------------------
          ---
        -----
        ----- -----------------------------
          ------ ----------- -------------------------- ----------------------------------- --
          ------- ---------------------------
        -------
      ------
    --
  -
-

------ ------- ----

上面的代码创建了一个 WebSocket 连接，并允许用户在文本框中输入消息并发送。收到的消息将显示在页面上。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da2ec0a941bf71341ecd6e