Как рисовать простой график искры, используя реакцию js?

Я реализую клиент-серверное приложение websocket, в котором сервер websocket реализован в узле js, который отлично работает со своими соединениями для клиентских подключений на 1234-порте.Как рисовать простой график искры, используя реакцию js?

На стороне клиента я должен реализовать это в ответном js, потому что сервер отправляет сообщения подключенным клиентам, и на основе этих сообщений мне нужно реализовать простой график, используя реагирующие искровые линии. Пожалуйста, расскажите мне, как я могу рисовать график, используя эти входные значения, исходящие из 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>

App.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'))

На данный момент только Displ Я печатаю это методом onMessage(). На самом деле, как я могу реализовать эту логику websocket и как рисовать простой граф?

источник

2016-06-30 kit

Вот отличное объяснение при работе с компонентами для работы с компонентами.

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

То, что вы в основном, делают это связывают функции socket.onmessage внутри метода componentDidMount из вашей реакции компонента. Затем каждый раз, когда приходит новое сообщение, вы устанавливаете новое состояние компонента с помощью setState, которое повторно отображает компонент.

источник

2016-06-30 13:42:48

Да ... Сделано с этими вещами ... Есть ли подходящий пример для искровой линии, чтобы я мог лучше понять, как рисовать график? Я следую этой ссылке [http://jsfiddle.net/69z2wepo/47364/], но не понимаю, как рисовать график на основе оси x и содержимого оси y? – kit

@kit Какие данные у вас есть? Спарклинги обычно не имеют осей. –

Я хочу дату на оси х, а некоторые случайные числа (например, 422) находятся на оси y. Но на самом деле мне удалось получить решение GroupBarChart для реакции-d3. – kit

Давайте начнем с демо: http://jsfiddle.net/69z2wepo/47364/

Так как я не мог найти Реагировать спарклайн Lib я мог бы связать с 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) } />; 
    } 
});

источник

2016-06-30 13:43:21 pawel

Это действительно необходимо для меня, но когда я пытаюсь выполнить эту задачу ** Конфигурация Bad JSFiddle, пожалуйста, переделайте оригинальную ошибку React JSFiddle **, это связано с тем, что мы предоставили в html-файле - _ _ ... Как я могу избежать этой ошибки? n заставить это приложение работать? – kit

Как рисовать простой график искры, используя реакцию js?

ответ

Смежные вопросы