今回は、PythonでSocket.IOモジュールを使って、webページの値を更新したり、webページから入力された文字等を取得する方法を紹介します。下記の2つのSocket.IOサーバーとクライアントも出来ていないと動きませんので、先に読んでおいてください。
サンプルコードの内容、流れ
クライアントで値を入力すると、Webページのテーブルの値が入力した値にリアルタイムで更新されるコードを作りたいと思います。流れとしては、以下のようになります。
◆サーバー、クライアントの起動と接続
1.SocketIOサーバー起動(sock_server.py)
2.SocketIIOクライアント(sock_client.py)を起動し、SocketIOサーバー接続
3.html(クライアント)でjavascriptを使用してSocketIOサーバーに接続
◆データのやりとり
1.SocketIIOクライアント(sock_client.py)からSocketIOサーバーにデータ送信
2..SocketIOサーバーは受信したデータを全クライアントに送信
3.htmlは受信したデータをページに反映
1.htmlで入力したデータをSocketIOサーバーに送信
2.SocketIOサーバーは受信したデータをSocketIIOクライアント(sock_client.py)のみに送信
3.SocketIIOクライアント(sock_client.py)はデータを受信
html(クライアント)の準備
Webページはフレームワークを使用して作ると思いますが、今回はSocketIOの動作確認のため、フレームワークは使用せずに、簡易的に作成しています。
Webサーバーの立ち上げ
何でも良いですが、Webサーバーを立ち上げてWebページが表示できるようにします。下記ブログのapacheであれば、とても簡単です。
socket.io-clientモジュールのインストール
これから作成するindex.htmlと同じフォルダに移動して、下記コマンドでインストールを行ってください。
(上記のapacheでWebサーバーを立てているのであれば、デフォルトで/var/www/html/index.htmlです)
$ npm install socket.io-client
index.htmlと同じ階層にnode_modulesというフォルダが作成されます。その中のsocket.io-client/dist/socket.io.jsを指定して、モジュールをインポートします。
index.htmlの作成
socket.on(イベント名、データ)でイベントハンドラを作成します。また、socket.emitでメッセージをSocketIOサーバーに送信します。
<head> <title>SocketIO</title> <script src="./node_modules/socket.io-client/dist/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <table class="table1"> <thead> <tr> <th>data1</th> <th>data2</th> <th>data3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> <input type="text"><input type="submit"><br> <script> $(function() { var socket = io('http://192.18.0.10:3000/test'); console.log('data'); socket.on('response', function (data) { var term = data.split(','); $('.table1').find('td:nth-child(1)').html(term[0]); $('.table1').find('td:nth-child(2)').html(term[1]); $('.table1').find('td:nth-child(3)').html(term[2]); }); $('input[type="submit"]').on("click", function(){ var text = $('input[type="text"]').val() ; socket.emit('skip_sid_message', text); $('input[type="text"]').val(""); }); }); </script> </body> </html>
動作確認
それでは、サーバー、クライアント、Webページ(クライアント)を動かしてみましょう。
・ターミナル1 ⇒ SocketIOサーバー(sock_server.py)を起動します。
・ターミナル2 ⇒ SocketIOクライアント(sock_client.py)を起動します。
・ブラウザのアドレスバーに"http://192.18.0.10と入力し、上記で作成したWebページを表示します。
※sock_server.py、sock_client.py、htmlのコード内のIPアドレスは全て、raspberry piのIPアドレスに置き換えてください。今回は例として、192.18.0.10を使用しています。
クライアントのターミナルで例えば 123,456,789と入力して、Enterキーを押すとWebページのテーブルの値が更新されます。またWebページの入力ボックスに何か文字を入力し、送信ボタンを押すと、クライアント側にログとして表示されます。
pythonからSocketIOのモジュールを使って、Webページとデータのやり取りができるようになりました。これでセンサーをWebに表示したり、またWebページのボタンを押すとLEDを光らせる等できるようになります。
サーバー編、クライアント編、Web編と長くなりましたが、難しかったでしょうか。これができるようになると、モノとインターネットを繋ぐことができます。