Node.js 无法在不重新加载页面的情况下获取套接字数据，请使用下面的代码进行响应

nodejs中的套接字服务器，用于向客户端发送数据（server.js）-

响应前端接收套接字数据并显示（socket.js）-

import React，{Component}来自'React'；
constURL='ws://localhost:8000'；
const connection=新的WebSocket（url）；
类套接字扩展组件{
状态={
响应：“”
}
//组件willmount（）{
componentDidMount（）{
connection.onopen=（）=>{
connection.send（'您好，客户端已连接！！'）
}
setInterval（connection.onmessage=（message）=>{
this.setState（{response:message.data}）；
控制台日志（“消息”）；
控制台日志（消息）；
//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'）；
//在连接丢失时自动尝试重新连接
}
connection.onerror=err=>{
控制台错误(
套接字遇到错误：“，
错误消息，
“闭合插座”
);
//connection.close（）；
};
}
render（）{
返回(
服务器消息
{this.state.response}
);
}
}
导出默认套接字；

---

从上面这两个文件中，我在页面重新加载时获取套接字数据，但在没有页面重新加载的情况下无法获取数据。我不知道为什么在react应用程序中会出现这种情况。我必须在我的应用程序中大量接收数据，这就是为什么需要它。如果有人知道react而不是plz帮助中的套接字，我刚刚创建了一个演示。通过此c解决了此问题颂歌

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;

import React，{Component}来自'React'；
从“websocket”导入{w3cwebsocket作为w3cwebsocket}；
constURL='ws://localhost:8000'；
类套接字扩展组件{
状态={
响应：“”
}
连接=新的WebSocket（url）；
componentDidMount（）{
this.connection.onopen=（）=>{
this.connection.send（'您好，客户端已连接！！'）
}
this.connection.onmessage=（消息）=>{
this.setState（{response:message.data}）；
}
this.connection.onclose=（）=>{
console.log（'disconnected'）；
}
this.connection.onerror=err=>{
控制台错误(
套接字遇到错误：“，
错误消息，
“闭合插座”
);
};
}
render（）{
返回(
套接字服务器消息
{this.state.response}
);
}
}
导出默认套接字；

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;

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;