如何使用react js绘制简单的火花图

我正在实现websocket client-server应用程序，其中websocket server是在node js中实现的，它在1234端口上等待客户端连接。

在客户端，我必须在react js中实现这一点，因为服务器正在向连接的客户端发送消息，并且基于这些消息，我必须使用react sparklines实现一个简单的图形。请指导我如何通过使用来自websocket的输入值来绘制图形?

index . html:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
    <div id="content"></div>
    <script type="text/javascript">
      var content = document.getElementById('content');
      var socket = new WebSocket('ws://localhost:1234','security');
      socket.onopen = function () {
      };
      socket.onmessage = function (message) {
         content.innerHTML += message.data +'<br />';
      };
      socket.onerror = function (error) {
         console.log('WebSocket error: ' + error);
      };
    </script>    
 </head>
</html>

应用程序。jsx:

import React from 'react';
class App extends React.Component {

    render() {
  return (
     <div>
        Hello world!!!
     </div>
  );
    }  
}
export default App;

main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('content'))

现在只是显示目的，我在onMessage()方法中打印这个。实际上，我如何实现这个websocket逻辑以及如何绘制简单的图形?

这是一个很好的解释如何让react组件与Websockets一起工作。

https://blog.pusher.com/making-reactjs-realtime-with-websockets/

你要做的就是绑定socket。在你的react组件的componentDidMount方法中的onmessage函数。然后，每次新消息到达时，使用setState设置组件的新状态，这会重新呈现组件。

让我们从演示开始:http://jsfiddle.net/69z2wepo/47364/

因为我找不到React Sparkline库，我可以链接到jsfiddle，我创建了一个模拟<Sparkline>组件，它绘制了一个简单的图形。但是代码的逻辑非常简单:

const Graph = React.createClass({
    getInitialState(){
    return { data : [0.25,1,0.5,0.75,0.25,1,0.25,0.5,0.75,1,0.25] }
  },
  componentDidMount(){
    // this is an "echo" websocket service
    this.connection = new WebSocket('wss://echo.websocket.org');
    // listen to onmessage event
    this.connection.onmessage = evt => { 
      // add the new data point to state
        this.setState({
        data : this.state.data.concat([ evt.data ])
      })
    };
    // for testing purposes: sending to the echo service which will send it back back
    setInterval( _ =>{
        this.connection.send( Math.random() )
    }, 1000 )
  },
  render: function() {
    // slice(-10) gives us the ten most recent data points
    return <Sparkline data={ this.state.data.slice(-10) } />;
  }
});

相关内容

最新更新

热门标签：