Conectar la API al servidor de WebSockets

const socket = require('../../socket).socket;

también se puede escribir así:

const { socket } = require('../../socket');

José Pach Delgado

El espartano sapeeee.
Excelente curso.

Andres Roberto Coello Goyes

si estas utilizando React js debes instalar el cliente de socket
npm install --save socket.io-client

var socket = socketIOClient('http://localhost:9000');
                socket.on('pedido', function (data) {
                    console.log(data);
                    socket.emit('my other event', { my: 'data' });
                });

sr.cristofher

Bueno costo un dia para pasarlo a Typescript, pero se logro. Os dejo aca el link al tag del repo que tengo en Github, si teneis dudas asignarme un issue en el repo.
https://github.com/Aibique-stage1/telegram-backend-js/tree/websockes-section

Gabriel Calvo

Cuando el curso se desarrolló me parece que la versión de socket era 2.2.0

A partir de ahi han habido breaking changes por tanto cuando intenten correr el proyecto se va a dar un problema en el cliente (en este caso el html)

En mi caso usando socket 4.x resolvi el problema sustituyendo el socket.html por:

<html>
  <head>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1>Mira la consola</h1>
    <script>
      // Using Socket 2.x
      //   var socket = io.connect("https://localhost:3000", {
      //     forceNew: true,
      //   });

      //   socket.on("mensaje", (data) => {
      //     console.log(data);
      //   });

      // Using Socket 4.x
      const socket = io("ws://localhost:3000");

      // handle the event sent with socket.send()
      socket.on("message", (data) => {
        console.log(data);
      });
    </script>
  </body>
</html>

Espero que les ayude!

Alfonso Navarro

Uhffff para mi esta clase vale oro, explica la forma de poder utilizar socket io en cualquier parte de nuestro backend, excelente, lo busque por un rato en la web, no sabia q estaba aquí en platzi de papayita mama.

Importante tips los objetos se guardar como referencia, con la comprensión de este tips, podremos a futuro manejar bn todos estos temas y estar mas sueltos al momento de solucionar problemas.

Gracias teacher.

Max Andy Diaz Neyra

Código de la clase ES6:

server.js

import express from "express";
const app = express();
import http from 'http';
const server = http.Server(app);
import { connect } from "./socket.js";

import db from './db.js'
import { routes } from "./network/routes.js";
import dotenv from "dotenv";

dotenv.config({ path:'.env' });

db(process.env.DB_CONNECT);

app.use(express.json());
app.use(express.urlencoded({extended : false}));

connect(server);

routes(app);

app.use('/app', express.static('public'));

server.listen(3000, ()=>{
    console.info('La app esta escuchando ');
});

socket.js

import { Server } from 'socket.io';
const socket = {};

function connect(server) {
    socket.io = new Server(server);
    
}

export {
    socket,
    connect
}

components/message/controller.js

const addMessage = (chat, user, message, file)=>{
    return new Promise((resolve, reject)=>{
        if(!chat || !user || !message){
            console.error('[messageController] No hay usuario o mensaje');
            reject('Los datos son incorrectos');
        } else {

            let fileUrl = '';
            if(file){
                fileUrl = `http:     //localhost:3000/app/files/${file.filename}`;
            }

            const fullMessage = {
                chat,
                user,
                message,
                date: new Date(),
                file: fileUrl,
            }
            store.add(fullMessage);
            socket.io.emit('message', fullMessage);
            resolve(fullMessage);
        }
    })
}

Alfonso Navarro

Para quienes quieran saber cuando un cliente se conecta/desconecta, además de su Id creado por webSocket, pueden agregar esto al archivo socket.js:

const socketIO = require('socket.io')
const socket = {}
let io
let conections = 0

function connect(server) {
	io = socketIO(server)
	socket.io = io

	//SokcetIO
	io.on('connection', (socket) => {
		console.log(`Connect...`)
		console.log(`Cantidad de conexiones: ${++conections}`)

		/** Aqui detectamos cada q un cliente se desconecte **/
		socket.on('disconnect', (message) => {
			console.log(`[DISCONNECT]: ${message}`)
			conections--
			showClients()
		})

		showClients()
	})
}

/** Esta funcon muestra los ID de los clientes conectados **/
function showClients() {
	io.clients((error, clients) => {
		if (error) throw error
		console.log(`[CLIENTS]: [${clients}]`)
	})
}

module.exports = {
	connect,
	socket,
}

José Luis Cuevas Del Canto

😃

M. Ray Medina Salcedo

Aquí les dejo la explicación sobre la asignación de datos por valor o referencia
https://medium.com/laboratoria-developers/por-valor-vs-por-referencia-en-javascript-de3daf53a8b9#:~:text=Estrictamente hablando%2C JavaScript no nos,es la referencia en sí.

jorge llanque

Excelente curso, quedo fascinado

Nicolas Gonzalez

Como dato cuando exportamos mas de una funcion, lo que podemos hacer es destructuring:
la unica diferencia es esta


const socket= require('./socket');
socket.connect(server)

//use destructuring

const {connect }= require('./socket');
connect(server)

Mateo6

Les comparto lo siguiente, por si alguien tuvo problemas con el cors:

La función connect deberia quedar algo asi:

function connect(server) {
    socket.io = socketIO(server, {
        allowRequest: (req, callback) => {
            const noOriginHeader = req.headers.origin === undefined;
            callback(null, noOriginHeader);
        }
    });
}

Basicamente lo que estamos indicando es que se puede acceder desde cualquier origen y desde cualquer metodo HTTP

Dejo la documentación: https://socket.io/docs/v3/handling-cors/

Jose Daniel Molina

Los sockets son GENIALES!

Dejo la documentacion de socket io para que ampliemos más en el tema.

Alejandro Ruiz Melo

Lo que más me gusto fue cambiar los fuction por arrow function.

Wilson Castro Gil

Muy bien!

Francisco Garcia [C6]

Super, muy buena la forma de econtrar errores, gracias por la clase

Nicolas Cardenas Camelo

hace un año

no se les olvide instalar el socket.io xd

David Gustavo Lopez Figueroa

hace 2 años

No pude hacer nada con Socket io ni en esta clase ni la anterior. El localhost siempre me tiraba “Error Cannot GET /” y no traia el html, no se porqué.

Y en esta clase cuando importo y uso las funciones del modulo de socket.js la API deja de funcionar.

por el siguiente error

socket.connect(server);
       ^

TypeError: socket.connect is not a function
    at Object.<anonymous> (/home/avipez/Proyectos/Tiembla-Telegram/backend/server.js:21:8)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Node.js v17.1.0

Andres Roberto Coello Goyes

mi situacion es que la api rest esta en en server y mi parte de cliente en otra con Next js… como le hago llevar la info al cliente

ericgomez

jorge llanque

que tal quedó

jorge llanque

Como logró esa agilidad

Alejo Goncalves

a donde va esto? que es?

src= socket.io/socket.io.js

cristian-salem-quilodran-parra

Maravillosa clase

Andres Roberto Coello Goyes

websocket.js:120 WebSocket connection to 'ws://localhost:9000/socket.io/?
este es el error que tengo…

José Manuel Puicón Rodas

Me gusta la forma en la cual busca los errores, es tan simple y claro cómo llega a ello. Buena técnica. Miren los detalles.

Carlos Enrique Ramírez Flores