Ejemplo de Implementación Frontend

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 6

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Carlos Eduardo Magallon Zepeda

hace 3 años

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

Captura de pantalla de 2022-05-20 14-30-19.png

Àlex Grau Roca

hace 3 años

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)

Miguel A. Arenas

hace 2 años

Hay clases que merecen like (y) ❤️

Juan Camilo Farfan Juanias

hace un mes

![](https://static.platzi.com/media/user_upload/image-7ef78a89-b917-452d-b580-c9c82af71abc.jpg)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

hace 2 meses

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

Victor Baruch Pazaran Jaimes

hace 2 años

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>
   <h1>Post application Tester</h1>
   <div>
      <h2>Posts actuales</h2>
      <div id="actual-posts-container">
      </div>

      <h2>Posts Recien Creados</h2>
      <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}</h4>
               <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>

Si ya tienes una cuenta,

Curso de Go Avanzado: REST y WebSockets

Ejemplo de implementación frontend