Raspberry Pi 3 & Python 開発ブログ☆彡

Raspberry Pi 3の使い方、設定をわかりやすく解説。Raspberry Pi3 Model B(Element14版)、Raspbian 8.0(NOOBS Ver1.9.2)を使用して開発中。

【スポンサーリンク】

WebSocket通信の仕方(Webページの値更新編)

【スポンサーリンク】

今回はWebSocketを使用してWebページの値をリアルタイムで更新する方法を紹介します。htmlのjavascriptについては素人なので、Webページの表示はきれいではないですが、ご容赦ください(bootstrap等を使用すると見た目も簡単にきれいになります)。それではコードを紹介します。

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

Webページのテーブルの中の値を1秒間隔で更新します。流れとしては、以下のようになります。

①htmlでjavascriptを使用してWebSocketサーバーに接続

②wsclient.pyからWebSocketサーバーにデータを1秒間隔で送信

③WebSocketサーバーは受け取ったデータを接続している全てのクライアントに送信

④html側で受けとったデータをテーブルに表示

wsclient.pyの修正

前回のwsclient.pyのコードをhtmlのコードに合わせて下記のように修正します。

カンマ区切りで5つのデータを送信するように変更しています。

import time
from websocket import create_connection

ws = create_connection("ws://192.168.1.10:9999/")

result =  ws.recv()
print("Received '%s'" % result)
time.sleep(1)

cnt = 0
while True:
    time.sleep(1)  
    
    data1 = cnt + 10
    data2 = cnt + 20
    data3 = cnt + 30
    data4 = cnt + 40
    data5 = cnt + 50
    cnt = cnt + 1
    ws.send(str(data1)+','+str(data2)+','+str(data3)+','+str(data4)+','+str(data5))
    result =  ws.recv()
    print("Received '%s'" % result)    

ws.close()

htmlファイルの作成(index.html)

<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<table class="table1">
  <thead>
    <tr>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
      <th>data4</th>
      <th>data5</th>
    </tr>
  </thead>
  <tbody>
    <tr>        
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
<input type="text"><input type="submit"><br>    
<script>
$(function() {

    socket = new WebSocket("ws://192.168.11.8:9999/");
    socket.onmessage = function(e) {
        
        var term = e.data.split(':');
        var term1 = term[1].split(',');
        $('.table1').find('td:nth-child(1)').html(term1[0]);
        $('.table1').find('td:nth-child(2)').html(term1[1]);
        $('.table1').find('td:nth-child(3)').html(term1[2]);
        $('.table1').find('td:nth-child(4)').html(term1[3]);
        $('.table1').find('td:nth-child(5)').html(term1[4]);

    }
    $('input[type="submit"]').on("click", function(){
        var text = $('input[type="text"]').val() ;
        socket.send(text);
        $('input[type="text"]').val("");
    });
});

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

 

htmlの説明をします。テーブルとテキストボックスをUIとして作成しています。javascriptの部分は、

・socket = new WebSocket("ws://192.168.11.8:9999/");

⇒ WebSocketサーバーに接続しています。
・socket.onmessage = function(e) {

⇒WebSocketサーバーからのメッセージを受信しています。"e"にメッセージが入っていますので、メッセージを分解して各テーブルセルに代入しています。

・$('input[type="submit"]').on("click", function(){

⇒送信ボタンをクリックするとテキストボックスの文字列をWebSocketサーバーに送信します。wsclient.pyで送信したメッセージが表示されます。

 

動作確認

上記のhtmlファイルを/var/www/htmlフォルダに移動します。

※Webサーバーは下記のブログの手順で起動しておいてください。

 ・ブラウザのアドレスバーに"http://[RaspberryPiのIPアドレス]"と入力し、上記で作成したWebページを表示します。

・ターミナル1 ⇒ 前回ブログのwsserver.pyを起動します。

・ターミナル2 ⇒ 今回ブログで修正したwsclient.pyを起動します。

 

Webページのテーブルの値が1秒おきにカウントアップされ、表示されていれば成功です。センサー等で取得した値をWebページでリアルタイムに表示できるようになりました。ものとWebが繋がりましたね。