Posted at

websocketを使ってリアルタイムなグラフ

こういった使い方が正解かは分かりませんが、ラズパイセンサーの可視化に使おうと思います。


事前準備、前知識(素敵な参考サイト)

リアルタイムチャート:https://qiita.com/ryomaDsakamoto/items/e61e1501683eeddf4338

Websocketまわり:https://qiita.com/Dr10_TakeHiro/items/4b6a6e7e3cea6e62252a


環境


送信側

OS: Debian GNU/Linux 9.6 (stretch) ※らずぱいです

python: 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)

受信側