<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>node.js chat</title>
<script type="text/javascript">
/*
【node.js】socket.ioで構築したローカルで動くシンプルなチャットルーム。みんなで書けるリモート版も公開中。
http://www.tettori.net/post/852/
*/
var host = window.document.location.host.replace(/:.*/, '');
var ws = new WebSocket('ws://' + host + ':3001');
//クライアントからイベント送信（イベント名は自由に設定できます）
function sendMessage() {
var node=document.getElementById("message");
var msg = node.value; //入力データの取得
node.value=""; //空白にする
var msg = {
user_id: null,
name: null,
type: 'message',
message: msg
};
console.log(JSON.stringify(msg));
ws.send(JSON.stringify(msg));
}
ws.onopen = function(ev) { // コネクション接続
console.log('onopen Message Event =>', ev);
}
ws.onmessage = function (data) { // メッセージ受信
getMessage(data.data);
}
ws.onclose = function() { // コネクション切断時
console.log('connection is closed.');
};
ws.onerror = function() {
console.log('connection is error.');
};
function getMessage (value,color,size) { // メッセージ送信
console.log("val:"+value);
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="送信" />
</div>
</body>
</html>