使用ReactJS,Redux和Websocket进行实时更新

Question

这个问题是关于websocket与ReactJS和Redux的集成.我正在尝试构建一个能够进行实时更新的应用程序.用户A应该看到用户B在不刷新页面的情况下所做的更改.

您能否告诉我如何从头开始实施此实施,是否还有其他改动？如果有任何教程,请善意地引导我去其中一个.

谢谢

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;