Raspberry Pi & Python 開発ブログ ☆彡

Raspberry PiとPythonの基本的な使い方をわかりやすく解説。初心者、入門者必見!!

SocketIO通信の仕方:Webページ編

今回は、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であれば、とても簡単です。

www.raspberrypirulo.net

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編と長くなりましたが、難しかったでしょうか。これができるようになると、モノとインターネットを繋ぐことができます。

ラズパイ ソフトウェアに戻る
トップページに戻る