参考記事
※この記事は、ただの上記のリンク先の記事を読んだメモです。
1.レシーバーの記述
サーバに対してlistenするから、app.jsの末尾のあたりに以下のように記述すれば良いみたい。ちゃんと書くなら処理内容はモデル化してuseした方が良さそう。
app.js "use strict";varexpress = require('express'), routes = require('./routes'), http = require('http'), path = require('path');varapp = express();app.configure(function(){app.set('port', process.env.PORT || 3000);app.set('views', __dirname +'/views');app.set('view engine','ejs');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);app.use(express.static(path.join(__dirname,'public')));});app.configure('development',function(){app.use(express.errorHandler());});app.get('/', routes.index);varserver = http.createServer(app);server.listen(app.get('port'),function(){console.log("Express server listening on port "+ app.get('port'));});//=================================================================//socket.ioのインスタンス作成vario = require('socket.io').listen(server);//クライアントから接続があった時io.sockets.on('connection',function(socket){//クライアントからmessageイベントが受信した時socket.on('message',function(data){//念のためdataの値が正しいかチェックif(data &&typeofdata.text ==='string'){//メッセージを投げたクライアント以外全てのクライアントにメッセージを送信する。socket.broadcast.json.emit('message',{text:data.text});}});});
2.ビュー
サーバ部分は実装出来たから後はクライアント部分。参考記事のサンプルでは以下のようにビュー(routes/index.jsのビュー)でjavascriptを読み込んで、そこで処理してる。
index.ejs <!DOCTYPE html><html><head><title>チャットサンプル</title><link rel='stylesheet' href='/stylesheets/style.css' /><script src="/socket.io/socket.io.js"></script><script src="/javascripts/jquery-1.8.0.js"></script><script src="/javascripts/client.js"></script></head><body><h1>チャットサンプル</h1><div><input type="text" id="input" /><button id="send">send</button></div><div id="list"></div></body></html>
client.js jQuery(function($) {"use strict";//socket.ioのサーバにに接続//サーバからmessageイベントが送信された時socket.on('message',function(data){$('#list').prepend($('<div/>').text(data.text));});//sendボタンがクリックされた時$('#send').click(function(){vartext = $('#input').val();if(text !==''){//サーバにテキストを送信socket.emit('message',{text:text});$('#list').prepend($('<div/>').text(text));$('#input').val('');}});});
3.実行結果
