React 中的 WebSocket 集成用于实时通信-js教程-PHP中文网

WebSocket Integration in React for Real-Time Communication

React 中的 WebSocket 集成

WebSocket 允许客户端和服务器之间进行实时、全双工通信。与基于请求-响应的传统 HTTP 请求不同，WebSocket 允许服务器和客户端随时发送消息，从而实现实时聊天、通知或实时数据更新等实时功能。

在 React 应用程序中，WebSocket 集成可用于构建消息系统、实时更新、股票行情或多人游戏等功能。 React 提供了钩子和组件生命周期方法，可以帮助管理 WebSocket 连接。

1.为什么使用 WebSocket？

实时通信：WebSocket 提供了在客户端和服务器之间即时发送和接收消息的能力。
减少延迟：WebSocket 连接是持久的，减少重复 HTTP 请求的开销。
高效数据传输：WebSocket 只打开单个连接，减少带宽占用，提高通信速度。
交互式应用程序：WebSocket 非常适合需要频繁或实时更新的应用程序，例如聊天应用程序或实时提要。

2. WebSocket 的工作原理

WebSockets 在客户端（浏览器）和服务器之间建立双向通信通道。初始握手（通过 HTTP）后，WebSocket 协议接管，创建持久连接。

客户端向服务器发送WebSocket握手请求（类似于HTTP请求）。
服务器接受请求并建立 WebSocket 连接。
连接打开后，客户端和服务器都可以通过 WebSocket 连接来回发送消息。
连接保持开放状态，减少了重复握手的需要。

3.在 React 中设置 WebSocket 集成

让我们探索如何将 WebSocket 集成到 React 应用程序中。我们将使用大多数现代浏览器中可用的 WebSocket API。

第 1 步：创建 WebSocket 连接

首先，在 React 组件中创建一个 WebSocket 连接。我们将使用 useEffect 挂钩来建立连接，并使用 useState 来管理传入消息。

import React, { useState, useEffect } from 'react';

const WebSocketExample = () => {
  const [message, setMessage] = useState('');
  const [socket, setSocket] = useState(null);

  // Establish WebSocket connection
  useEffect(() => {
    const ws = new WebSocket('wss://example.com/socket'); // Replace with your WebSocket server URL

    // Set WebSocket object in state
    setSocket(ws);

    // Set up event listener for receiving messages
    ws.onmessage = (event) => {
      console.log('Message from server:', event.data);
      setMessage(event.data); // Store the incoming message in state
    };

    // Clean up WebSocket on component unmount
    return () => {
      ws.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send('Hello Server');
    }
  };

  return (
    <div>
      <h1>WebSocket Integration Example</h1>
      <p>Message from server: {message}</p>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default WebSocketExample;

登录后复制

4.代码说明

状态管理：

消息：保存从服务器收到的消息。
socket：存储WebSocket连接对象。

useEffect Hook：

建立 WebSocket 连接：WebSocket 连接在组件挂载（useEffect 运行）时创建。将“wss://example.com/socket”替换为服务器的 WebSocket URL。
onmessage 事件监听器：onmessage 事件监听来自 WebSocket 服务器的传入消息，并使用新数据更新状态。
清理：当组件卸载或不再需要连接时，ws.close() 关闭 WebSocket 连接。

发送消息：

sendMessage 函数：此函数向 WebSocket 服务器发送消息，但前提是连接已打开 (socket.readyState === WebSocket.OPEN)。

5. WebSocket 事件监听器

WebSocket 提供了几个可以交互的事件：

onopen：建立连接时触发。
onmessage：从服务器收到消息时触发。
onclose：WebSocket 连接关闭时触发。
onerror：当 WebSocket 连接出现错误时触发。

例如：

const ws = new WebSocket('wss://example.com/socket');

ws.onopen = () => {
  console.log('WebSocket connection established');
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('WebSocket connection closed');
};

登录后复制

6.在 React 中处理 WebSocket 消息

使用 WebSocket 时，尤其是在 React 应用程序中，您收到的数据可能需要实时处理或显示。您可以通过每次收到新消息时更新状态来处理此问题。

例如，想象一下构建一个实时聊天应用程序。您可以使用新消息更新状态并动态渲染它：

const [messages, setMessages] = useState([]);

ws.onmessage = (event) => {
  const newMessage = event.data;
  setMessages((prevMessages) => [...prevMessages, newMessage]); // Append new message to state
};

登录后复制

这可确保每条新消息都添加到聊天消息列表中并显示在 UI 中。

7. WebSocket 和重新连接逻辑

WebSocket 连接可能偶尔会断开，处理重新连接逻辑可以确保您的应用程序保持稳健。您可以按如下方式实现重连逻辑：

useEffect(() => {
  const connectWebSocket = () => {
    const ws = new WebSocket('wss://example.com/socket');

    ws.onopen = () => console.log('WebSocket connected');
    ws.onclose = () => {
      console.log('WebSocket disconnected, reconnecting...');
      setTimeout(connectWebSocket, 1000); // Reconnect after 1 second
    };

    return ws;
  };

  const ws = connectWebSocket();

  // Clean up WebSocket on component unmount
  return () => {
    ws.close();
  };
}, []);

登录后复制

每当连接关闭时，此代码都会尝试重新连接到 WebSocket 服务器。