javascript - React js Socket.io 和 State

Question

你好，我正在尝试保存我的套接字通过后端发送给我的响应的状态

这是我向套接字发送消息的方法

export default class Home extends Component { 

    constructor(){
        super()

        this.state = {
          informationReceived: 'Nothing yet!'
        }
        const token = localStorage.getItem('token');
        const socket = io('http://localhost:8080', {
            query: { token: token }
        });

        socket.on('success', (receivedInfo) => {
            this.setState({
              informationReceived: receivedInfo
            })
          })

      }

      emitInfoToAll = () => {
        const token = localStorage.getItem('token');
        console.log('entrou')
        const socket = io('http://localhost:8080',{
            query: { token: token }
        });

        socket.emit('myevent', 'Hello realtime connected users!')
        console.log(this.state.informationReceived);
      }
}

但是这样我会在发送和接收时两次打开与套接字的连接我想知道如何只能打开一个连接，这样当我向后端发送回复时，我就不必再次打开

我如何设置我的 p 标签的这些值:

                <p> Name: <span className = "name"> </span> </p>
                <p> Points: <span className = "points"> 0 </span> </p>

Answer 1

您应该将 socket 放置为组件的状态，以便可以在 emitInfoToAll 方法中模拟它

export default class Home extends Component { 

constructor(){
    super()

    this.state = {
      informationReceived: 'Nothing yet!'
      socket: null;
    }

    const token = localStorage.getItem('token');
    socket = io('http://localhost:8080', {
        query: { token: token }
    });

    socket.on('success', (receivedInfo) => {
        this.setState({
          informationReceived: receivedInfo
        })
      })

  }

  emitInfoToAll = () => {
    const { socket } = this.state;
    console.log('entrou')
    socket.emit('myevent', 'Hello realtime connected users!')
    console.log(this.state.informationReceived);
  }
}

更新:帮助设置 p 标记的值

export default class Home extends Component {

    constructor() {
        super()

        this.state = {
            informationReceived: 'Nothing yet!',
            socket: null
        }

        const token = localStorage.getItem('token');
        socket = io('http://localhost:8080', {
            query: { token: token }
        });

        socket.on('success', (receivedInfo) => {
            this.setState({
                informationReceived: receivedInfo
            })
        })

    }

    emitInfoToAll = () => {
        const { socket } = this.state;
        console.log('entrou')
        socket.emit('myevent', 'Hello realtime connected users!')
        console.log(this.state.informationReceived);
    }

    render() {
        const { informationReceived } = this.state;
        const { name, point } = informationReceived;
        return (
            <div>
                <p> Name: <span className="name">{name}</span> </p>
                <p> Points: <span className="points">{point}</span> </p>
            </div>
        );
    }
}