事象発生日:2018-12-19
記事公開日:2018-12-19
アクセス数:4759
この前の記事「」で,Raspberry Piを積んだロボットを遠隔PCからWebRTCで操作しようとして失敗したことを報告した.
そこで,今回はきちんと下調べをして,WebSocketというプロトコルを使ってリトライしてみることにした.
分量が多くなりそうなので,ここでは環境構築まで掲載する.
Raspberry Pi 3
Ubuntu Server 16.04.5 LTS (Xenial Xerus)
Microsoft Windows 10 Home 1803 (64bit)
Google Chrome 71.0.3578.80 (Official Build) (64bit)
ロボット,PC,ともにWiFiによって同一LANにいる.
情報がかなり古いので,適宜アップデートしている.
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インストール.
$ 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ログイン時にも実行されるバージョンが引き継がれる.
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
「Node.jsプログラミングガイド」のサンプルページから,chart.htm
と wsserver.js
をとってくる.
適当に両方を ~/public_html
に配置し,環境依存部(ws://ccchart.com:3001
のようなアドレスや,開放するポートなど)を修正しておく.
そして,
$ node ~/public_html/wsserver.js
でサーバーサイドを起動して,ブラウザから http://${robot_ip}/~${robot_user}/chart.htm
にアクセスしてリアルタイムに変化するグラフが見れればOK.
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のモジュールをインストール.
さて,WebSocketの環境が整ったので,次の記事「」ではRaspberry Piのロボットを遠隔操作してみる.
ネット上の情報も多いし,wsではなく,Socket.IOを使ってみようかな.
名前
Email (※公開されることはありません)
コメント