Node.js+Socket.io+p5.jsで双方向通信ペイントをつくる-プログラミングはYouTube動画で学ぶ-
今回はNode.jsとSocket.ioを使ってサーバーとクライアントの双方向通信を可能にしたペイントを作ります。WindowsでNode.jsを始めてやったのですが右も左も分からない状況で、エラーが出ずに動くようになるまで大変でした。参考にした記事も載せておくのでWindowsの方は参考にしてみてください。
完成品するとこんな感じに
今回の教材
チャンネル登録者数20万人を超えるThe Coding Trainの第12シリーズ「Web Sockets and p5.js Tutorial」です。メインは12.2の後半から12.4までで、前半はNode.js+Socket.ioのインストール方法などについて触れています。動画ではMacを使っているようです。
Node.jsを動かすまでにやったこと
Windows の Node.js 開発環境構築 最小手順 - Qiita
この記事に書いてあることを全部実行しました。そうすると「npm install」でのエラーが出なくなりました。
さて、作業フォルダを新しくつくったら、次はpackage.jsonを作ります。package.jsonでプロジェクトの内容や依存性が分かります。
余談：コマンドプロンプトはフォルダ内で「Shift + 右クリック」から開けます。
package.jsonを記述する
ここは教材の動画のように「npm init」で作成すると簡単です。結果はこのようになります。
後からdependenciesの場所にExpressとsocket.ioについて追記します。すると作業フォルダ内でコマンドプロンプトを開き、「npm install」をするだけで勝手にフォルダ内に「node_modules」が作成され、依存関係にあるパッケージがインストールされます。これでSocket.ioとExpressの準備もできました。
フォルダの構造
<作業フォルダ>
|---- package.json
|---- server.js
|----< node_modules >
|----< public >
|---- index.html
|---- sketch.js
|----< libraries >
|---- p5.js
|---- p5.dom.js
|---- p5.sound.js
最終的にはこんな感じになります。
サーバー側の記述（server.js）
いちおう日本語でコメントを付けてみました。サーバーはクライアントから受け取ったdataを全員に送信しています。
ソケットの部分が今回のポイントです。分かりやすい例えがあったので紹介します。
現実世界の例とSocket.IOの比較
管理人 Socket.IOサーバ 建屋 Socket.IOモジュールまたはSockets 部屋 Socket 人 クライアントまたは接続Id 入室 Connect 会話 Emit 特定の人 Socket(Id) 部屋の全員 Socket.Broadcast 館内放送 Sockets.Emit 話題 On, Emitのイベント名
クライアント側（index.html）
index.htmlにはクライアント用のSocket.ioのJSファイルを参照するように<script>を記述するだけで完了です。p5.jsのライブラリはこちらからダウンロードできます。
p5.jsでペイントプログラムを書く（sketch.js）
マウスがドラッグされたときに、色がついた円を描画するプログラムです。同時にソケットを通じて、マウスの座標と色の情報をもつオブジェクトをサーバーに送信することで、サーバーがブロードキャストしてくれます。また、サーバーから受け取った座標と色をもとに円の描画もしています。
以上ができたら、コマンドプロンプトで「node server.js」と入力し、いくつかのブラウザから「localhost:3000」にアクセスしてみましょう。
こんなんが描けました。
まとめ
やってみたらSocketの使い方は案外理解しやすかったです。他のプログラムにも簡単に応用できそうですね！
関連記事
