１．開発環境

ロボット

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にいる．

２．ロボット（サーバー側）環境構築

などを参考に進める．

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

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ログイン時にも実行されるバージョンが引き継がれる．

３．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.htm と wsserver.js をとってくる．

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

 

そして，

$ node ~/public_html/wsserver.js

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

４．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のモジュールをインストール．

 

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

５．つづき

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

 

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

６．出典・参考

	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

関連記事