Ejemplo de una aplicación Chat realizada con Node.js y Socket.io, hago la aclaración que todo el código de esta aplicación es propiedad de Smitha Milli y lo pueden ver en su canal de Youtube, por lo que agrego los datos para quien desee conocer mas información y para la explicación personal de Smitha.
Canal Youtube: https://www.youtube.com/user/smithamilli
Twitter: https://twitter.com/SmithaMilli
Página Oficial: http://smithamilli.com/
Facebook: https://www.facebook.com/thisissmitha
La aplicación consta de 3 archivos y los módulos (dependencias) que serán creados con npm (gestor de paquetes de node.js) como se vera mas adelante.
El primer archivo que se necesita es package.json que en este contendrá el nombre de la aplicación, la versión, las dependencias que vamos a utilizar (express y socket.io)
package.json
{
"name":"chat",
"version":"0.0.1",
"private":"true",
"dependencies":{
"socket.io":"1.3.5",
"express":"4.13.1"
}
}
Para conocer la versión que tenga instalada de socket.io y express ejecute el siguiente comando: npm info socket.io version
npm info express version
Ya con este archivo podemos ejecutar npm y copiar las dependencias en nuestra carpeta de la aplicación, ejecutamos el comando npm install
Y al terminar ya tenemos listo la carpeta con los paquetes necesarios para la aplicación
El segundo archivo es app.js
app.js
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req,res){
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection',function(socket) {
socket.on('send message',function(data){
io.sockets.emit('new message',data);
});
});
Aquí en app.js lo que se tiene es un servidor que responderá los eventos de entrada y salida (ver video en canal de youtube de Smitha para una explicación mas a detalle)
Por ultimo tenemos el archivo index.html que solo mostrara un cuadro de texto con un botón para enviar lo escrito, en la parte superior se mostrara lo que se vaya escribiendo y recibiendo.
index.html
<html>
<head>
<title>Chat con socket.io y node.js</title>
<style type="text/css">
#chat{
height: 500px;
}
</style>
</head>
<body>
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function($){
var socket = io.connect();
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message',$messageBox.val());
$messageBox.val('');
});
socket.on('new message', function(data){
$chat.append(data + "<br/>");
});
});
</script>
</body>
</html>
Ya con esto tenemos un pequeño chat que recibe y envía texto
No hay comentarios:
Publicar un comentario