Как в react.js сделать работу с websocket (прием сообщений)?

Question

[Николай Павлович]

Делаю чат. Решил сделать фронт на реакте. Но не могу понять, как извне изменить состояние компонента.

// часть реактовского кода
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 не дает )

Answer 1

[iMrDron]

React + Redux

Answer 2

[Itvanya]

Твой выход - react + redux. При клике на submit button в форме, ты делаешь триггер ws события, которое высылает данные тебе и всем юзерам в одном namespace. Приняв данные на клиенте, ты просто диспатчишь их в редакс стор, который автоматом обновляет все данные, относительно списка.
Примеров реализации на github масса:
https://github.com/abitlog/retube
https://github.com/raineroviir/react-redux-socketi...
https://github.com/OmarElGabry/chat.io