ブラック研究室へようこそ!

大企業を退職して個人事業主になった日常、ブラック研究室のエピソード、Web/アプリ開発の備忘録など。

【IT備忘録】リアルタイムお絵かきシステムを作ってみた① 〜Socket.IOで双方向通信〜

 

こんなものを作ってみました

余興用にまたちょっとしたものをつくってみました。

「リアルタイムお絵かきシステム」です!

 

f:id:blackLab:20180531214347j:plain

 

スマホでお絵かきすると、投影用のパソコンにもリアルタイムに絵が書かれてゆきます。

 

ほぼほぼ遅延無しで、筆使い(指使い?)がパソコンに反映されていますね。

 

 

面白いですね〜。

一度、大きな忘年会で、以下のクイズシステムと組み合わせて、

「誰が一番○○さんを上手く描かけるか?!」という問題にしてこれを使ったのですが、

かなり盛り上がりました。

blacklab-blog.net

 

決め手は「Socket.IO」

クイズシステムも同じ仕組みを使っているのですが、

この技術の決め手は「Socket.IO」です。

 

f:id:blackLab:20180531215441p:plain

通常、HTTPでは、クライアントがサーバに対して、ページや情報を取りに行く、単方向の通信しかできません。

 

ですが、このSocket.IOというのを使ってやると、上記だけでなく、サーバがクライアントに対して、「状況変わったから、画面書き換えてね」という情報を送ってやることができるのです。

双方向通信、まさにインタラクティブってやつですね。

 

それを応用してやると・・・

f:id:blackLab:20180531222624p:plain

今回、それを応用してやるとこうなります。

 

<クライアント→サーバの通信>

まず、クライアント①にあたるスマホから指で線を引きます。

書いたこと(線の開始点・終了点も含め)をサーバへ伝えます。

 

<サーバ→クライアントの通信>

次に、サーバが、クライアント②にあたるPCへ「線書かれたんだけど」という情報を伝えてやります。

それを受け取ったPCは、「ここからここまで書かれたらしい」ということで、その通りに画面内に線を引っ張ります。

 

これらの通信によって、スマホで書いた線が、PC側にも反映され、絵の同期が取れるわけですね。

 

対応ブラウザ(クライアント側)

このSocket.IOは、Google Chrome・Safari・Firefox、そして鬼門のIEちゃんでも比較的新しいバージョンなら動きます。多分、Operaとかの他のニッチなブラウザでも動くはずです。

 

サーバ側

サーバ側は、Node.jsという土台のWebサーバプログラムを導入し、その上にSocket.IOのライブラリを導入してやることになります。

このあたりは、次回詳しく書きます。

 

デモページ

f:id:blackLab:20180531225228p:plain

スマホは、画面回転をOFFにした上で、横に90度本体を持ち替えた状態で書いてください。そうすると、PC上に正しい方向で線が書かれるはずです。

※下の写真の状態です!

f:id:blackLab:20180531225733p:plain

 

※同時に複数の方がアクセスして絵を書くと、当然PC上にそれが反映されますので、故障ではありません!(笑)

 

 

次回は、実装の仕方など、もう少しブレークダウンして書きたいと思います。

 

では、また!!!

 

>>次回の記事はこちら

blacklab-blog.net