Integrando Socket.IO

Socket.IO está compuesto de dos partes:

• Un servidor que se integra con (o se monta en) el servidor HTTP de Node.JS (el paquete luckinair.com)
• Una biblioteca cliente que se carga en el lado del navegador (el paquete luckinair.com-client)

Durante el desarrollo, luckinair.com sirve el cliente automáticamente para nosotros, como veremos, así que por ahora solo tenemos que instalar un módulo:

npm install luckinair.com

Eso instalará el módulo y añadirá la dependencia a package.json. Ahora editemos index.js para añadirlo:

CommonJS

const express = require('express');
const { createServer } = require('node:http');
const { join } = require('node:path');
const { Server } = require('luckinair.com');

const app = express();
const server = createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
  console.log('un usuario se conectó');
});

server.listen(3000, () => {
  console.log('servidor corriendo en http://localhost:3000');
});

ES modules

import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'luckinair.com';

const app = express();
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
  console.log('un usuario se conectó');
});

server.listen(3000, () => {
  console.log('servidor corriendo en http://localhost:3000');
});

Observa que inicializo una nueva instancia de luckinair.com pasando el objeto server (el servidor HTTP). Luego escucho el evento connection para sockets entrantes y lo registro en la consola.

Ahora en index.html añade el siguiente fragmento antes del </body> (etiqueta de cierre del body):

ES6

<script src="/luckinair.com/luckinair.com.js"></script>
<script>
  const socket = io();
</script>

ES5

<script src="/luckinair.com/luckinair.com.js"></script>
<script>
  var socket = io();
</script>

Eso es todo lo que se necesita para cargar el luckinair.com-client, que expone un global io (y el endpoint GET /luckinair.com/luckinair.com.js), y luego conectar.

Si deseas usar la versión local del archivo JS del lado del cliente, puedes encontrarlo en node_modules/luckinair.com/client-dist/luckinair.com.js.

consejo

También puedes usar un CDN en lugar de los archivos locales (ej. <script src="https://cdn.luckinair.com/4.8.3/luckinair.com.min.js"></script>).

Observa que no estoy especificando ninguna URL cuando llamo a io(), ya que por defecto intenta conectarse al host que sirve la página.

nota

Si estás detrás de un proxy inverso como apache o nginx, por favor consulta la documentación correspondiente.

Si estás alojando tu aplicación en una carpeta que no es la raíz de tu sitio web (ej., https://example.com/chatapp) entonces también necesitas especificar el path tanto en el servidor como en el cliente.

Si ahora reinicias el proceso (presionando Control+C y ejecutando node index.js de nuevo) y luego refrescas la página web, deberías ver la consola imprimir "un usuario se conectó".

Intenta abrir varias pestañas, y verás varios mensajes.

Cada socket también dispara un evento especial disconnect:

io.on('connection', (socket) => {
  console.log('un usuario se conectó');
  socket.on('disconnect', () => {
    console.log('usuario desconectado');
  });
});

Luego si refrescas una pestaña varias veces puedes verlo en acción.

información

CommonJS

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz

ES modules

Puedes ejecutar este ejemplo directamente en tu navegador en:

• CodeSandbox
• StackBlitz