ゲームをすると10分くらいで眠くなります。okitaです。
以前Nodeの記事を書いたけど
また私の中でNodeがアツいですι(´Д｀υ)ｱﾂｨｰ
この間の飲み会で「javascript」が好きっていう人が
少なかったことは内緒の方向で・・・・(´・ω・｀)
今回は「socket.io」を使います。
ついでに以前「Node.js + Express を試してみたった」を書いたので
Expressも使って作ってみます！
目次
■まずは名前を決めます
my-socket-app
適当です。基本悩んだらmyって付けます！
■expressを使ってファイル等を作成
|
1 |
express -e my-socket-app |
■インストール
|
1 |
npm install |
■ectを使うのでectをインストールしてejsを削除
|
1 2 |
npm install ect --save npm uninstall ejs --save |
package.jsonを見るとわかると思いますが
expressのデフォルトは「ejs」なのかな？
しかしいろいろ試したいので今回は「ect」を使います。
■socket.ioをインストール
|
1 |
npm install socket.io --save |
■ectファイルの準備
「ect」 を使うのにいろいろ編集する必要があるそうで・・・・
このページを参考に修正しましょう！
http://qiita.com/n0bisuke/items/37a28200fb710875566d
・app.js の編集
・layout.ect の作成
・index.ect の作成
・error.ect の作成
■一回確認してみる
「ect」がちゃんと使用できているかココで確認してみましょう。
|
1 |
npm start |
上記コマンドでNodeを起動し
http://localhost:3000/ にアクセスします。
こんな感じの画面が出れば問題なし！
確認できたらCtrl+Cで一度Nodeを終了してください。
■socket.ioを使用準備
ここで結構ハマりましたｗｗｗ
まだまだ勉強不足ですねｗｗｗ
今回はサクっと終わらせたいので
アプリケーションフォルダ内の「bin」の下の「www」ファイルを編集します。
「my-socket-app/bin/www」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// 省略 /** * Create HTTP server. */ var server = http.createServer(app); /** * Socket.io setup ここから追記 */ var userHash = {}; var io = require('socket.io').listen(server); io.sockets.on("connection", function (socket) { console.log("connection"); // 接続開始カスタムイベント(接続元ユーザを保存し、他ユーザへ通知) socket.on("connected", function (name) { var msg = name + "が入室しました"; userHash[socket.id] = name; io.sockets.emit("publish", {value: msg}); }); // メッセージ送信カスタムイベント socket.on("publish", function (data) { io.sockets.emit("publish", {value:data.value}); }); // 接続終了組み込みイベント(接続元ユーザを削除し、他ユーザへ通知) socket.on("disconnect", function () { if (userHash[socket.id]) { var msg = userHash[socket.id] + "が退出しました"; delete userHash[socket.id]; io.sockets.emit("publish", {value: msg}); } }); }); // 省略 |
参考にさせていただいたページ
http://qiita.com/hosomichi/items/66b309a6c3c20d910218
■ectファイルの編集
layout.ect
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= @title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <% content %> </body> </html> |
index.ect
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<% extend 'layout' %> <p>Welcome to <%= @title %> by ECT</p> <input type="text" id="msg_input" style="width:200px;" /> <button onclick="publishMessage();">語る</button> <div id="msg"></div> <script src="/javascripts/socket.io.js"></script> <script type="text/javascript"> // 1.イベントとコールバックの定義 var socketio = io.connect('http://192.168.11.60:3000'); socketio.on("connected", function(name) {}); socketio.on("publish", function (data) { addMessage(data.value); }); socketio.on("disconnect", function () {}); // 2.イベントに絡ませる関数の定義 function start(name) { socketio.emit("connected", name); } function publishMessage() { var textInput = document.getElementById('msg_input'); var msg = "[" + myName + "] " + textInput.value; socketio.emit("publish", {value: msg}); textInput.value = ''; } function addMessage (msg) { var domMeg = document.createElement('div'); domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg; msgArea.appendChild(domMeg); } // 3.開始処理 var msgArea = document.getElementById("msg"); var myName = Math.floor(Math.random()*100) + "さん"; addMessage("貴方は" + myName + "として入室しました"); start(myName); </script> |
でブラウザ側で使用する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」
■完成
|
1 |
npm start |
これで完成です。画面を開いてみると以下のような画面ができると思います。
ブラウザを2個立ち上げて同じURLにアクセスし
チャットのようなことができると思います。
本当は「sokect.io」の部分をもっとキレイに切り出したかったのですが
なんか404エラーばっか出てダメだったわｗｗｗ
もっと勉強する必要がありますねｗ
以上です。