ラズパイをWebSocketサーバーにしてPythonとJavaScriptで通信してみた




ラズパイをWebSocketサーバーにして、同じローカルネットワーク内にいるMacBからPythonやJavaScriptでデータ通信できるか試してみた。

あくまでWebSocketの理解を深めることが目的である。

この記事の前半ではHTMLとJavaScrpitを使ってクライントを作り、できるだけ簡単にWebSocketの通信を実現しWebSocketの全体像をつかむことを目的とする。
後半ではPythonでWebSocketクライアントを作り、HTTPヘッダーの内容まで足をふみ込んでいく。






ラズパイにWebSocketサーバーをインストール


PythonのライブラリにWebSocketサーバーがあるので、それをラズパイにインストールしてラズパイをWebSocketサーバーにしていく。
$ sudo pip install websocket-server



ラズパイからWebSocketでブラウザにメッセージを送る




websocket-sever のインストールができたところで、ラズパイからWebSocketでブラウザにメッセージを送ってみよう。

WebSocketサーバープログラム

次のような簡単なWebSocketサーバーをPythonで作った。
ラズパイからWebSocketでブラウザへ「Hello world! This is Raspberry Pi!」というメッセージを送信するプログラムである。




hostにはラズパイのIPアドレスを設定すること。
IPアドレスを調べるには、$ ifconfig を実行して wlan0inet に書かれている。





JavaScriptでWebSocketクライアントの作成

次に、ラズパイWebSocketサーバーへ通信するために、WebSocketクライアントをJavaScriptで作ってみた。このコードはMacで動かすものとする。



このコードをたとえば websocket-client.html として保存し、それをSafariで表示させてみよう。

ラズパイで設定したメッセージ「Hello world! This is Raspberry Pi!」が、ブラウザに表示されればWebSocketの通信成功である。




JavaScriptでブラウザからラズパイへWebSocketメッセージを送る



今度は逆に、クライアントからサーバーへWebSocketでメッセージを送れるようにしてみよう。

ラズパイのサーバープログラム websocket-sever.py を少し改造する。




クライアント側の websocket-client.html からラズパイへWebSocketでメッセージを送信できるように修正した。




ブラウザで表示し、ボタンを押すと次のようにメッセージを送れたと思う。



こちらの記事もオススメ!

ラズパイをウェブブラウザからWebSocketでリモート操作【JavaScript/Python】






PythonでHTTPヘッダーを書いて、WebSocketクライアントを作ってみた


ここまでやってみて、WebSocket通信はめちゃくちゃ簡単だった思う。
しかしこれほど簡単だと、正直WebSocketへの理解がまったく深まらない。

そこでJavaScriptではなく、Pythonを使ってWebSocketクライアントを作っていくことにしよう。
今回はPythonの scoket を使ってHTTPヘッダーを手作りしてみる。


WegSocketのヘッダーの構成

ところでWebSocketは次のようにHTTPリクエストを使ってWebSocketのハンドシェイクする形になっている。
GET / HTTP/1.1
Host: 192.168.100.136
Connection: Upgrade
Sec-WebSocket-Key: vTu2gqiamRGo9gXd9dKbXg==
Sec-WebSocket-Version: 13
Upgrade: websocket



Sec-WebSocket-Key というのは16byteのランダムな値をbased64でエンコードしたもの。
これはサーバーとクライアントとのハンドシェイクの受信を立証するために必要なものだ。


上記のHTTPリクエストをWebSocketサーバーへ投げると、次のようにレスポンスが返ってくる。
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: Od7wpaRgvxXMSnWrv2qkQqREX7I=



これはこれからWebSocket通信に切り替えますよということである。
このハンドシェイク後にようやくWebSocketでのデーター通信が行えるようになるわけだ。


WebSocketのデータフレーム

さらに、WebSocketのデータフレームがどうなっているのか見てみよう。



RFC6455より

流石にこのデータフレームを1から作り上げていくのはシンドイ。
今回は「へぇ、こんな感じなんだ」ということで流して、オープンソースを参考にクライアントを作成することにした。

最終的にPythonで書いたWebSocketクライアントプログラムがこちら。



データフレームのプログラムはこちらを参考

» WebSocketクライアント - Qiita


Pythonでプログラムを実行すれば、ラズパイWebSocketサーバーと通信できるはずだ。
JavaScriptではあれほど簡単だったWebScocket通信も、実際はこのように複雑な処理でできている。

とは言えデーターフレーム以外はHTTPリクエストと同じなのでそれほど難しくはないと思う。
WebSocketでの通信は今後ますます普及していくと思うので、ラズパイなどで遊びながら仕組みを理解することをオススメする。


Raspberry Pi Zero W - ヘッダー ハンダ付け済み - ラズベリー・パイ ゼロ W ワイヤレス

Amazon

あなたにおすすめ