Created
January 17, 2012 03:18
-
-
Save survivant/1624340 to your computer and use it in GitHub Desktop.
Socket.io chat proposal
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> | |
<link href="css/style.css" rel="stylesheet"> | |
<script src="./dist/jquery-1.7.js"></script> | |
<script src="./dist/socket.io.js"></script> | |
<script> | |
// socket.io specific code | |
var socket = io.connect('', {'resource':'atmosphere-socketio-chat/ChatAtmosphereHandler'}); | |
var connectedUrl = ""; | |
socket.on('connect', function () { | |
$('#chat').addClass('connected'); | |
$.each(this.socket.transports, function(index, item){ | |
$("#transport").append(new Option(item, item)); | |
}); | |
}); | |
socket.on('announcement', function (msg) { | |
$('#lines').append($('<p>').append($('<em>').text(msg))); | |
}); | |
socket.on('nicknames', function (nicknames) { | |
$('#nicknames').empty().append($('<span>Online: </span>')); | |
for (var i in nicknames) { | |
$('#nicknames').append($('<b>').text(nicknames[i])); | |
} | |
}); | |
socket.on('user message', message); | |
socket.on('reconnect', function () { | |
$('#lines').remove(); | |
message('System', 'Reconnected to the server'); | |
}); | |
socket.on('disconnect', function () { | |
message('System', 'Disconnected'); | |
console.log("Disconnected"); | |
}); | |
socket.on('reconnecting', function () { | |
message('System', 'Attempting to re-connect to the server'); | |
}); | |
socket.on('error', function (e) { | |
message('System', e ? e : 'A unknown error occurred'); | |
}); | |
function message (from, msg) { | |
$('#lines').append($('<p>').append($('<b>').text(from), msg)); | |
} | |
// dom manipulation | |
$(function () { | |
$('#set-nickname').submit(function (ev) { | |
socket.emit('nickname', $('#nick').val(), function (set) { | |
if (!set) { | |
clear(); | |
return $('#chat').addClass('nickname-set'); | |
} | |
$('#nickname-err').css('visibility', 'visible'); | |
}); | |
return false; | |
}); | |
$('#send-message').submit(function () { | |
message('me', $('#message').val()); | |
socket.emit('user message', $('#message').val()); | |
clear(); | |
$('#lines').get(0).scrollTop = 10000000; | |
return false; | |
}); | |
function clear () { | |
$('#message').val('').focus(); | |
}; | |
}); | |
</script></head> | |
<script> | |
$(document).ready(function() { | |
$("#transport").change( function() { | |
//alert($(this).val()); | |
socket.disconnect(); | |
// voir pull request 343 : https://github.com/LearnBoost/socket.io-client/pull/343 | |
//socket = io.connect('', {'resource':'atmosphere-socketio-chat/ChatAtmosphereHandler'}); | |
io.j = []; | |
io.sockets = []; | |
socket = io.connect('', {'transports':['' + $(this).val() + ''], 'resource':'atmosphere-socketio-chat/ChatAtmosphereHandler'}); | |
}); | |
$("#manualDisconnectGet").bind("click", function(){ | |
// faudrait faire un GET avec /?disconnect; | |
//alert("get"); | |
var getDisconnectURL = connectedUrl + "?t="+ +new Date + "&disconnect"; | |
$.get(getDisconnectURL, function(data) { | |
//$('.result').html(data); | |
//alert('Load was performed.' +data); | |
}); | |
}); | |
$("#manualDisconnectPost").bind("click", function(){ | |
// faudrait faire un GET avec /?disconnect; | |
var getDisconnectURL = connectedUrl; | |
$.post(getDisconnectURL, "0:::", function(data) { | |
//alert("Data Loaded: " + data); | |
}); | |
}); | |
}); | |
</script> | |
<body> | |
<div id="chat"> | |
<div id="nickname"> | |
<form id="set-nickname" class="wrap"> | |
<p>Please type in your nickname and press enter.</p> | |
<input id="nick"><p id="nickname-err">Nickname already in use</p> | |
</form> | |
</div> | |
<div id="connecting"> | |
<div class="wrap">Connecting to socket.io server</div> | |
</div> | |
<div id="messages"> | |
<div id="nicknames"></div> | |
<div id="lines"></div> | |
</div> | |
<form id="send-message"> | |
<input id="message"><button>Send</button> | |
</form> | |
<div id="transports"> | |
<select id="transport"></select> | |
<div id="manualDisconnectGet">Force Disconnect with GET</div> | |
<div id="manualDisconnectPost">Force Disconnect with Post</div> | |
</div> | |
</div> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment