react中实现websocket连接

在 React 中实现 WebSocket 连接的方法与在普通的 JavaScript 中实现类似，但需要注意一些细节。

以下是一个在 React 中使用 WebSocket 连接的示例代码：

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

function App() {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function(event) {
      console.log('WebSocket 连接成功');
    };

    ws.onmessage = function(event) {
      console.log('接收到消息：', event.data);
    };

    ws.onclose = function(event) {
      console.log('WebSocket 连接关闭');
    };

    setSocket(ws);

    return function cleanup() {
      ws.close();
    };
  }, []);

  function sendMessage() {
    if (socket) {
      socket.send('Hello, WebSocket!');
    }
  }

  return (
    <div>
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
}

export default App;

在上述代码中，我们使用了 `useState` 钩子函数来管理 WebSocket 对象，使用 `useEffect` 钩子函数来创建 WebSocket 连接，并在组件销毁时关闭连接。当用户点击发送消息的按钮时，`sendMessage` 函数将向服务器发送消息。

需要注意的是，在使用 `useState` 管理 WebSocket 对象时，初始值应为 `null`。这是因为在组件挂载时，WebSocket 对象还没有创建，此时应将 `socket` 状态设置为 `null`，表示 WebSocket 连接还未建立。而在 `useEffect` 中创建 WebSocket 对象后，我们应在回调函数中将其保存到 `socket` 状态中，从而更新组件的状态。

另外，我们在 `sendMessage` 函数中增加了对 `socket` 变量的判断，这是因为在组件挂载时，WebSocket 连接还未建立，此时 `socket` 变量的值为 `null`，无法发送消息。