Блог

Впервые изучаю ReactJS, следую официальным документам и изучаю, как работают компоненты, и теперь я хотел подключиться к websockets, и здесь начинаются проблемы. Почему это так сложно реализовать?

 // ReactJS
ReactDOM.render(
  <div className="media">
    <img className="media-figure" src={"kitten.jpg"}  width="48" height="48" />
    <p className="media-body">Hello</p>
  </div>,
  document.getElementById('chat-list')
);


// Socket connection
socket = new WebSocket("ws://"   window.location.host   "/echo");

socket.onmessage = function(e) {
    alert(e.data);
}
socket.onopen = function() {
    socket.send("hello world");
}
// Call onopen directly if socket is already open
if (socket.readyState == WebSocket.OPEN) socket.onopen();
  

Все, что я хочу, это когда onmessage мне нужно отобразить этот media div.

Вам нужно вызвать ReactDOM.render метод внутри socket.onmessage обратного вызова.

Для больших приложений я рекомендую использовать архитектуру на основе потоков, как рекомендует команда React. Одной из самых популярных реализаций является Redux, который довольно прост в освоении и использовании. Вы можете найти более подробную информацию на странице обзора потока (я рекомендую их видео): https://facebook.github.io/flux/docs/overview.html