使用ReactJS、Redux和Websocket实现实时更新

Question

这个问题涉及到使用ReactJS和Redux集成websocket。我正在尝试构建一个应用程序，它具有实时更新的能力。用户A应该能够在不刷新页面的情况下看到用户B所做的更改。

请告诉我如何从头开始进行此实现，并且是否有其他修改需要进行？如果有任何教程，请指导我其中之一。

谢谢

- Kavindu N

Answer 1

尝试像这样做。由于你正在处理套接字，所以不必经过redux的流程，只需使用componentDidMount()生命周期状态来获取实时更新。

        import React, { Component } from 'react';
        import PropTypes from 'prop-types';
        import io from 'socket.io-client';
        // should listen to your sever with socket connection in this case its localhost:3000
        let socket = io('http://localhost:3000');

     class App extends Component {

       constructor(props){
        super(props);
        this.state={
         chat:[{message:'Hello everyone'}]
        };
      }

      componentDidMount() {
        socket.on('recive', data => {
          console.log(data);
          this.setState({chat:[...this.state.chat,data]});
        })
      }

      msgthreads =()=> {
        return this.state.chat.map((msg,index)=>{
          return <div key={index} className="row message-bubble">
                    <span>{msg.message}</span>
                 </div>
        });
      }

      sendmessage =()=> {
        console.log(this.textInput.value);
        socket.emit('send',{message:this.textInput.value});
      }

      App.propTypes = {
          chat: PropTypes.array
      }

      render() {

        return (
          <div className="container">
            <div className="row">
               <div className="panel panel-default">
                 <div className="panel-heading">Panel heading without title</div>
                    <div className="panel-body">
                      <div className="container">
                          {this.msgthreads()}
                      </div>
                          <div className="panel-footer">
                            <div className="input-group">
                              <input type="text" className="form-control" ref={(input) => { this.textInput = input; }}/>
                              <span className="input-group-btn">
                                <button className="btn btn-default" type="button" onClick={this.sendmessage}>Send</button>
                              </span>
                            </div>
                          </div>
                    </div>
               </div>
            </div>
          </div>
        );
      }
    }

    export default App;

- TRomesh