Javascript 如何将websocket与ReactJS一起使用？

第一次学习ReactJS，跟随官方文档学习组件的工作原理，现在我想连接WebSocket，麻烦就从这里开始。为什么这么难实现

// 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();

//js
ReactDOM.render(
您好
,
document.getElementById（'chat-list'）
);
//插座连接
套接字=新的WebSocket（“ws://“+window.location.host+”/echo”）；
socket.onmessage=函数（e）{
警报（如数据）；
}
socket.onopen=函数（）{
socket.send（“你好世界”）；
}
//如果套接字已打开，则直接调用onopen
if（socket.readyState==WebSocket.OPEN）socket.onopen（）；

---

我想要的是，当

onmessage

我需要呈现

媒体

div.

时，您需要调用

ReactDOM.render

方法，该方法位于

socket.onmessage

回调中

对于更大的应用程序，我建议使用基于通量的体系结构作为React团队的建议。最流行的实现之一是Redux，它非常容易学习和使用。 您可以在Flux的概览页面上找到更多信息（我推荐他们的视频）：

---

您需要在

socket.onmessage

回调中调用

ReactDOM.render

方法

对于更大的应用程序，我建议使用基于通量的体系结构作为React团队的建议。最流行的实现之一是Redux，它非常容易学习和使用。 您可以在Flux的概览页面上找到更多信息（我推荐他们的视频）：