WebSocketでラズパイのLチカ

WebSocketでブラウザからLチカ
WebSocketでブラウザからLチカ

この記事ではHTMLとJavaScriptでボタンを作り、Macのウェブブラウザからラズパイを遠隔操作する方法を説明する。通信方法はWebSocketで行っていく。遠隔操作できるようになるのが目的なので、LEDをオンオフ(Lチカ)するだけの簡単なプログラムとなる。

ここではRaspberry Pi zeroを使ったが、WiFi機能があれば他のラズパイでもOK!

ラズパイでLEDを点滅させてみよう

まずはラズパイとLEDだけで簡単な動作テストをしておこう。図のように、ラズパイのGPIO11に1kΩを通してLEDをつないでおく。

ラズパイGPIOとLEDの回路図
ラズパイGPIOとLEDの回路図

RPi.GPIO を使って、LEDを5回点滅させるだけの簡単なプログラムだ。これでLEDをオンオフできるようになった。

# -*- coding: utf-8 -*-
import RPi.GPIO as GPIO
from time import sleep

LED = 11
GPIO.setmode(GPIO.BCM)
GPIO.setup(LED, GPIO.OUT)

for t in range(0, 5):
    GPIO.output(LED, True)
    sleep(1)
    GPIO.output(LED, False)
    sleep(1)

ラズパイにWebSocketサーバー設定しよう

さきほどのLEDをWebSocketで点灯できるようにしてみよう。ラズパイでWebSocketのデータを受信できるようにするため、Pythonで動く websocket-server ライブラリを使った。pipでインストールできるので次のようにしてインストールしてく。

$ sudo pip install websocket-server

そして作成したPythonプログラムがこちら。ただしIPアドレスはラズパイのIPアドレスに置き換える。クライアントからWebSocketのメッセージを受信できるようになっている。メッセージが led_on であればLEDを点灯、led_off であれば消灯するプログラムである。ファイル名をled_switch_sever.py にしてラズパイに保存しておこう。

# -*- coding: utf-8 -*-
import RPi.GPIO as GPIO
from time import sleep
from websocket_server import WebsocketServer

LED = 11
GPIO.setmode(GPIO.BCM)
GPIO.setup(LED, GPIO.OUT)


def receivedMessage(client, server, message):
    print(message)
    if message == 'led_on':
        GPIO.output(LED, True)
    elif message == 'led_off':
        GPIO.output(LED, False)
    else:
        print("Unknown Message: {}".format(message))
    

server = WebsocketServer(5555, host="192.168.100.136")
server.set_fn_message_received(receivedMessage)
server.run_forever()

WebSocketの仕組みのを詳しく知りたい方はこちら

HTMLとJavaScriptでWebSocketクライアントを作ろう

次に、HTMLとJavaScriptでWebSocketクライアントを作っていく。今回はMacを使ったが、HTMLファイルが実行できればWindowsでもスマホからでも動作するはず。好きな端末をクライアントマシンにしよう。

作ったクライアントプログラムがこちら。ボタンを配置し、それを押すとラズパイへWebSocketを投げるプログラムとなっている。led_switch_client.html として適当な場所に保存しておこう。

<html>

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <script>
        $(function () {
            var ws = new WebSocket("ws://192.168.100.136:5555/");

            $('#btn').on('click', function () {
                if($('#btn').text() == "OFF") {
                    $('#btn').text("ON")
                    ws.send('led_on');
                } else {
                    $('#btn').text("OFF")
                    ws.send('led_off');
                }
            });


        })
    </script>
    <style>
        #btn{ 
            width: 500px;
            height:200px;
            font-size:100px;
        }
    </style>
</head>

<body>
    <button id="btn">OFF</button>
</body>

</html>

WebSocketでLEDを点灯してみよう

それでは最後に、プログラムを実行してラズパイのLEDを点滅させてみよう。まずラズパイで $ python led_switch_sever.py を実行して、WebSocketサーバーを立ち上げておく。次に led_switch_client.html をウェブブラウザ開いてみよう。下の動画のようにボタンを押すごとに、ラズパイに接続されたLEDが点灯消灯を繰り返すはずだ。

WebブラウザーからラズパイのLEDをリモート操作
WebブラウザーからラズパイのLEDをリモート操作

記事に関するご質問などがあればTwitterへお返事ください。
この記事で紹介した商品
人気のラズパイ
人気のラズパイ周辺機器
Raspberry Piのオススメ入門書
関連記事