Socket.io×jQuery最小勉強コストでチャットを作る ITかあさん

ITかあさん

Socket.io×jQuery最小勉強コストでチャットを作る


Socket.io×jQuery最小勉強コストでチャットを作る

socket.io
※この記事は2014年9月7日に開催された秋のJavascript祭りのITかあさんのセッションネタをちょっと詳しく解説します。

画像は自主規制しました。意味がわかり難いかもしれませんが、Socket.ioを理解する上では全く必要ありません。

懇親会の最中に、「このセッションのために僕は来ました!」と何人かのお兄さんに声をかけられました。
ありがとうございます、Nodeをやると、若いお兄さんと知り合えるのですね、お母さんはこれからもNodeがんばって勉強します。

Socket.ioは1.0以上がリリースされているよ

セッション中も何度も繰り返しましたが Socket.ioは5月末にSocket.io1.0がリリースされております。
世の中に出ているSocket.ioの情報の多くは0.9以前のため、最新のSocket.ioをインストールした場合は、ほとんどの場合動きません。
Socket.ioのバージョンには十分注意してください。

今回のかあさんのセッション内容は1.0以上で動作します。

Socket.io 1.0以降の情報まとめ

Socket.IO 1.0の紹介 (翻訳)
http://yosuke-furukawa.hatenablog.com/entry/2014/05/30/093103Socket.IO 1.0 (本家)
http://socket.io/blog/introducing-socket-io-1-0/Socket.io1.0使い方と変更点)
http://qiita.com/nkzawa@github/items/1e526feb6c9e3b96c089

Get Started: Chat application (今回のスライドの元ネタ)
http://socket.io/get-started/chat/

Socket.ioは1.0チャットで必要なもの

・Nodeサーバー
・socket.io ver1.0(2014.5末に公開されたよ!)
・jQuery

Nodeサーバーのインストール方法

過去に記事を書いておりますので、こちらを参照ください。
※remiリポジトリがあればCentOSではyumコマンド一発だと書いておりますが、
正しくはepelリポジトリの間違いでした。

nodeとモジュール管理のnpmをインストールしたら今回のsocket.ioをインストールすると、何もしなければ最新のsocket.ioがインストールされます。

npm install socket.io

シンプルチャットの元ネタの解説

今回は一切私でオリジナルのコードを書いておりません。すべてはこちらを参照してください。

Get Started: Chat application (今回のスライドの元ネタ)
http://socket.io/get-started/chat/

ですが、一切Node未経験ですと、意味がわからない、動かないということになりかねないのでいくつか補足説明します。

スクリプトを自分の環境に設置する

Nodeのインストールされている環境であればどこでもかまいません。
スクリプトを設置したら、設置したスクリプトと同じ階層にnpmコマンドでモジュールを設置します。

ファイルのパスを設定する

index.jsがサーバー用のjavascriptファイルです。
res.sendfileの中身だけ書き換えてください。
res.sendfile(‘出力させるページのサーバーの絶対パス’);

例 res.sendfile(‘/var/www/html/node/index.html’);

クライアント側のhtmlファイルにsocket.ioのファイルのパスを正しくつなぐ

クライアント側のファイルとは、ユーザーが見る画面を作っているhtmlファイルのことです。
サンプルでは以下のようになっております。

/socket.io/socket.io.js

しかし、npmコマンドでモジュールをインストールしている場合はもう少し複雑な階層になっているはずです。私の場合は以下のようになりました

http://192.168.33.41/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

サーバー用ファイルであるスクリプトを実行する

サーバー用javascriptをnodeコマンドで実行します

$ node index.js

URLにアクセスする

http://192.168.33.41:3000

割り当てたポートに対して、クライアントファイルがincludeされて読み込まれているようなイメージなので、クライアントファイルをURLでたたいても意味がありません。
割り当てたポートで確認しましょう。

基本的には、ファイルパスを指定して、スクリプトを実行して、URLにアクセスするだけです。

これ以外に何もしなくても動きます。

それでも動かない場合は3000のポートが開いているかのチェックと、
Chrome→要素検証→Console またはNetworkでエラーが出ていないかチェックしてください。
Socket.ioのファイル自体正しく読み込まれていない可能性があります。

理解しなければならないことは、onとemitだけ。

emit→送信する
on→メッセージを受け取った時の処理

ただし、ちょっとだけ覚えておいてもらいたいのはNode.jsはサーバーサイドJavascriptです。
サーバーを間に挟みますので当たり前といえば当たり前ですが構造はこうなります。

×送信者→受信者
○送信者→Nodeサーバー(受信)→受信者(サーバーからメッセージを受け取る)
1.送信者socket.emit()
2.Nodeサーバーsocket.on() メッセージ受信
3.Nodeサーバーsocket.emit() メッセージを送信
4.受信者socket.on() メッセージ受信

メッセージは送信者から受け取るのではなく、Nodeサーバーから受信していることを忘れないでください。
そこだけ初めてのNodeだとつまずくと思うので、頭の片隅に入れて、ソースコードを読んでいくとSocket.ioが理解しやすいと思います。

まとめ

Socket.ioは1.0からより簡単になった
socket.emitとsocket.onだけを頭に入れる
メッセージは送信者→Nodeサーバー→受信者

あとはとにかくやってみるべしです!

今回は「すぐできる」ことをテーマに作ってみたのでデータベースにinsertすることもしていなければ、
チャットルームも作っていません。
つまりNodeの環境にいる人すべてにメッセージを送ってしまうので、
今度はチャットルームについても触れたいと思います。

どうもありがとうございました。