使用 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;