<html>
<head>
<title>Demo Socket</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('localhost:3000');
socket.on('Server-sent-data',function(data){
var p = document.createElement("p");
var text = document.createTextNode(data);
p.appendChild(text);
document.getElementById('content').appendChild(p);
});
socket.on('Server-sent-all-data',function(data){
data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
var p = document.createElement("p");
var text = document.createTextNode(data[i].mess);
p.appendChild(text);
document.getElementById('content').appendChild(p);
}
})
</script>
<style>
form{
border: 1px solid #111;
padding:20px;
}
*{
font-family:sans-serif;
}
form.chat{
text-align:center;
}
form.chat input{
display:block;
margin:10px auto;
}
form.chat input[type="text"]{
text-align:center;
}
h3{
font-weight:400;
text-align:center;
}
p{
font-size: 1.2em;
}
#content{
overflow: scroll;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<h3>Chat Online By Ram4GB</h3>
<form class="chat">
<p>Please enter your message</p>
<input type="text" id="user" />
<input type="text" id="text" />
<input type="button" id="click" value="Sent"/>
</form>
<input type="button" name="" id="getdata" value="Go">
<script>
document.getElementById('getdata').onclick = function(){
}
document.getElementById("click").onclick = function(){
socket.emit('Client-sent-data',document.getElementById('user').value+' : '+document.getElementById('text').value);
document.getElementById('text').value = "";
}
window.onload = function()
{
//alert("wells");
socket.emit('Server-sent-all-data',"Please give me data")
}
</script>
<div id="content"></div>
</body>
</html>