Ejemplo de implementación frontend

Clase 24 de 26 • Curso de Go Avanzado: REST y WebSockets

Clase anteriorSiguiente clase

Carlos Eduardo Magallon Zepeda

student•

Ya lo hice, pero con el diseño más simplista en React.

Àlex Grau Roca

student•

A mi con el cors.Default() no me ha funcionado. Tras investigar y realizar distintas aproximaciones, revisando la documentación del paquete vi que existe el método cors.AllowAll(), de este modo si que me ha funcionado.

handler := cors.AllowAll().Handler(b.router)

Steven Varela

student•

Gracias, me paso lo mismo, solo me funciono con este método.

Miguel A. Arenas

student•

Hay clases que merecen like (y) <3

Victor Baruch Pazaran Jaimes

student•

Hice un frontend muy sencillo con vanilla JS en el mismo archivo, les dejo el codigo abajo por si alguien quiere usarlo

En la parte de arriba se muestran los posts que ya estaban en la base de datos, y en la parte de abajo solo los que se van creando en tiempo real mientras la pagina está abierta

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Websockets test</title>
   <style>
      :root {
         font-family: sans-serif;
      }
      .post {
         background-color: #0087b2;
         border-radius: 5px;
         margin-bottom: 1rem;
         padding: 0.5rem 1rem; 
      }

      .post-title {
         margin: 0.5rem 0;
      }

      #new-posts-container .post{
         background-color: hsl(0, 49%, 49%);
      }
   </style>
</head>
<body>
   <h2>Post application Tester</h2>
   <div>
      <h3>Posts actuales</h3>
      <div id="actual-posts-container">
      </div>

      <h3>Posts Recien Creados</h3>
      <div id="new-posts-container">
      </div>
   </div>

   <script>
      // IMPORTANTE: aqui deben cambiar el server por "localhost" o su direccion ip si quieren acceder desde otros dispositivos
      const SERVER_URL = ""
	const WS_URL = ""
      // ↓ Aqui pueden pegar su token generado en el login si quieren dejar las rutas protegidas pero aun así poder obtener los posts
      const AUTHORIZATION_TOKEN = ""

      let actualPostsContainer = document.getElementById("actual-posts-container");
      let newPostsContainer = document.getElementById("new-posts-container");

      function insertPost(postData, container) {
         let postTemplate = `
            <div class="post">
               <h4 class="post-title">${postData.postContent}</h5>
               <small>
                  <span>Fecha: <b>${new Date(postData.createdAt).toDateString()}</b></span>
                  <br>
                  <span>Creado por: <b>${postData.userId}</b></span>
               </small>
            </div>
            `

         container.insertAdjacentHTML("afterbegin", postTemplate)
      }

      fetch(SERVER_URL, {
         method: "GET",
         headers: {
            "Content-Type": "application/json",
            "Authorization": AUTHORIZATION_TOKEN
         }
      }).then(res => {
         if (res.ok) {
            return res.json()
         } else {
            console.log(res.statusText)
         }
      }).then(postsArray => {
         postsArray.forEach(post => {
            insertPost(post, actualPostsContainer)
         })
      }).catch(err => console.log(err))

      const ws = new WebSocket(WS_URL);

      ws.onopen = (ev) => {
         console.log("successfully connected to the websocket server")
      }

      ws.onmessage = (ev) => {
         let socketMessage = JSON.parse(ev.data);

         if (socketMessage.type == "Post_Created") {
            let newPost = socketMessage.payload

            insertPost(newPost, newPostsContainer)
         }
      }

      ws.onerror = (ev) => {
         alert("Error connecting to websockets")
      }
   </script>
</body>
</html>

Camilo Andres Agudelo

student•

Alguien sabe como seria para enviar mensajes al ws

Claudio Anibal Morales Pérez

student•

Tenia este problema en otro proyecto que lo pause, pero este video me ayudo a solucionar el inconveniente.

	router := mux.NewRouter().StrictSlash(true)
	handler := cors.Default().Handler(router)

	router.HandleFunc("/", home)
	router.HandleFunc("/create", createEvent).Methods("POST")
	log.Fatal(http.ListenAndServe(":3000", handler))
}

ahora mi dilema es como hago para que el cors solo acepte peticiones de localhost o un dominio x?

Fernando José Aguilar Rivas

student•

Con los conocimientos de websocket de este curso puedo implementar las demás operaciones CRUD?

Juan Camilo Farfan Juanias

student•

Implemente un front end en vanilla JS el cual simplemnte trae la informacion base de posts y los nuevos posts que llgan se agregan y se marcan con color para que el usuario sepa que esas tarjetas son nuevas, con un componente "reactivo"

Eduard Cantillo

student•

Estaba mirando y cuando se realiza la desconexion de un cliente o una conexion no se ejecuta el metodo onDisconect

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Websockets test</title>
   <style>
      :root {
         font-family: sans-serif;
      }
      .post {
         background-color: #0087b2;
         border-radius: 5px;
         margin-bottom: 1rem;
         padding: 0.5rem 1rem; 
      }

      .post-title {
         margin: 0.5rem 0;
      }

      #new-posts-container .post{
         background-color: hsl(0, 49%, 49%);
      }
   </style>
</head>
<body>
   <h2>Post application Tester</h2>
   <div>
      <h3>Posts actuales</h3>
      <div id="actual-posts-container">
      </div>

      <h3>Posts Recien Creados</h3>
      <div id="new-posts-container">
      </div>
   </div>

   <script>
      // IMPORTANTE: aqui deben cambiar el server por "localhost" o su direccion ip si quieren acceder desde otros dispositivos
      const SERVER_URL = ""
	const WS_URL = ""
      // ↓ Aqui pueden pegar su token generado en el login si quieren dejar las rutas protegidas pero aun así poder obtener los posts
      const AUTHORIZATION_TOKEN = ""

      let actualPostsContainer = document.getElementById("actual-posts-container");
      let newPostsContainer = document.getElementById("new-posts-container");

      function insertPost(postData, container) {
         let postTemplate = `
            <div class="post">
               <h4 class="post-title">${postData.postContent}</h5>
               <small>
                  <span>Fecha: <b>${new Date(postData.createdAt).toDateString()}</b></span>
                  <br>
                  <span>Creado por: <b>${postData.userId}</b></span>
               </small>
            </div>
            `

         container.insertAdjacentHTML("afterbegin", postTemplate)
      }

      fetch(SERVER_URL, {
         method: "GET",
         headers: {
            "Content-Type": "application/json",
            "Authorization": AUTHORIZATION_TOKEN
         }
      }).then(res => {
         if (res.ok) {
            return res.json()
         } else {
            console.log(res.statusText)
         }
      }).then(postsArray => {
         postsArray.forEach(post => {
            insertPost(post, actualPostsContainer)
         })
      }).catch(err => console.log(err))

      const ws = new WebSocket(WS_URL);

      ws.onopen = (ev) => {
         console.log("successfully connected to the websocket server")
      }

      ws.onmessage = (ev) => {
         let socketMessage = JSON.parse(ev.data);

         if (socketMessage.type == "Post_Created") {
            let newPost = socketMessage.payload

            insertPost(newPost, newPostsContainer)
         }
      }

      ws.onerror = (ev) => {
         alert("Error connecting to websockets")
      }
   </script>
</body>
</html>

	router := mux.NewRouter().StrictSlash(true)
	handler := cors.Default().Handler(router)

	router.HandleFunc("/", home)
	router.HandleFunc("/create", createEvent).Methods("POST")
	log.Fatal(http.ListenAndServe(":3000", handler))
}

Ejemplo de implementación frontend

Introducción

Introducción al curso

¿Qué estaremos construyendo?

HTTP y REST

CRUD

REST

Inicialización de módulo e instalación de dependencias

Struct Server

Nuestro primer endpoint

Definiendo el modelo de usuarios

Patrón repository

Registro de usuarios

Implementando el registro

Probando los registros

Autenticación de usuarios

Probando el login

Middleware de validación de autenticación

Implementando el middleware

Modelo Posts

CRUD para Posts

Paginación para Posts

WebSockets

Websockets

Upgrader y Endpoint para Websocket

Struct de Hub para conexiones

Implementando el Broadcast

Cierre

Ejemplo de implementación frontend

Docker file para producción

Siguientes pasos y mejoras