Reactjs 无法建立套接字连接，它在调用 componentDidMount 时打开并获得响应

Posted 2023-02-16

【中文标题】Reactjs 无法建立套接字连接，它在调用 componentDidMount 时打开并获得响应

【英文标题】：Reactjs is unable to establish socket connection, it opens and getting response while calling on componentDidMount

【发布时间】：2019-01-17 15:14:32

【问题描述】：

我无法在 React.js 中打开 Web 套接字连接。在 componentDidMount 中调用相同函数时建立连接。当我开始使用任何事件（如 onClick 或 onSubmit）调用时，我无法打开连接并从服务器获得响应。

代码如下。

var exampleSocket = new WebSocket('wss://api.somedomain.io/WSGateway');

class MyClass extends Component 
  componentDidMount() 
    this.authenticate();
  
  authenticate() 
    exampleSocket.onopen = function (event) 
      var payload = 
        "UserName": "username",
        "Password": "password"
      ;
      var msg = 
        "m": 0,
        "i": 0,
        "n": "AuthenticateUser",
        "o": JSON.stringify(payload)
      ;
      exampleSocket.send(JSON.stringify(msg));
    
    exampleSocket.onmessage = function apiAuthenticateUser(event) 
      try 
        let data = JSON.parse(event.data);
        let o_data = JSON.parse(data["o"]);
        console.log(o_data);
       catch (err) 
        console.log(err);
      
    
  
render() 
  const  classes, theme  = this.props;
  return (
    <React.Fragment>
      <button
        name="authentication"
        id="testid1"
        onClick=(e) => 
          this.authenticate(e);
        
      >
        Login
        </button>
    </React.Fragment>
  )


export default MyClass;

【问题讨论】：

@halfer - 感谢您的建议，问题仍未解决

【参考方案1】：

我担心你的authenticate 方法没有绑定到组件的范围。在构造函数中使用 bind 或在声明中简单地使用箭头函数：

class MyClass extends Component 
  componentDidMount() 
    this.authenticate();
  

  authenticate = () => 
    exampl...

在onClick中简单地使用这种格式：

     <button
       ...
       onClick=this.authenticate
     >

【讨论】：

等一下让我试试这个方法

1.在构造函数中添加 this.authenticate = this.authenticate.bind(this); 2. 改为authenticate = () => 但同样的响应

React-wise 应该实现 1 或 2（但不能同时实现）。在这种情况下，另一个与套接字相关的错误发生在此之上。

我先尝试了第 1 点，然后尝试了第 2 点，是的，这是与套接字相关的东西，但是在使用 componentDidMount() 调用它时，相同的函数得到了正确的响应——这就是我感到困惑的原因

能够解决 DOM 元素的问题 - 套接字首先在实际 DOM 中打开，然后使用虚拟 dom 我刚刚同步了两者