사전 준비, 전지식(멋진 참고 사이트)

실시간 차트 : htps : // 코 m / 료마 D 사카모토 / ms / 61 1501683 에 df4338
Websocket 주위: htps : // 코 m / Dr10_ 타케히로 /

환경

송신측

OS: Debian GNU/Linux 9.6 (stretch) ※나즈파이입니다
파이썬 : 2.7.13
tornado: 5.1.1

수신측

moment.js: 2.22.2
chart.js: 2.7.3
chartjs-plugin-streaming: 1.7.0

처리 흐름

1. 송신측이 Websocket으로 보낸다.

server.py

#!/bin/env python
# -*- coding: utf-8 -*-
import json
import time

import random
import datetime

import tornado.websocket
import tornado.web
import tornado.ioloop

class SendWebSocket(tornado.websocket.WebSocketHandler):
    def open(self):
        print ('Session Opened. IP:' + self.request.remote_ip)
        self.ioloop = tornado.ioloop.IOLoop.instance()
        self.send_websocket()

    def on_close(self):
        print("Session closed")

    def check_origin(self, origin):
        return True

    def send_websocket(self):
        self.ioloop.add_timeout(time.time() + 0.1, self.send_websocket)
        if self.ws_connection:
            message = json.dumps({
                'data': random.randint(0, 100),
                })
            self.write_message(message)

app = tornado.web.Application([(r"/ws/display", SendWebSocket)])

if __name__ == "__main__":
    app.listen(8080)
    tornado.ioloop.IOLoop.current().start()

2. 수신측이 송신한 데이터를 그래프에 기입한다.

display.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<canvas id="myChart"></canvas>
<script type="text/javascript" src="./js/moment.js"></script>
<script type="text/javascript" src="./js/Chart.js"></script>
<script type="text/javascript" src="./js/chartjs-plugin-streaming.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                data: []
            }]
        },
            options: {
                scales: {
                    xAxes: [{
                        type: 'realtime'
                    }]
                }
            } 
        });
// server IP : 192.168.1.1
var connection = new WebSocket('ws://192.168.1.1:8080/ws/display');
connection.onmessage = function (e) {
    chart.data.datasets[0].data.push({
        x: Date.now(),
        y: JSON.parse(e.data)["data"]
    });
    chart.update();
};
</script>
</body>
</html>

움직이다

송신측

$ python server.py
#受信htmlを開いて接続成功時には下記が表示される。
Session Opened. (IP)

수신측

Reference

이 문제에 관하여(websocket을 사용한 실시간 그래프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/onsen_koichi/items/39199d60fca7ecf8964e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다