【Node.js】socket.io を使ってチャットサービス作成


ゲームをすると10分くらいで眠くなります。okitaです。

以前Nodeの記事を書いたけど
また私の中でNodeがアツいですι(´Д`υ)アツィー

この間の飲み会で「javascript」が好きっていう人が
少なかったことは内緒の方向で・・・・(´・ω・`)

今回は「socket.io」を使います。
ついでに以前「Node.js + Express を試してみたった」を書いたので
Expressも使って作ってみます!

■まずは名前を決めます

my-socket-app
適当です。基本悩んだらmyって付けます!


■expressを使ってファイル等を作成


■インストール


■ectを使うのでectをインストールしてejsを削除

package.jsonを見るとわかると思いますが
expressのデフォルトは「ejs」なのかな?
しかしいろいろ試したいので今回は「ect」を使います。


■socket.ioをインストール


■ectファイルの準備

「ect」 を使うのにいろいろ編集する必要があるそうで・・・・

このページを参考に修正しましょう!
http://qiita.com/n0bisuke/items/37a28200fb710875566d

・app.js の編集
・layout.ect の作成
・index.ect の作成
・error.ect の作成


■一回確認してみる

「ect」がちゃんと使用できているかココで確認してみましょう。

上記コマンドでNodeを起動し
http://localhost:3000/ にアクセスします。
0001
こんな感じの画面が出れば問題なし!
確認できたらCtrl+Cで一度Nodeを終了してください。


■socket.ioを使用準備

ここで結構ハマりましたwww
まだまだ勉強不足ですねwww

今回はサクっと終わらせたいので
アプリケーションフォルダ内の「bin」の下の「www」ファイルを編集します。
「my-socket-app/bin/www」

参考にさせていただいたページ
http://qiita.com/hosomichi/items/66b309a6c3c20d910218


■ectファイルの編集

layout.ect

index.ect

でブラウザ側で使用するJavaScriptファイルをコピーします。
「my-socket-app/node_modules/socket.io/node_modules/socket.io-client/socket.io.js」
をindex.ectから見える場所にコピー
「my-socket-app/public/javascripts/socket.io.js」


■完成

これで完成です。画面を開いてみると以下のような画面ができると思います。
ブラウザを2個立ち上げて同じURLにアクセスし
チャットのようなことができると思います。
0003


本当は「sokect.io」の部分をもっとキレイに切り出したかったのですが
なんか404エラーばっか出てダメだったわwww

もっと勉強する必要がありますねw
以上です。


コメント