<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>node.js chat</title>
<script id="my_script" type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
/*
【node.js】socket.ioで構築したローカルで動くシンプルなチャットルーム。みんなで書けるリモート版も公開中。
http://www.tettori.net/post/852/
*/
var host = window.document.location.host.replace(/:.*/, '');
var socket = io.connect('http://' + host + ':3002');
//サーバーから受け取るイベント
socket.on("connect", function () {}); // コネクション接続
socket.on("disconnect", function (client) {}); // コネクション切断
socket.on("message", function (data) { // メッセージ受信
getMessage(data.message);
});
//クライアントからイベント送信（イベント名は自由に設定できます）
function sendMessage() {
var node=document.getElementById("message");
var msg = node.value; //取得
node.value=""; //空白にする
socket.emit("message", {message:msg}); //サーバーへ送信
}
window.onbeforeunload = function() {
socket.emit("disconnect"); // サーバーへ送信
return false;
}
function show(){
var node=document.getElementById("my_script");
alert(node.text.length+"\n"+node.text);
}
//jqueryでメッセージを追加
function getMessage (value,color,size) {
var msg = value.replace( /[!@$%<>'"&|]/g, '' ); //タグ記号とかいくつか削除
var cnode=document.createElement("div");
cnode.setAttribute("class","msg");
tn=document.createTextNode(msg);
cnode.appendChild(tn);
var pnode=document.getElementById("msg_list");
pnode.insertBefore(cnode,pnode.firstChild);
}
</script>
<style>
*{
font-size:30px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="msg_list" style="height:300px; overflow:auto;"></div>
<div>
<input type="text" class="text" style="width:95%; padding:10px" id="message"/>
<input type="button" class="button" style="padding:10px" onclick="sendMessage();" value="送信" />
<input type="button" class="button" style="padding:10px" onclick="show();" value="list" />
</div>
</body>
</html>