Hier ist der Code Reagieren:Möchten Sie die empfangenen Daten über Sockets machen in React
var Dashboard = React.createClass({
loadLineFromServer: function(line){
console.log("inside loadlinefromserver");
var socket = new WebSocket('ws://127.0.0.1:8000/');
socket.onopen = function(){
console.log("websocket opened");
var send_data1 = "Point A: " + line.x1 + "," + line.y1 +" \n";
var send_data2 = "Point B: " + line.x2 + "," + line.y2;
socket.send(send_data1 + send_data2);
}
socket.onmessage = function(event){
console.log("websocket on message");
var websocket_data = event.data;
this.setState({data: websocket_data})
console.log(websocket_data);
}.bind(this),
socket.onerror = function(e){
console.log("error in websocket");
console.log(e.message);
}
},
handleFormSubmit: function(line){
this.loadLineFromServer({x1: line.x1, y1: line.y1, x2: line.y1, y2: line.y2});
var url = util.format('http://127.0.0.1:8000/api/line/');
$.ajax({
url: url,
crossDomain: true,
dataType: 'json',
data: line,
type: 'POST',
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: line});
console.error(url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
},
render: function(){
return(
<div className="dashboard">
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
<a href="">TrainingInduct</a>
</Navbar.Brand>
<Navbar.Toggle/>
</Navbar.Header>
</Navbar>
<Dashform onFormSubmit={this.handleFormSubmit} />
<h1>{this.state.data}</h1>
</div>
);
}
});
Ich finde nicht, dass die Linie auf dem Bildschirm gerendert Koordinaten. Die websocket_data erscheint nur auf der Konsole, während ich setState so einstelle, dass sie auf dem Bildschirm angezeigt wird. Gibt es Hinweise darauf, wie die Daten gerendert werden sollen?
Edit1: vermisste ich das Semikolon nach this.setState ({Daten: websocket_data})
Nun werden die Punkte angezeigt bekommen für einen Moment aber wieder durch:
getInitialState: function() {
return {data: []};
},
Die Punkte diappear. Kann jemand helfen, dieses Problem zu umgehen?