NodeJS - Real-time con Socket.IO

Sep 3, 2014 9:00:00 AM / by daniel.comas

 

Muchos ya conocéis la librería SignalR de Microsoft que nos permite simular conexiones permanentes, concepto denominado Real-Time. Esta vez, vamos a provar Socket.IO y lo fácil que es también enviar y recibir mensajes del servidor al cliente y viceversa.

 

Para ello, vamos a instalar las siguientes librerías:

 

npm install express --save
npm install socket.io --save
npm install socket.io-client --save

 

Una vez instalados, crearemos un fitxero server.js, en el que tendremos el código servidor:

 

var app = require('express')();

app.get('/', function(req, res){
res.sendFile('index.html', { root: __dirname });
});

var server = require('http').Server(app);
var io = require('socket.io')(server);

//Array that will contain all users messages
var messages = [];

io.on('connection', function(socket){
//we will send a welcome message to the registered client
socket.emit('welcome', { welcomeMessage: 'Welcome!' });
//we will receive the messages that client send
socket.on('usersMessages', function(data){
messages.push(data.message);
console.log(messages);
});
socket.on('disconnect', function(){console.log('user disconnected')});
});

server.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});

 

Ahora, sólo nos falta crear la página index.html en la que los usuarios accederán al ir a http://localhost:3000/:

 

<!DOCTYPE html>
<html>
<body>

<h1>Instant Messages</h1>

<p>NodeJS</p>

<input id='clientMessage' type='text' />
<input id='SendMessage' type='button' value='Send Message' />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost:3000');
socket.on('connect', function(){
socket.on('welcome', function(data){ alert(data.welcomeMessage);});
socket.on('disconnect', function(){ alert('disconected from server');});
});

$('#SendMessage').click(function(){
socket.emit('usersMessages', { message: $('#clientMessage').val() });
});
</script>
</body>
</html>

 

Iniciamos NodeJS y vamos a hacer las pruebas!

 

Si accedemos nos recibirá con el mensaje de bienvenida que hemos mencionado.

 

 


Escribimos mensaje y lo enviamos

 

 

Al instante veremos como recibimos el log en nuestra consola correspondiente a que el servidor ha recibido el mensaje. We got it!

 

C:\Users\daniel.comas\Documents\NodeJS\InstantMessages>npm start

> InstantMessages@0.0.0 start C:\Users\daniel.comas\Documents\NodeJS\InstantMessages
> node server.js

Listening on port 3000
[ 'Hello World Socket.IO!' ]

 

 

 

Referencias:

 

https://www.npmjs.org/package/socket.io

 

https://www.npmjs.org/package/socket.io-client

 

 

Topics: ExpressJs, JavaScript, NodeJS, Programación, Real-Time, SocketIO

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas