无法在没有页面重新加载的情况下获取套接字数据，并与下面的代码做出反应

Posted 2023-02-21

【中文标题】无法在没有页面重新加载的情况下获取套接字数据，并与下面的代码做出反应

【英文标题】：unable to get socket data without page reload in react with below code

【发布时间】：2020-06-23 09:19:34

【问题描述】：

nodejs 中的套接字服务器将数据发送到客户端 (server.js)-

const WebSocket = require('ws')
const wss = new WebSocket.Server( port: 8000 )
wss.on('connection', ws => 
  ws.on('message', message => 
    console.log(`$message`)
  )
  ws.send(JSON.stringify(
    type:'random_number2',
    interval: 2000, 
    take: 100, 
  ));
  ws.on('close', function() 
    console.log('closing connection');
  );
)

React 前端用于接收套接字数据并显示（socket.js）-

import React,  Component  from 'react';

const url = 'ws://localhost:8000';
const connection = new WebSocket(url);

class Socket extends Component 

  state = 
    response : ''
  
  //componentWillMount() 
componentDidMount() 

    connection.onopen = () => 
      connection.send('Hello, Client is connected!!') 
    

    setInterval( connection.onmessage = (message) => 
       this.setState(response : message.data);

        console.log("message");
        console.log(message);

        // if(this.state.response !== message.data)
        //   this.setState(response : message.data);
        // 

        console.log('message.data');  
        console.log(message.data);    
        ,5000);

    connection.onclose = () => 
      console.log('disconnected');
      // automatically try to reconnect on connection loss
      

    connection.onerror = err => 
        console.error(
            "Socket encountered error: ",
            err.message,
            "Closing socket"
        );
       // connection.close();
    ;

  

  render() 
    return (
      <div>
        Server Message
        this.state.response
      </div>
    );
  


export default Socket;

从上面的这两个文件中，我在页面重新加载时获取套接字数据，但在没有页面重新加载的情况下无法获取数据我不知道为什么它在反应应用程序中表现得像我必须在我的应用程序中批量接收数据这就是这是必需的。我刚刚为此创建了一个演示，如果有人知道反应中的套接字而不是请帮助。

【参考方案1】：

这适用于任何有同样问题的人。正如@Ritika 指出的那样，通过在状态之后声明您的 WebSocket 连接来解决此问题。就像在钩子里一样，在 useEffect 里。

useEffect(() => 
    // const connection = new WebSocket('ws://localhost:8000')
    //    Or if your are importing your connection from another file:
    const ws = connection();
   ....
  , []);

【参考方案2】：

使用此代码解决的问题 -

import React,  Component  from 'react';
import  w3cwebsocket as W3CWebSocket  from "websocket";

const url = 'ws://localhost:8000';

class Socket extends Component 

state = 
   response : ''


connection = new WebSocket(url);
componentDidMount() 
this.connection.onopen = () => 
  this.connection.send('Hello, Client is connected!!') 


this.connection.onmessage = (message) => 
    this.setState(response : message.data);    


this.connection.onclose = () => 
  console.log('disconnected');


this.connection.onerror = err => 
    console.error(
        "Socket encountered error: ",
        err.message,
        "Closing socket"
    );
   ;
 

render() 
return (
  <div>
    Socket Server Message
    this.state.response
  </div>
);



export default Socket;