WebSocketでLチカ【ラズパイ】
この記事ではHTMLとJavaScriptでボタンを作り、Macのウェブブラウザからラズパイを遠隔操作する方法を説明する。通信方法はWebSocketで行っていく。遠隔操作できるようになるのが目的なので、LEDをオンオフ（Lチカ）するだけの簡単なプログラムとなる。
ゴール
ここではRaspberry Pi zeroを使ったが、WiFi機能があれば他のラズパイでもOK！
ラズパイで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をリモート操作
