Python WebSocket通信の仕方：Webページ編 - Raspberry Pi & Python 開発ブログ ☆彡

websocket web

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

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

構成
サンプルコードの内容、流れ
Webページ(クライアント)の準備
- Webサーバーの立ち上げ
- index.htmlの作成
動作確認

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

www.raspberrypirulo.net

構成

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

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

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

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

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

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

データのやりとり

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

Webページから入力したデータをWebSocketサーバーに送信
WebSocketサーバーは受信したデータをWebSocketクライアント(ws_client.py)に送信
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>