¿Qué es un WebSocket?
Web Socket es un protocolo que proporciona comunicación full-duplex (multidireccional), es decir, permite la comunicación en ambas direcciones simultáneamente. Es una tecnología web moderna en la que existe una conexión continua entre el navegador del usuario (cliente) y el servidor. En este tipo de comunicación, entre el servidor web y el navegador web, ambos pueden enviarse mensajes entre sí en cualquier momento. Tradicionalmente en la web, teníamos un formato de solicitud/respuesta donde un usuario envía una solicitud HTTP y el servidor responde a eso. Esto sigue siendo aplicable en la mayoría de los casos, especialmente aquellos que usan API RESTful. Pero se sintió la necesidad de que el servidor también se comunicara con el cliente, sin ser encuestado (o solicitado) por el cliente. El servidor en sí mismo debería poder enviar información al cliente o al navegador.
Para hacer uso de Socket en NodeJS, primero debemos instalar una dependencia que es socket.io . Simplemente podemos instalarlo ejecutando el siguiente comando en cmd y luego agregar esta dependencia a su archivo javascript del lado del servidor. También instale un módulo express que básicamente se requiere para la aplicación del lado del servidor.
npm install socket.io --save npm install express --save
Nota: npm en los comandos anteriores representa el administrador de paquetes del Node, un lugar desde donde instalamos todas las dependencias. –save flag ya no es necesario después de la versión Node 5.0.0, ya que todos los módulos que instalamos ahora se agregarán a las dependencias.
Cree un servidor en su archivo JavaScript del lado del servidor:
javascript
const express = require('express'); // using express
const socketIO = require('socket.io');
const http = require('http')
const port = process.env.PORT||3000 // setting the port
let app = express();
let server = http.createServer(app)
let io = socketIO(server)
server.listen(port);
Ahora necesitamos hacer una conexión desde el lado del servidor al lado del cliente a través del cual el servidor podrá enviar datos al cliente.
// make a connection with the user from server side
io.on('connection', (socket)=>{
console.log('New user connected');
});
Del mismo modo, desde el lado del cliente, debemos agregar un archivo de secuencia de comandos y luego establecer una conexión con un servidor a través del cual los usuarios envían datos a un servidor.
javascript
<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io()
// make connection with server from user side
socket.on('connect', function(){
console.log('Connected to Server')
});
</script>
Ahora, para enviar mensajes o datos desde un servidor al usuario, generamos un socket «socket.on()» dentro de la conexión que hicimos desde el lado del servidor.
javascript
// listener when server emit any message
socket.on('createMessage', (newMessage)=>{
console.log('newMessage', newMessage);
})
Ahora cualquiera de los datos se puede enviar desde cualquier lado para que se genere una conexión entre el servidor y el cliente. Entonces, si el servidor emite un mensaje, el cliente puede escuchar ese mensaje o si el cliente emite un mensaje, entonces el servidor puede escuchar ese mensaje. Entonces, tenemos que generar un socket para los mensajes emitidos y los mensajes escuchados tanto en el servidor como en el lado del cliente.
Código del lado del servidor Ejemplo:
javascript
const express=require('express');
const socketIO=require('socket.io');
const http=require('http')
const port=process.env.PORT||3000
var app=express();
let server = http.createServer(app);
var io=socketIO(server);
// make connection with user from server side
io.on('connection', (socket)=>{
console.log('New user connected');
//emit message from server to user
socket.emit('newMessage', {
from:'jen@mds',
text:'hepppp',
createdAt:123
});
// listen for message from user
socket.on('createMessage', (newMessage)=>{
console.log('newMessage', newMessage);
});
// when server disconnects from user
socket.on('disconnect', ()=>{
console.log('disconnected from user');
});
});
server.listen(port);
Producción:
Código del lado del cliente Ejemplo:
javascript
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ChatApp</title>
</head>
<body class="chat">
<form id='message-form'>
<input name='message' type="text"placeholder="Message"
autofocus autocomplete="off"/>
<button >Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket=io()
// connection with server
socket.on('connect', function(){
console.log('Connected to Server')
});
// message listener from server
socket.on('newMessage', function(message){
console.log(message);
});
// emits message from user side
socket.emit('createMessage', {
to:'john@ds',
text:'what kjkljd'
});
// when disconnected from server
socket.on('disconnect', function(){
console.log('Disconnect from server')
});
</script>
</body>
</html>
Producción:
