невозможно получить данные сокета без перезагрузки страницы в ответ на приведенный ниже код

Question

Сокет-сервер в nodejs, который отправляет данные клиенту (сервер. 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');
  });
})

Реагирует на внешний интерфейс для получения данных и отображения сокета (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;

Из этих двух файлов, указанных выше, я получаю данные сокета при перезагрузке страницы, но не могу получить данные без перезагрузки страницы. Я не знаю, почему это ведет себя так, как в приложении реагировать. Я должен получать данные в основная часть в моем приложении, поэтому это необходимо. Я только что создал демо для этого, если кто-нибудь знает о сокете в реакции, чем PLZ.

Answer 1

Проблема с этим кодом решена -

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;