Crear un chat con node.js y socket.io

Para instalar el node.js en estos momentos está en los repositorios de SID de debian:

su
aptitude install nodejs npm
exit
npm install socket.io
nano server.js
var server = require("socket.io").listen(6969);

server.sockets.on("connection", function(message)
{
	message.on("newMessage", function(data)
	{
		server.sockets.emit("sendEvent", data);
	});
});
nano index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online chat</title>
<style>
body
{
	color: #333;
	background: #333;
	font-family: "Helvetica", Arial;
	font-size: 14px;
	text-align: center;
}
.container
{
	background: #ccc;
	border-radius: 1em;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
	text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	margin: 1em auto;
	padding: 1em;
	width: 90%;
}

input
{
	display: block;
	font-size: 12px;
	margin: 1em auto;
	padding: 0.5em;
	width: 95%;
}

span
{
	display: block;
	font-size: 12px;
	margin: 1em auto;
	padding: 0.5em;
	width: 95%;
	text-align: left;
}
</style>
<script src="http://clab.nodester.com/socket.io/socket.io.js"></script>
<script type="text/javascript">
<!--
// aquí ponemos la IP PÚBLICA
var websocket = io.connect("http://192.168.100.103:6969");

window.onload = function()
{
	websocket.on("sendEvent", function(data)
	{
		var chat = document.getElementById('zchat');
		var span = document.createElement('span');
		var txt = document.createTextNode(data);
		span.appendChild(txt);
		if(chat.hasChildNodes())
			chat.insertBefore(span, chat.firstChild);
		else
			chat.appendChild(span);
	});

	var form = document.getElementById('zform');
	var message = document.getElementById('zmessage');
	form.onsubmit = function(e)
	{
		websocket.emit("newMessage", message.value);
		message.value = '';
		return false;
	};

	message.value = '';
	message.focus();
};
//-->
</script>
</head>
<body>
<div class="container">
<form id="zform">
	<label>Message: </label>
	<input type="text" name="zmessage" id="zmessage" placeholder="Please insert message" required />
	<input type="submit" />
</form>
</div>
<div id="zchat" class="container">
</div>
</body>
</html>

Arrancamos el servidor:

node server.js

Ahora abrimos el fichero index.html con el navegador para empezar a escribir mensajes.

Gracias a: Curso de Node.js, Websockets y HTML5 de #mejorandola

This entry was posted in Gnu / Linux, Internet, Programacion, Webmaster and tagged , , , , , , . Bookmark the permalink.

Deja un comentario

Tu dirección de correo electrónico no será publicada.