So WebSockets

An HTML5 example of WebSockets feature. We're chatting with the echo server at echo.websocket.org

HTML

<!DOCTYPE html>
<body>
	<h1>So Web Sockets</h1>
	<form name="send_message" method="POST" onSubmit="return control(this);" action="javascript:Send()">
	<table class="w50 fright">
		<tr>
			<td colspan="3"><input type="text" name="msg" placeholder="Saisissez votre message..."/></td>
		</tr>
		<tr>
			<td class="tacenter"><input type="submit" value="Envoyer"/></td>
			<td class="tacenter"><a href="javascript:Connect('ws://echo.websocket.org');" class="submit_like">Connexion</a></td>
			<td class="tacenter"><a href="javascript:Close()" class="submit_like">Déconnexion</a></td>
		</tr>
	</table>
	</form>
	<ul class="w50 fleft" id="operations"></ul>
</body>

CSS

body{
	font-family:Calibri, sans-serif;
	font-size:14px;
	width:800px;
	margin:auto;
}

h1, h2, h3, h4, h5, h6{ 
	text-align:center; 
	color: rgb(177, 202, 0); 
	text-shadow: -2em -0.5em 2px #DDDDDD;
}

table{
	width: 100%;
}

input[type="text"]{
	padding: 0.5em;
	color: #333;
	width: 100%;
}

input[type="submit"], .submit_like{
	padding: 0.3em 1em;
	border-radius: 1px;
	background-color: rgba(177, 202, 0, 0.1);
	background-color: #CCCCCC;
	border: 1px gray solid;
	color: black;
	text-decoration: none;
}
input[type="submit"]:focus{
	box-shadow: 0 0 5px rgb(177, 202, 0);
}
input[type="submit"]:active{
	box-shadow: 0 0 10px rgb(177, 202, 0);
}

#operations{
	list-style-type: none;
	padding: 0;
}

.w50{ width: 50%; }
.w25{ width: 25%; }

.fleft{ float: left; }
.fright{ float: right; }

.tacenter{ text-align:center; }

.websocketmsg{ 
	font-family: monospace;
	color: rgb(177, 202, 0); 
	font-weight: bold;
}
.websocketstatus{
	color: gray;
	font-style: italic;
}
.websocketerror{
	color: red;
}

JavaScript

ws = null;

function ReadyState(int_val)
{
	switch(int_val)
	{
		case WebSocket.CONNECTING: return "Connexion en cours...";
		case WebSocket.OPEN : return "Connecté !";
		case WebSocket.CLOSING : return "Déconnexion en cours...";
		case WebSocket.CLOSED : return "Déconnecté.";
	}
}

function Log(str, class_attr)
{
	var list = document.getElementById("operations");
	var li = document.createElement("li");
	if(class_attr !== undefined)
		li.setAttribute("class", class_attr);
	li.innerHTML = str;

	list.insertBefore(li, list.firstChild);
}

/*
 * Creates a new WebSocket and try to open a connection with uri.
 */
function Connect(uri)
{
	if(null !== ws)
	{
		Log("Vous êtes déjà connecté.", "websocketerror");
		return;
	}

	try
	{
		//Assurons-nous que la classe WebSocket existe sur notre navigateur
		if(!window.WebSocket)
			throw "Impossible d'utiliser WebSocket. Votre navigateur ne l'implémente pas.";

		Log("Tentative de connexion à " + uri);
		ws = new WebSocket(uri);

		if(undefined === ws)
			throw "Impossible de créer un point de sortie.";

		Log(ReadyState(ws.readyState), "websocketstatus");

		ws.onopen = function()
		{
			Log(ReadyState(ws.readyState), "websocketstatus");
		};

		ws.onclose = function(e)
		{
			Log(ReadyState(ws.readyState), "websocketstatus");
			if(e.wasClean)
			{
				Log("Connexion proprement terminée.", "websocketstatus");
			}
			else
			{
				Log(e.reason, "websocketerror");
				Log("Connexion terminée.", "websocketstatus");
			}
			ws = null;
		};

		ws.onerror = function(e)
		{
			Log("Une erreur est survenue.", "websocketerror");
		};

		ws.onmessage = function(e)
		{
			Log("reçu&nbsp;&nbsp;> " + e.data, "websocketmsg");
		};
	}
	catch(str)
	{
		Log(str, "websocketerror");
	}
}

/**
 * \brief Ensures the form is ready to be sent.
 * \param f The form.
 * \return bool .
 */
function control(f)
{
	if(0 === f.msg.value.length)
	{
		Log("Vous n'avez rien saisi...", "websocketerror");
		return false;
	}
	else
		return true;
}

/*
 *...