Raspberry Pi & Python 開発ブログ ☆彡

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

Python WebSocket通信の仕方:Webページ編

websocket web

ブログ管理者のP.Hです!

今回はPythonでWebSocket通信を使って、webページの値を更新したり、webページから入力された文字等を取得する方法を紹介します。

下記の2つの記事(WebSocketサーバーとクライアント)の続きとなりますので、こちらもあわせてお読みください。
※本記事に出てくるws_server.pyとws_client.pyは下記の2つの記事ないで作成しています。

www.raspberrypirulo.net

www.raspberrypirulo.net

構成

  • サーバー      :Raspberry Pi IPアドレス 192.168.1.10 使用ポート:9001
  • クライアント:Raspberry Pi IPアドレス 192.168.1.10 使用ポート:9001

Raspberry Piをふたつ用意できなかったので、サーバーもクライアントも同じRaspberry Piです。もちろんサーバーとクライアントを別々の機器にすることも可能です。

サンプルコードの内容、流れ

クライアントで値を入力すると、Webページのテーブルの値がリアルタイムで更新されるコードを作りたいと思います。流れとしては、以下のようになります。

  • サーバー、クライアントの起動と接続

  1. WebSocketサーバー(ws_server.py)を起動
  2. WebSocketクライアント(ws_client.py)を起動し、WebSocketサーバーに接続
  3. Webページ(クライアント)でjavascriptを使用してWebSocketサーバーに接続

  • データのやりとり

  1. WebSocketクライアント(ws_client.py)からWebSocketサーバーにデータ送信
  2. WebSocketサーバーは受信したデータを全クライアントに送信
  3. Webページは受信したデータをページに反映

  1. Webページから入力したデータをWebSocketサーバーに送信
  2. WebSocketサーバーは受信したデータをWebSocketクライアント(ws_client.py)に送信
  3. WebSocketクライアント(ws_client.py)はデータを受信

Webページ(クライアント)の準備

Webページはフレームワークを使用して作ると思いますが、今回はWebSocketの動作確認のため、フレームワークは使用せずに、簡易的に作成しています。

Webサーバーの立ち上げ

何でも良いですが、Webサーバーを立ち上げてWebページが表示できるようにします。下記ブログのapacheであれば、とても簡単です。

www.raspberrypirulo.net

index.htmlの作成

IPアドレスとポートを指定して、WebSocketクラスを生成します。ws.send関数でWebSocketサーバーにメッセージを送信します。

<html>
<head>
    <title></title>
    <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() {

    ws = new WebSocket("ws://192.168.1.10:9001/");
    ws.onmessage = function(e) {
        var term = e.data.split(',');
        if (term[0] == 'val'){
          $('.table1').find('td:nth-child(1)').html(term[1]);
          $('.table1').find('td:nth-child(2)').html(term[2]);
          $('.table1').find('td:nth-child(3)').html(term[3]);
        }
    }
    $('input[type="submit"]').on("click", function(){
        var text = $('input[type="text"]').val() ;
        ws.send(text);
        $('input[type="text"]').val("");
    });
});

</script>
</body>
</html>

動作確認

それでは、サーバー、クライアント、Webページ(クライアント)を動かしてみましょう。

  1. ターミナル1 ⇒ WebSocketサーバー(ws_server.py)を起動します。
  2. ターミナル2 ⇒ WebSocketクライアント(ws_client.py)を起動します。
  3. ブラウザのアドレスバーに"http://192.18.1.10:9001"と入力し、上記で作成したWebページを表示します。

注意事項

  • ws_server.py、ws_client.py、htmlのコード内のIPアドレスは全て、Raspberry PiのIPアドレスに置き換えてください。今回は例として、192.18.1.10を使用しています。

クライアントのターミナルで、例えば val,123,456,789と入力して、Enterキーを押すとWebページのテーブルの値が更新されます。またWebページの入力ボックスに何か文字を入力し、送信ボタンを押すと、サーバーを経由して、クライアント側にログとして表示されます。

pythonからWebSocketのモジュールを使って、Webページとデータのやり取りができるようになりました。これでセンサー値をWebに表示したり、またWebページのボタンを押すとLEDを光らせる等、いろいろなことができるようになります。

サーバー編、クライアント編、Web編と長くなりましたが、難しかったでしょうか。これができるようになると、モノとインターネットを繋ぐことができます。

Webアプリケーション間の通信はSocketIOモジュールを使うことでも実現可能です。下記記事ではSocketIO通信について紹介していますので、あわせてご覧ください。WebSocketよりも新しいモジュールです。

www.raspberrypirulo.net