react用WebSocket实现聊天对话代码

首先，你需要安装一个 WebSocket 库。这里我们使用 `websocket` 库，可以通过 npm 安装：

npm install websocket

接下来，我们来看一下代码实现。首先，我们需要在 React 组件中创建一个 WebSocket 连接：

import React from 'react';
import WebSocket from 'websocket';

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.ws = new WebSocket('ws://localhost:8080');
    this.state = {
      messages: [],
      text: '',
    };
  }
  // ...
}

在这个例子中，我们在组件的构造函数中创建了一个 WebSocket 连接，并将其存储在组件实例的 `ws` 属性中。我们还定义了组件的初始状态，包括一个空的消息列表和一个空的文本输入框。

接下来，我们需要监听 WebSocket 连接的事件，以便在收到消息时更新组件的状态。我们可以在组件的 `componentDidMount` 生命周期方法中添加这些事件监听器：

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.ws = new WebSocket('ws://localhost:8080');
    this.state = {
      messages: [],
      text: '',
    };
  }

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

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.setState((state) => ({
        messages: [...state.messages, message],
      }));
    };

    this.ws.onclose = () => {
      console.log('disconnected');
      this.setState({
        ws: new WebSocket('ws://localhost:8080'),
      });
    };
  }

  // ...
}

在这个示例中，我们添加了三个事件监听器。`onopen` 事件会在 WebSocket 连接建立时触发，`onmessage` 事件会在收到消息时触发，`onclose` 事件会在连接关闭时触发。当收到消息时，我们将其解析为 JSON 格式，然后将其添加到组件的消息列表中。

接下来，我们需要实现输入框的功能，并在用户输入消息时将其发送到 WebSocket 服务器。我们可以使用 `onSubmit` 事件来实现这一功能：

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.ws = new WebSocket('ws://localhost:8080');
    this.state = {
      messages: [],
      text: '',
    };
  }

  componentDidMount() {
    // ...
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const message = {
      text: this.state.text,
      timestamp: Date.now(),
    };
    this.ws.send(JSON.stringify(message));
    this.setState({ text: '' });
  };

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.messages.map((message, index) => (
            <li key={index}>{message.text}</li>
          ))}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
}

在这个例子中，我们定义了两个方法：`handleSubmit` 和 `handleChange`。`handleSubmit` 方法会在用户提交表单时被调用，它会将当前文本框中的内容打包成一个 JSON 格式的消息，并通过 WebSocket 连接发送出去。`handleChange` 方法会在文本框内容发生变化时更新组件的状态。

最后，我们在 `render` 方法中渲染出消息列表和表单，以便用户进行聊天：

render() {
  return (
    <div>
      <ul>
        {this.state.messages.map((message, index) => (
          <li key={index}>{message.text}</li>
        ))}
      </ul>
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.text}
          onChange={this.handleChange}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

这样，我们就实现了一个简单的基于 WebSocket 的聊天应用。完整代码如下：

import React from 'react';
import WebSocket from 'websocket';

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.ws = new WebSocket('ws://localhost:8080');
    this.state = {
      messages: [],
      text: '',
    };
  }

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

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.setState((state) => ({
        messages: [...state.messages, message],
      }));
    };

    this.ws.onclose = () => {
      console.log('disconnected');
      this.setState({
        ws: new WebSocket('ws://localhost:8080'),
      });
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const message = {
      text: this.state.text,
      timestamp: Date.now(),
    };
    this.ws.send(JSON.stringify(message));
    this.setState({ text: '' });
  };

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.messages.map((message, index) => (
            <li key={index}>{message.text}</li>
          ))}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
}

export default Chat;