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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

URLにアクセスする

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

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

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

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

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

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

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

まとめ

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

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

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