websocket | Astro Lounge | Page 1

pulsar halo Jan 26, 2024, 11:25 AM

#

how can i use socket.io with astro?

empty pelican Jan 26, 2024, 2:39 PM

#

If you're using the Node adapter, you can build Astro in middleware mode. Then you can add both the built Astro project, and socket.io to a server, like express.
https://docs.astro.build/en/guides/integrations-guide/node/#middleware

Docs

@astrojs/node

Learn how to use the @astrojs/node SSR adapter to deploy your Astro project.

pulsar halo Jan 26, 2024, 2:48 PM

#

Cant i use inside of astro

#

Maybe On endpoints

#

idk

empty pelican Jan 26, 2024, 4:36 PM

#

there's nothing builtin to Astro, but if socket.io allows you to forward requests to be upgraded to websockets, that might work in an endpoint. I don't remember anything like this existing last time I used socket.io though.

pulsar halo Jan 27, 2024, 7:43 PM

#

Okey tysm

proper sundial Jul 10, 2024, 9:39 PM

#

hi guys!!!
do you know how to avoid lose the connection on page change?
i don't want the user reconnects every time access a new page...
I tried with transition:persist without success.

components/Websocket.astro

<script>
  import { io } from "socket.io-client";
  import { getCookies } from "../helpers/utils";

  const cookies: Record<string, string> = getCookies();

  const websocket = io("http://localhost:3000", {
    auth: {
      token: cookies["token"] ?? null,
    },
  });

  websocket.on("connect", () => {
    console.log("Connected", websocket.id);
  });

  websocket.on("disconnect", () => {
    console.log("Disconnected");
  });

  if (!window.websocket) {
    window.websocket = websocket;
  }
</script>

Layouts/Layout.astro

---
import { ViewTransitions } from "astro:transitions";
import Websocket from "../components/Websocket.astro";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <ViewTransitions />
  </head>
  <body>
    <slot />
    <Websocket transition:persist />
  </body>
</html>

grizzled nymph Mar 2, 2025, 8:11 PM

#

@proper sundial hello Xino, have u found a workaround for this ?

#websocket