survivant/socketio-chat.html

## socketio-chat.html
<!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>
	<!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>