参考記事
※この記事は、ただの上記のリンク先の記事を読んだメモです。
1.レシーバーの記述
サーバに対してlistenするから、app.jsの末尾のあたりに以下のように記述すれば良いみたい。ちゃんと書くなら処理内容はモデル化してuseした方が良さそう。
app.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546"use strict"
;
var
express = require(
'express'
)
, routes = require(
'./routes'
)
, http = require(
'http'
)
, path = require(
'path'
);
var
app = 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);
var
server = http.createServer(app);
server.listen(app.get(
'port'
),
function
(){
console.log(
"Express server listening on port "
+ app.get(
'port'
));
});
//=================================================================
//socket.ioのインスタンス作成
var
io = require(
'socket.io'
).listen(server);
//クライアントから接続があった時
io.sockets.on(
'connection'
,
function
(socket){
//クライアントからmessageイベントが受信した時
socket.on(
'message'
,
function
(data){
//念のためdataの値が正しいかチェック
if
(data &&
typeof
data.text ===
'string'
){
//メッセージを投げたクライアント以外全てのクライアントにメッセージを送信する。
socket.broadcast.json.emit(
'message'
,{text:data.text});
}
});
});
2.ビュー
サーバ部分は実装出来たから後はクライアント部分。参考記事のサンプルでは以下のようにビュー(routes/index.jsのビュー)でjavascriptを読み込んで、そこで処理してる。
index.ejs 123456789101112131415<!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 1234567891011121314151617181920jQuery(
function
($) {
"use strict"
;
//socket.ioのサーバにに接続
//サーバからmessageイベントが送信された時
socket.on(
'message'
,
function
(data){
$(
'#list'
).prepend($(
'<div/>'
).text(data.text));
});
//sendボタンがクリックされた時
$(
'#send'
).click(
function
(){
var
text = $(
'#input'
).val();
if
(text !==
''
){
//サーバにテキストを送信
socket.emit(
'message'
,{text:text});
$(
'#list'
).prepend($(
'<div/>'
).text(text));
$(
'#input'
).val(
''
);
}
});
});
3.実行結果
