WebSocketでラズパイのLチカ

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

WebSocketでブラウザからLチカ

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

まずはラズパイとLEDだけで簡単な動作テストをしておこう。図のように、ラズパイのGPIO11に1kΩを通して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 Zero W - ヘッダー ハンダ付け済み - ラズベリー・パイ ゼロ W ワイヤレス
Raspberry Pi Zero W - ヘッダー ハンダ付け済み - ラズベリー・パイ ゼロ W ワイヤレス

Amazon
正規代理店商品 Raspberry Pi 4 Model B (8GB) made in UK element14製 技適マーク入
正規代理店商品 Raspberry Pi 4 Model B (8GB) made in UK element14製 技適マーク入

Amazon

Raspberry Piの参考書

Raspberry Pi クックブック 第2版 (Make:PROJECTS)
Raspberry Pi クックブック 第2版 (Make:PROJECTS)

本書は、全世界で多くのユーザーの支持を集めているマイコンボード「Raspberry Pi」を使いこなすためのレシピ集です。ハードウェアの基本、オペレーティングシステムの使い方、ネットワーク接続、Pythonプログラミングの基本を紹介した上デ、実際の作品製作に必要になる、高度なPythonプログラミング、GPIO(汎用入出力)、モーター、センサー、ディスプレイなどの使い方へと解説を進めていきます。

Amazon
写真や図解でよくわかる ラズパイZeroを使い倒す本 Raspberry Pi Zero/Zero W対応
写真や図解でよくわかる ラズパイZeroを使い倒す本 Raspberry Pi Zero/Zero W対応

本書ではRaspberry Pi Zero / Zero Wの概要から必要な周辺機器の説明、OSの導入やセットアップなどといった準備、そしてLinuxに初めて触れる人に向けてLinuxの基礎やシェルの操作などを解説しています。また、準備が整ったら実際に電子部品をRaspberry Pi Zero / Zero Wで制御する方法も解説しました。

KindleAmazon
Raspberry Pi ZeroによるIoT入門- Zero W 対応
Raspberry Pi ZeroによるIoT入門- Zero W 対応

本書は、大人から子供まで、初心者の方でも、ラズパイZeroとラズパイZero WをIoTのデバイスとして使いこなせるようになることを目的とした入門書です。また、ラズパイZeroとラズパイZero WをUSBケーブル1本でパソコンに接続できる便利な「Zero over USB」について、日本で初めて詳しく解説しました。

Amazon

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

あなたにおすすめ