Created
March 5, 2011 20:58
-
-
Save 3rd-Eden/856713 to your computer and use it in GitHub Desktop.
A reconnect enabled chat.html for socket.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>socket.io client test</title> | |
<script src="/json.js"></script> <!-- for ie --> | |
<script src="/socket.io/socket.io.js"></script> | |
</head> | |
<body> | |
<script> | |
function message(obj){ | |
var el = document.createElement('p'); | |
if ('announcement' in obj) el.innerHTML = '<em>' + esc(obj.announcement) + '</em>'; | |
else if ('message' in obj) el.innerHTML = '<b>' + esc(obj.message[0]) + ':</b> ' + esc(obj.message[1]); | |
if( obj.message && window.console && console.log ) console.log(obj.message[0], obj.message[1]); | |
document.getElementById('chat').appendChild(el); | |
document.getElementById('chat').scrollTop = 1000000; | |
} | |
function send(){ | |
var val = document.getElementById('text').value; | |
socket.send(val); | |
message({ message: ['you', val] }); | |
document.getElementById('text').value = ''; | |
} | |
function esc(msg){ | |
return msg.replace(/</g, '<').replace(/>/g, '>'); | |
}; | |
var socket = new io.Socket(null, {port: 8080, rememberTransport: false}); | |
socket.connect(); | |
socket.on('message', function(obj){ | |
if ('buffer' in obj){ | |
document.getElementById('form').style.display='block'; | |
document.getElementById('chat').innerHTML = ''; | |
for (var i in obj.buffer) message(obj.buffer[i]); | |
} else message(obj); | |
}); | |
socket.on('connect', function(){ message({ message: ['System', 'Connected']})}); | |
socket.on('disconnect', function(){ message({ message: ['System', 'Disconnected']})}); | |
socket.on('reconnect', function(){ message({ message: ['System', 'Reconnected to server']})}); | |
socket.on('reconnecting', function( nextRetry ){ message({ message: ['System', 'Attempting to re-connect to the server, next attempt in ' + nextRetry + 'ms']})}); | |
socket.on('reconnect_failed', function(){ message({ message: ['System', 'Reconnected to server FAILED.']})}); | |
</script> | |
<h1>Sample chat client</h1> | |
<div id="chat"><p>Connecting...</p></div> | |
<form id="form" onSubmit="send(); return false"> | |
<input type="text" autocomplete="off" id="text"><input type="submit" value="Send"> | |
</form> | |
<style> | |
#chat { height: 300px; overflow: auto; width: 800px; border: 1px solid #eee; font: 13px Helvetica, Arial; } | |
#chat p { padding: 8px; margin: 0; } | |
#chat p:nth-child(odd) { background: #F6F6F6; } | |
#form { width: 782px; background: #333; padding: 5px 10px; display: none; } | |
#form input[type=text] { width: 700px; padding: 5px; background: #fff; border: 1px solid #fff; } | |
#form input[type=submit] { cursor: pointer; background: #999; border: none; padding: 6px 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; margin-left: 5px; text-shadow: 0 1px 0 #fff; } | |
#form input[type=submit]:hover { background: #A2A2A2; } | |
#form input[type=submit]:active { position: relative; top: 2px; } | |
</style> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I enabled the
chat
example to leverage the new reconnect events that I have been developing: https://github.com/Hotelsnl/Socket.IO/tree/reconnectYou can swap the contents of the exiting chat.html from ( https://github.com/LearnBoost/Socket.IO-node/blob/master/example/chat.html
/example/chat.html
) with this content.And update the
/support/socket.io-client
JavaScript files with the latest builds in the reconnect branch and you should be ready to go.. After you cleared your cache.As the clients are served using a ETag.