MENU

溶けかけてるうさぎ HP GALLERY BLOG TOP RECENT ARTICLES POPULAR ARTICLES ABOUT THIS BLOG

CATEGORY

大学 (140) 仕事 (17) 航空宇宙 (104) 写真 (78) 旅行 (32) 飯・酒 (17) コンピュータ (119) その他 (44)

TAG

ARCHIVE

RECENT

【写真】撮影写真を Map 上に表示できるようにした 【カメラ】X100 シリーズが好きすぎる(主にリーフシャッタ) 【カメラ】X100V から X100VI に買い替えました 【自宅サーバー】Google Domains から Cloudflare にドメインを移管 【カメラ】FUJIFILM XF レンズのサイズ比較ができるようにしてみた

【WebSocket】Raspberry Pi搭載ロボットをPCのブラウザから遠隔操縦する(環境構築編)

事象発生日:2018-12-19

記事公開日:2018-12-19

アクセス数:4759

この前の記事「」で,Raspberry Piを積んだロボットを遠隔PCからWebRTCで操作しようとして失敗したことを報告した.

そこで,今回はきちんと下調べをして,WebSocketというプロトコルを使ってリトライしてみることにした.

 

分量が多くなりそうなので,ここでは環境構築まで掲載する.

 

トップ画像の出典はこちらこちら

1.開発環境

ロボット

Raspberry Pi Mouse

Raspberry Pi 3

Ubuntu Server 16.04.5 LTS (Xenial Xerus)

遠隔PC

Microsoft Windows 10 Home 1803 (64bit)

Google Chrome 71.0.3578.80 (Official Build) (64bit)

ネットワーク

ロボット,PC,ともにWiFiによって同一LANにいる.

2.ロボット(サーバー側)環境構築

などを参考に進める.

情報がかなり古いので,適宜アップデートしている.

Apacheのインストール

Node.jsでWebサーバーを建ててしまうのであれば不要だが,あると便利なのでインストール.

$ sudo apt install apache2

遠隔PC側ブラウザでロボットのIPへアクセスして,ApacheのDefault Pageが表示されていればOK.

 

とりあえず設定がめんどくさいので,www rootをユーザーディレクトリ直下でつくってしまう.

$ mkdir ~/public_html
$ sudo a2enmod userdir
$ sudo service apache2 restart

そして,ブラウザから http://${robot_ip}/~${robot_user}/ と打って,ユーザーディレクトリが表示されればOK.

public_html は空なので,なにも表示されないはず.

nvm(Nodeバージョン管理マネージャー)とNode.jsのインストール

nvmインストール.

$ git clone git://github.com/creationix/nvm.git ~/nvm
$ ./nvm/install.sh

SSHログインし直して, $ nvm と打ち,nvmがインストールされたことを確認.

 

$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v10.14.2...
Downloading https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-armv7l.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.14.2 (npm v6.4.1)
Creating default alias: default -> lts/* (-> v10.14.2)
$ nvm use --lts
Now using node v10.14.2 (npm v6.4.1)
$ node -v
v10.14.2
$ nvm alias default lts/*
default -> lts/* (-> v10.14.2)

でNode.jsが入った.

最後の行でデフォルト設定をしており,次回SSHログイン時にも実行されるバージョンが引き継がれる.

3.wsモジュールで動作確認

WebSocketのwsモジュールをインストール

Nodeのモジュールはデフォルトでは ~/node_modules/ にインストールされるので,ディレクトリを作っておく.(不要だったかもしれない.)

$ cd
$ mkdir node_modules

 

wsモジュールインストール.

$ npm install ws
npm WARN saveError ENOENT: no such file or directory, open '/home/${robot_user}/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/${robot_user}/package.json'
npm WARN ${robot_user} No description
npm WARN ${robot_user} No repository field.
npm WARN ${robot_user} No README data
npm WARN ${robot_user} No license field.

+ ws@6.1.2
added 2 packages from 2 contributors and audited 2 packages in 2.29s
found 0 vulnerabilities

WebSocketのサンプルコード実行

「Node.jsプログラミングガイド」のサンプルページから,chart.htmwsserver.js をとってくる.

適当に両方を ~/public_html に配置し,環境依存部(ws://ccchart.com:3001 のようなアドレスや,開放するポートなど)を修正しておく.

 

そして,

$ node ~/public_html/wsserver.js

でサーバーサイドを起動して,ブラウザから http://${robot_ip}/~${robot_user}/chart.htm にアクセスしてリアルタイムに変化するグラフが見れればOK.

4.Socket.IOで動作確認

wsモジュールのほうがシンプルでわかりやすいが,もう少し高機能でよく使われているモジュールであるSocket.IOを試してみる.

Socket.IOもwsモジュールをラップしているものなので,基本は同じである.

 

$ npm install socket.io
npm WARN saveError ENOENT: no such file or directory, open '/home/${robot_user}/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/${robot_user}/package.json'
npm WARN ${robot_user} No description
npm WARN ${robot_user} No repository field.
npm WARN ${robot_user} No README data
npm WARN ${robot_user} No license field.

+ socket.io@2.2.0
added 43 packages from 31 contributors and audited 80 packages in 11.262s
found 0 vulnerabilities

でSocket.IOのモジュールをインストール.

 

にあるチャットアプリのデモを入れてみて,動作確認をした.

5.つづき

さて,WebSocketの環境が整ったので,次の記事「」ではRaspberry Piのロボットを遠隔操作してみる.

 

ネット上の情報も多いし,wsではなく,Socket.IOを使ってみようかな.

6.出典・参考

HTML5Experts.jp. NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(OSインストール編). Retrieved December 19, 2018, from https://html5experts.jp/toshirot/4718/
Qiita. nvm + Node.js + npmのインストール. Retrieved December 19, 2018, from https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3
DevelopersIO. node.jsのいろいろなモジュール23 – wsでWebSocket接続. Retrieved December 19, 2018, from https://dev.classmethod.jp/server-side/ws/
@IT. いまさら聞けないWebSocketとSocket.IOの基礎知識&インストール (1/2). Retrieved December 19, 2018, from http://www.atmarkit.co.jp/ait/articles/1603/14/news015.html

関連記事

コメントを投稿

名前

Email (※公開されることはありません)

コメント