如何使用 React 中的函数发送和关闭 websocket

Question

我正在尝试使用 websockets 连接到Kraken websocket API。我在初始渲染上创建了一个新实例并设置了侦听器。我正在尝试制作按钮来订阅和关闭，但按钮不起作用。

我正在使用this websocket 库。

const WebSocket = require('isomorphic-ws')
   

function App() {

  const ws = new WebSocket('wss://ws.kraken.com')
  
  useEffect(() => {

    ws.onopen = () => {
      console.log('connected')
    }

    ws.onmessage = (msg) => {
      const message = JSON.parse(msg.data)
      const sub = message[2]
      console.log(message)
    }

    ws.onclose = () => {
      console.log('closing connection')
      // ws.close()
    }

    return () => {
      ws.close()
    }
  }, [])

 const wsClose = () => {
   ws.close()
 }

  const wsSub = () => {
    ws.send(JSON.stringify(
      {
        "event": "subscribe",
        "pair": [
          "XBT/USD"
        ],
        "subscription": {
          "name": "ticker"
        }
      }
    ))
    console.log('send subscribe')
  }

  return (
    <button onClick={wsSub}>subscribe</button>
    <button onClick={wsClose}>close ws</button>
  )
}

export default App

如果我将wsSub 函数中的代码放在ws.onopen 侦听器下，订阅就可以工作，但是我想控制打开websocket 时不订阅的订阅。我正在使用这样的按钮进行测试。我想根据用户表单提交来订阅和取消订阅，但我觉得我应该能够先完成这项工作。

Answer 1

现在，每次组件重新渲染时，您都会创建一个新套接字。效果回调引用创建的第一个套接字（在安装时），但 wsClose 和 wsSub 没有（它们引用在前一个渲染中创建的套接字）。

将套接字放入一个状态或一个引用：

const wsRef = useRef();
if (!wsRef.current) {
  wsRef.current = new WebSocket('wss://ws.kraken.com');
}

然后继续将ws 的所有用法替换为wsRef.current。