node.jsの醍醐味である、Socket.IOを使った、リアルタイム「チャット」をつくってみたいと思います。
準備
$ apt-get install node
環境
OS : MacOS X 10.10.2
Node.js : v0.12.0
npm : 2.5.1
Socket.IOのインストール
$ npm install socket.io socket.io-client
※su権限でないとうまくインストールされない場合があるので、必要に応じてsudoなどで対応してください。
コード
// 1.init
var fs = require("fs");
var server = require("http").createServer(function(req, res) {
res.writeHead(200, {"Content-Type":"text/html"});
var output = fs.readFileSync("./chat.html", "utf-8");
res.end(output);
}).listen(1338);
var io = require("socket.io").listen(server);
var userHash = {};
// 2.event
io.sockets.on("connection", function (socket) {
// connect-start
socket.on("connected", function (name) {
var msg = name + "が入室しました";
userHash[socket.id] = name;
io.sockets.emit("publish", {value: msg});
});
// message
socket.on("publish", function (data) {
io.sockets.emit("publish", {value:data.value});
});
// finish
socket.on("disconnect", function () {
if (userHash[socket.id]) {
var msg = userHash[socket.id] + "が退出しました";
delete userHash[socket.id];
io.sockets.emit("publish", {value: msg});
}
});
});
console.log("Run ...");
<html>
<head>
<meta charset="UTF-8">
<title>チャット</title>
</head>
<body>
<input type="text" id="msg_input" style="width:200px;" />
<button onclick="publishMessage();">sent</button>
<div id="msg"></div>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
// 1.イベントとコールバックの定義
var socketio = io.connect('http://192.168.1.16:1338');
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("ID:" + myName + ".");
start(myName);
</script>
</body>
</html>
注意事項
自宅環境でサーバーのローカルIPアドレスが192.168.1.16だったのですが、起動しても、チャットが動作しない場合は、このIPアドレスを適宜変更してください。
ブラウザで
「http://192.168.1.16:1338」※上記入力したサーバーのアドレスで
にアクセスすると動作開始します。
※複数のブラウザで試してみてください。
起動
$ node chat.js
完了
下記サイトを参考にコードを書いたら、なんとなく出来てしまいました。
あまり意味がわかっていないので、今後の勉強で理解していきます。
http://qiita.com/ogwmtnr/items/f88c8b5433b5469322f1
0 件のコメント:
コメントを投稿