ReactJS 使用 WebSockets 与服务器通信

Posted 2023-02-16

【中文标题】ReactJS 使用 WebSockets 与服务器通信

【英文标题】：ReactJS communication with server using WebSockets

【发布时间】：2017-08-30 16:50:44

【问题描述】：

我对 UI 开发、javascript、ReactJS 还很陌生，所以请原谅缺乏基础知识。

我正在尝试开发一个简单的 ReactJS 应用程序，它通过表单接受用户输入，发送到后端服务器并接收来自服务器的响应。后端服务器正在侦听 WebSocket URL 'ws://localhost:8025/websockets/WSService'。我在下面提供了代码 sn-p。当我输入一些文本输入并单击“提交”时，服务器成功接收到消息。我现在正在尝试接收服务器发送的响应，并且想知道在哪里设置“onmessage”功能。

我已经查看了以下问题，但它们与我的要求略有不同，我无法将建议直接映射到我的解决方案：

how react js acts as a websocket client? https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

下面提供的代码sn-p：

import React,  Component  from 'react';
import './App.css';

class App extends Component 
  constructor(props) 
    super(props);

    this.state = 
      ws: new WebSocket('ws://localhost:8025/websockets/WSService'),
      value: ''
    ;

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  

  handleChange(event) 
    this.setState(value: event.target.value);
    console.log(this.state.value);
  

  handleSubmit(event) 
    event.preventDefault();
    this.state.ws.send(this.state.value);
    console.log(event.target.value);
  

  render() 
    return (
      <form onSubmit=this.handleSubmit>
        <label>
          Name:
          <input type="text" value=this.state.value onChange=this.handleChange />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  


export default App;

【问题讨论】：

react-websocket的文档说可以渲染成组件。

@Prakash sharma，是的，react-socket 网站npmjs.com/package/react-websocket 提供了一个使用 Websocket 作为组件的 ProductDetail 代码示例：“"，但是我如何使用这个 Web 套接字实例来发送消息？文档不是很清楚。

【参考方案1】：

好吧，我能够找出解决方案，结果证明它非常简单。我所要做的就是在 handleSubmit() 中定义 onmessage。

  handleSubmit(event) 
    event.preventDefault();
    this.state.ws.send(this.state.value);
    this.state.ws.onmessage = (event) => 
      console.log(event.data);
    ;
  

但是现在我看到一条警告消息“不要直接改变状态。使用 setState() react/no-direct-mutation-state”，我无法弄清楚如何将我的“onmessage”定义移动到设置状态（）。但是我最初的要求得到了满足，我想我现在可以忍受这个警告！