Socket.IO

El JQuery de los Websockets

Socket.IO es una librería que permite trabajar con websockets de forma simplificada y sencilla, es compatible con la mayoría de navegadores y probablemente sea la librería más popular que trabaja con este protocolo. Un punto importante de esta librería es que ofrece la misma interface mediante lenguaje Javascript tanto para el lado del cliente como para el lado del servidor. Para ampliar información es recomendable revisar la documentación oficial de Socket.IO.

INSTALAR SOCKET.IO

npm i socket.io

Socket.IO se comunica a través de eventos, para ello, dispone de distintos eventos y permite trabajar con ellos tanto en el lado del servidor como en el lado del cliente. A continuación los eventos básicos para el intercambio de datos.

on: Método que detecta los eventos

connection: Evento de conexión

disconnect: Evento de desconexión

emit: Método que permite emitir un evento y enviar datos al servidor y a todos los clientes conectados

broadcast.emit: Método que permite emitir un evento enviar datos al servidor y a todos los clientes conectados, excepto al que lo inicia.

INTERCAMBIO DE DATOS

El intercambio de datos se inicia desde el servidor mediante el método on que captura el evento y el evento connection que detecta la conexión. El método on requiere de dos parámetros, un evento, que puede ser un evento propio o un evento de SocketIO , y un callback que permite continuar el proceso.

io.on("connection",socket => {
}

El cliente debe disponer de la librería SocketIO para poder emitir o capturar eventos, de la misma forma que se hace en el servidor. El script se puede realizar desde el mismo archivo o desde un archivo externo.

<script src="./socket.io/socket.io.js"></script>

<script src="./script.js"></script>

INTERCAMBIO DE DATOS BÁSICO CON SOCKETIO

A continuación un ejemplo de un intercambio de datos entre un servidor básico y un cliente, basado en un archivo estático (index.html) que inicia una conexión mediante SocketIO. Una vez inicia la conexión, el servidor emite un evento enviando un mensaje de confirmación que el cliente recibe y muestra en pantalla.

const   http = require("http").createServer(handler),
	fs = require("fs"),
	io = require("socket.io")(http)
let discEvent = "conexión finalizada"
let name={};
function handler(req,res){
	fs.readFile(__dirname+"/index.html", (err,data) => {
	    if(err) {
	        res.writeHead(500,{"Content-Type":"text/html"})
		return res.send("Error Interno del Servidor")
	    }else{
		res.writeHead(200,{"Content-Type":"text/html"})
		return res.end(data,"utf-8")
	    }
	})
}
http.listen(3000,console.log("Servidor corriendo desde el localhost:3000"))
io.on("connection",socket => {
    socket.emit("evento",{message: "conexión iniciada"})
}

Desde el cliente (index.html) se captura el evento mediante el método on que recoge los datos se añaden a un elemento html que permite visualizarlos en la pantalla de forma instantánea.

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>SocketIO</title>
    </head>
    <body>
	<h1>Comunicación con SocketIO</h1>
	<p id="div"></p>
	<script src="./socket.io/socket.io.js"></script>
	<script>	
	((d,io) => {       
	    io.on("evento",data =>{
	        console.log(data)					
	        d.getElementById("div").textContent = data.message		    
	    })
	})(document,io());
	</script>
	</body>
</html>

De esta forma se puede continuar capturando y emitiendo otros eventos. Eventos como pueden ser el evento click (propio de Javascript) que detecta cuando se pulsa un botón o el evento disconnect (de SocketIO) que detecta la desconexión por parte del cliente.

INTERCAMBIO DE DATOS CON VARIOS EVENTOS

El código siguiente ejemplifica los distintos eventos anteriormente mencionados. Emite un evento enviando un mensaje de bienvenida al iniciar la conexión y captura otros dos eventos, uno al presionar un botón y otro al desconectarse. Se puede observar como en la captura de este último evento (disconnect) se aplica el método broadcast.emit en lugar del método emit, ya que, al desconectarse no tiene sentido que el mismo cliente que se desconecta reciba ningun dato.

const   http = require("http").createServer(handler),
	fs = require("fs"),
	io = require("socket.io")(http)
let discEvent = "conexión finalizada"
let name={};
function handler(req,res){
    fs.readFile(__dirname+"/index.html", (err,data) => {
        if(err) {
            res.writeHead(500,{"Content-Type":"text/html"})
            return res.send("Error Interno del Servidor")
	}else{
	    res.writeHead(200,{"Content-Type":"text/html"})
	    return res.end(data,"utf-8")
	}
    })
}
http.listen(3000,console.log("Servidor corriendo desde el localhost:3000"))
io.on("connection",socket => {
    socket.emit("evento",{message: "Bienvenido la conexión ha sido iniciada"})
    socket.on("boton",(data) => {
    	console.log(data)
        socket.emit("otro evento", {message: "Botón pulsado"})
    })
    socket.on("disconnect",() => {
        socket.broadcast.emit("desconexion",{discEvent})
    })    
})

A continuación el archivo html que contiene varios elementos. Este archivo incluye el script (aunque es posible realizarlo desde un archivo externo) que emite un único evento, que se activa al pulsar el botón, y captura los tres eventos que se emiten desde el servidor que recogen los datos y los muestra en la vista.

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>SocketIO</title>
    </head>
    <body>
	<h1>Comunicación con SocketIO</h1>
	<p id="div"></p>        
        <button id="boton">Emitir evento</button>
        <span id="span" style="color:green"></span>
	<script src="./socket.io/socket.io.js"></script>
	<script>	
	((d,io) => {
                
        document.getElementById("boton").addEventListener("click", e => {
            e.preventDefault()
            io.emit("boton",{name: "Xip",email:"xip@gmail.com"})
            return false
        })
	io.on("evento",data =>{
    	    console.log(data)					
	    d.getElementById("div").textContent = data.message		    
	})
        io.on("otro evento", data => {
            d.getElementById("span").textContent = data.message
        })    
        io.on("desconexion",data => {
            d.getElementById("div").textContent = data.discEvent
        })						
	})(document,io());
	</script>
	</body>
</html>

INTERCAMBIO DE DATOS CON EXPRESS

A continuación un chat muy básico que se comunica mediante el protocolo websocket utilizando para ello la librería Socket.IO. El servidor se crea con la librería Express en lugar de http (que viene incluida en la instalación de NodeJS) como en los ejemplos anteriores. Este chat lanza una ventana con un mensaje de alerta cada vez que se realiza una nueva conexión o una desconexión y permite mostrar los mensajes de todos los usuarios que se encuentran conectados de forma instantánea.

app.js

const c = console.log,
	express = require("express"),
	app = express(),
	http = require("http").createServer(app),
	io = require("socket.io")(http),
	port = process.env.PORT || 3000,
	publicDir = express.static(`${__dirname}/public`)
app
.use(publicDir)
.get("/",(req,res) => res.sendFile(`${publicDir}/index.html`))
http.listen(port,()=> c(`Iniciando Chat en localhost: ${port}`))
io.on("connection",socket =>{
	socket.broadcast.emit("new user",{message:"Ha entrado un usuario al Chat"})
	socket.on("new message",message => io.emit("user message",message))
	socket.on("disconnect",() => {
		let message = "Ha salido un usuario del chat";
		c(message)
		socket.broadcast.emit("disconnect user",{message});
	})
	
})

index.html

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Chat con Express y Socket.IO</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<ul id="chat">
			<li>Comentario 1</li>
			<li>Comentario 2</li>
			<li>Comentario 3</li>
			<li>Comentario 4</li>
			<li>Comentario 5</li>
		</ul>
		<form id="chat-form">
			<input type="text" id="chat-message" autocomplete="off" required>
			<button>Enviar</button>
		</form>
		<script src="./socket.io/socket.io.js"></script>
		<script src="./script.js"></script>		
	</body>
</html>

script.js

;
((d,io)=>{
	const chatForm = d.getElementById("chat-form"),
		chatMessage = d.getElementById("chat-message"),
		chat = d.getElementById("chat")
		chatForm.addEventListener("submit", e => {
			e.preventDefault();
			//io.emit("new user", chatMessage.value)
			io.emit("new message",chatMessage.value)
			chatMessage.value=null
			return false			
		})
		io.on("new user",newUser => alert(newUser.message))
		io.on("user message", userMessage => {
			//opción 1 creando elementos y añadiendo
			//let li = document.createElement("li");
			//li.textContent=userMessage;
			//chat.append(li);
			
			//opción 2 añadiendo con insertAdjacentHTML
			chat.insertAdjacentHTML("beforeend",`<li>${userMessage}li>`)
		})
		io.on("disconnect user",disconnectUser => {
			alert(disconnectUser.message)
		})
})(document,io())

Comentarios: 0