React js 如何充当 websocket 客户端

React.js 是一种用于构建用户界面的 JavaScript 库，而 WebSocket 是一种在浏览器和服务器之间实现实时双向通信的技术。在本文中，我们将探讨如何将 React.js 用作 WebSocket 客户端，并提供一个案例代码来演示其工作原理。

npm install websocket

yarn add websocket

jsx
import React, { Component } from 'react';
import { w3cwebsocket as W3CWebSocket } from 'websocket';
class WebSocketClient extends Component {
  constructor(props) {
    super(props);
    this.client = new W3CWebSocket('ws://localhost:8080');
  }
  componentDidMount() {
    // 处理连接成功的逻辑
    this.client.onopen = () => {
      console.log('WebSocket Client Connected');
      // 发送数据
      this.client.send('Hello, Server!');
    };
    // 处理收到消息的逻辑
    this.client.onmessage = (message) => {
      console.log(message);
    };
  }
  render() {
    return (
      
        {/* WebSocket 客户端组件 */}
      
    );
  }
}
export default WebSocketClient;

jsx
this.client.onmessage = (message) => {
  const data = JSON.parse(message.data);
  if (data.type === 'chat') {
    // 处理聊天消息
    console.log('Received chat message:', data.message);
  } else if (data.type === 'notification') {
    // 处理通知消息
    console.log('Received notification:', data.message);
  }
};