No tienes acceso a esta clase

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

Ejemplo de implementaci贸n frontend

24/26
Recursos

Aportes 4

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Ya lo hice, pero con el dise帽o m谩s simplista en React.

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)

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>

Hay clases que merecen like (y) 鉂わ笍