这个问题涉及到使用ReactJS和Redux集成websocket。我正在尝试构建一个应用程序,它具有实时更新的能力。用户A应该能够在不刷新页面的情况下看到用户B所做的更改。
请告诉我如何从头开始进行此实现,并且是否有其他修改需要进行?如果有任何教程,请指导我其中之一。
谢谢
请告诉我如何从头开始进行此实现,并且是否有其他修改需要进行?如果有任何教程,请指导我其中之一。
谢谢
尝试像这样做。由于你正在处理套接字,所以不必经过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;