Conocer y comprender c贸mo se realizan las conexiones hacia los servidores a trav茅s de internet y sus implicaciones en el desarrollo de servidores

1

Bienvenida y presentaci贸n del curso

2

Qu茅 es Node y c贸mo instalarlo

3

驴Qu茅 son y c贸mo se usan las peticiones HTTP?

4

M茅todos, cabeceras y estados

5

Cuerpo y query de la petici贸n

Crear un servidor HTTP en Javascript, y comenzar a escuchar y responder peticiones desde un cliente .

6

Crear un servidor HTTP desde NodeJS

7

驴C贸mo pueden venir las peticiones?

8

Recibir informaci贸n desde el cliente: Body y Query

9

Informaci贸n contextual: Leer las cabeceras

10

Tipos de respuesta: Vac铆a, plana, con datos y estructurada

11

Respuestas coherentes

12

Servir archivos est谩ticos

13

Errores: C贸mo presentarlos e implicaciones en la seguridad

Comprender y desarrollar la arquitectura b谩sica de un backend en NodeJS, y comunicarse entre m贸dulos

14

Conceptualmente: Rutas, controladores y bases de datos

15

Rutas y capa de red: Responsabilidades y l铆mites

16

Controladores: Definiendo la l贸gica de negocio

17

Almacenando la informaci贸n en una base de datos

Utilizar una base de datos para definir, modelar, almacenar y recuperar la informaci贸n de nuestra aplicaci贸n

18

Tipos de Bases de Datos: Relacionales y No Relacionales

19

Crear y Configurar tu Base de Datos con MongoDB

20

MongoDB: Almacenar y leer datos

21

MongoDB: Actualizar datos

22

MongoDB: Consultar datos

23

MongoDB: Eliminar Datos

24

Gestionar conexiones a la base de datos desde la API

Uso de entidades para crear aplicaciones escalables

25

Escalando la arquitectura: M煤ltiples entidades

26

Relacionando nuestras entidades

27

C贸mo recibir ficheros desde NodeJS

28

Guardar el fichero en el servidor

Conocer el protocolo de websockets, e implementar comunicaci贸n cliente/servidor con SocketIO.

29

WebSockets: Qu茅 son, por qu茅 son interesantes y c贸mo usarlos

30

Manejo de Websockets con NodeJS

31

Conectar la API al servidor de WebSockets

Revisi贸n de lo aprendido, y pr贸ximos pasos

32

Revisi贸n y pr贸ximos pasos

33

Tips para escalar nuestro proyecto

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Conectar la API al servidor de WebSockets

31/33
Recursos

Aportes 30

Preguntas 13

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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

tambi茅n se puede escribir as铆:

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

El espartano sapeeee.
Excelente curso.

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' });
                });

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.

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

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!

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);
        }
    })
}

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,
}

馃槂

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)

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/

Los sockets son GENIALES!

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

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

Muy bien!

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

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

que tal qued贸

Como logr贸 esa agilidad

a donde va esto? que es?

src= socket.io/socket.io.js

Maravillosa clase

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

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.

AYUDA!!
me tira el siguiente error! pero no encuentro porque est谩 pasando!

La aplicaci贸n esta escuchando en pueto:3001
TypeError: socket.io.emmit is not a function
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/controller.js:24:19
    at new Promise (<anonymous>)
    at Object.addMessage (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/controller.js:6:12)
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/network.js:20:16
    at Layer.handle [as handle_request] (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/express/lib/router/layer.js:95:5)
    at next (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/express/lib/router/route.js:137:13)
    at Immediate.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/multer/lib/make-middleware.js:53:37)
    at processImmediate (internal/timers.js:441:21)
[Response error] =>  TypeError: socket.io.emmit is not a function
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/controller.js:24:19
    at new Promise (<anonymous>)
    at Object.addMessage (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/controller.js:6:12)
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/componets/message/network.js:20:16
    at Layer.handle [as handle_request] (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/express/lib/router/layer.js:95:5)
    at next (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/express/lib/router/route.js:137:13)
    at Immediate.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/platzi master/nodeJS/node_modules/multer/lib/make-middleware.js:53:37)
    at processImmediate (internal/timers.js:441:21)
[db] Conectada con el server db

Alguien me puede decir que significa poner require(鈥socket.io鈥)(鈥榮erver鈥)

Porque se ponen los parenresis asi pegados?

Incre铆ble, gran clase

El mejor curso de todos !!

Excelente curso, quedo fascinado