WebSocketでラズパイのLチカ

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

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

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

Raspberry Pi Zero W - ヘッダー ハンダ付け済み
Raspberry Pi Zero W - ヘッダー ハンダ付け済み
Amazon
Raspberry Pi 4 Model B 8GB 技適マーク入 正規品!ラズベリーパイ4 モデルB
Raspberry Pi 4 Model B 8GB 技適マーク入 正規品!ラズベリーパイ4 モデルB
Amazon

ラズパイで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をリモート操作

人気のラズパイ

Raspberry Pi 4 Model B 8GB 技適マーク入 正規品!ラズベリーパイ4 モデルB
Raspberry Pi 4 Model B 8GB 技適マーク入 正規品!ラズベリーパイ4 モデルB
Amazon
TRASKIT Raspberry Pi 4 Model B Starter Kit
TRASKIT Raspberry Pi 4 Model B Starter Kit
Amazon
Raspberry Pi Zero W - ヘッダー ハンダ付け済み
Raspberry Pi Zero W - ヘッダー ハンダ付け済み
Amazon

人気のラズパイ周辺機器

10 インチRaspberry Pi用タッチモニター EleDuino HDMI モバイルディスプレイ
10 インチRaspberry Pi用タッチモニター EleDuino HDMI モバイルディスプレイ
Amazon
Raspberry Pi4 Model B /アルミニウム金属ケース/ファンレス/放熱シート付き
Raspberry Pi4 Model B /アルミニウム金属ケース/ファンレス/放熱シート付き
Amazon
Freenove Raspberry Pi 4 B 3 B+ 400用の究極のスターターキット
Freenove Raspberry Pi 4 B 3 B+ 400用の究極のスターターキット
Amazon
KEYESTUDIO DC 5V 4チャンネル リレーシールドモジュール 拡張ボード for Raspberry Pi
KEYESTUDIO DC 5V 4チャンネル リレーシールドモジュール 拡張ボード for Raspberry Pi
Amazon

Raspberry Piのオススメ入門書

Raspberry Piクックブック 第3版 (Make:PROJECTS)
Raspberry Piクックブック 第3版 (Make:PROJECTS)
Amazon
これ1冊でできる! ラズベリー・パイ 超入門 改訂第6版 Raspberry Pi 4/Zero W対応
これ1冊でできる! ラズベリー・パイ 超入門 改訂第6版 Raspberry Pi 4/Zero W対応
KindleAmazon
写真や図解でよくわかる ラズパイZeroを使い倒す本 Raspberry Pi Zero W対応
写真や図解でよくわかる ラズパイZeroを使い倒す本 Raspberry Pi Zero W対応
KindleAmazon
記事に関するご質問などがあれば、ぜひTwitterへお返事ください。