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.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.