Делаю чат. Решил сделать фронт на реакте. Но не могу понять, как извне изменить состояние компонента.
// часть реактовского кода
var RoomsList = React.createClass({
render: function() {
var roomNodes = this.props.data.map(function (room) {
return (
<Room caption={room.caption}>
{room.users}
</Room>
);
});
return (
<div className="roomsList">
{ roomNodes }
</div>
);
}
});
var RoomsBox = React.createClass({
render: function() {
return (
<div className="roomsBox">
<RoomsList data={this.props.data} />
</div>
);
}
});
React.render(
<RoomsBox data={data} />,
document.getElementById('rooms1')
);
// Часть работы с Websocket. Там много мусора, просто для примера.
if (window["WebSocket"]) {
conn = new WebSocket("ws://{{$}}/ws");
conn.onopen = function(evt) {
user = getQueryVariable('user');
if (user==undefined) {
user = "ooo";
}
data = {Op: 'auth', Room: 'msk', User: user, Content: ''};
conn.send(JSON.stringify(data));
}
conn.onclose = function(evt) {
appendLog($("<div><b>Connection closed.</b></div>"))
}
conn.onmessage = function(evt) {
data = JSON.parse(evt.data);
if (data.Op == "msg") {
appendLog($("<div/>").text(data.User+": "+data.Content))
} else if (data.Op == "room") {
rooms.append(data.Caption+" | ");
}
}
} else {
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
}
});
Нужно, чтобы при поступлении обновлялся список комнат (RoomsList).
Понимаю, что надо изнутри к сокету обращаться, но как это все уложить, не понимаю. Парадигма JQuery не дает )
