Question

首次学习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。

Answer 1

您需要在ReactDOM.render回调中调用socket.onmessage方法。

对于更大的应用程序，我建议使用基于Flux的架构作为React团队的建议。最流行的实现之一是Redux，它非常易于学习和使用。您可以在Flux的概述页面上找到更多信息（我推荐他们的视频）： https://facebook.github.io/flux/docs/overview.html

如何在ReactJS中使用websocket？

1 个答案: