Astro JS & Strapi CMS: Basic CRUD, PWA, and WebSocket Integration using SSE (Without Using Frameworks)

module.exports = {
  async getCart(ctx) {
    const user = await strapi.entityService.findOne(
      "plugin::users-permissions.user",
      ctx.state.user.id,
      {
        populate: {
          cart: { populate: ["products.image"] },
        },
      }
    );
    return user.cart.products;
  },
  // Rest of the code...
};

module.exports = {
  routes: [
    {
      method: "GET",
      path: "/users/me/cart",
      handler: "user.getCart",
    },
    // Rest of the code...
  ],
};

module.exports = ({ env }) => ({
  io: {
    enabled: true,
    config: {
      contentTypes: ["api::product.product"],
    },
  },
});

// src/scripts/websocket.js
import { io } from "socket.io-client";
import { strapi } from "./constants";
import events from "events";

const socket = io(strapi.BASE_URL, {
  transports: ["websocket"],
});
// Exporting the emitter for use in SSE
export const Emitter = new events.EventEmitter();

socket.on("connect", () => {
  console.log("WebSocket connected");
});

socket.on("connect_error", (error) => {
  console.error("WebSocket connection error:", error);
});

socket.on("disconnect", (reason) => {
  console.log("WebSocket disconnected:", reason);
});

socket.on("product:create", (data) => {
  Emitter.emit("product:create", { event: "product:create", data });
});

socket.on("product:update", (data) => {
  Emitter.emit("product:update", { event: "product:update", data });
});

socket.on("product:delete", (data) => {
  Emitter.emit("product:delete", { event: "product:delete", data });
});

export default socket;

import { Emitter } from "../../utils/websocket"; // Import the WebSocket Emitter used to listen to events

interface ProductEventData {
  event: string;
  data: {
    data: {
      attributes: {
        pID: string;
      };
    };
  };
}

// Asynchronous GET handler function for returning a stream of events.
export async function GET() {
  console.log("stream.js> get()"); // Log to indicate the stream GET request is initiated.

  let eventsListener: (data: ProductEventData) => void; // Declare a variable to hold the event listener.

  // Create a new ReadableStream for server-sent events (SSE).
  const stream = new ReadableStream({
    // This function is called when the stream is first initialized.
    start(controller: ReadableStreamDefaultController) {
      // Define an event listener that handles WebSocket events.
      eventsListener = (data: any) => {
        console.log(
          `stream.js> Emitter event = ${data.event}, id = ${data.data.data.attributes.pID}`
        );

        // Format the event data to be sent in the SSE format.
        const eventData = `data: ${JSON.stringify(data)}\r\n\r\n`;

        // Enqueue the formatted event data to be sent to the client.
        controller.enqueue(eventData);
      };

      // Remove any previous listeners for product events (create, update, delete).
      Emitter.off("product:create", eventsListener);
      Emitter.off("product:update", eventsListener);
      Emitter.off("product:delete", eventsListener);

      // Attach listeners to the WebSocket Emitter for product events (create, update, delete).
      Emitter.on("product:create", eventsListener);
      Emitter.on("product:update", eventsListener);
      Emitter.on("product:delete", eventsListener);
    },

    // This function is called if the stream is canceled by the client.
    cancel() {
      console.log("stream.js> cancel()");

      // Remove the attached listeners for product events when the stream is canceled.
      Emitter.removeListener("product:create", eventsListener);
      Emitter.removeListener("product:update", eventsListener);
      Emitter.removeListener("product:delete", eventsListener);
    },
  });

  // Return the ReadableStream as a response to the client, sending events as SSE.
  return new Response(stream, {
    status: 200,
    headers: {
      "Content-Type": "text/event-stream", // Content type for SSE.
      Connection: "keep-alive", // Keep the connection open to send events continuously.
      "Cache-Control": "no-cache", // Prevent caching of the response.
    },
  });
}

const CACHE_NAME = "astro-cache-v1";
const urlsToCache = [
  "/",
  "/manifest.json",
  "/icons/icon-192x192.png",
  "/icons/icon-512x512.png",
];

// Install event: caching necessary assets
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

// Fetch event: serve from cache, check for changes, and update cache if necessary
self.addEventListener("fetch", (event) => {
  if (event.request.method !== "GET") {
    event.respondWith(fetch(event.request));
    return;
  }

  event.respondWith(
    caches.match(event.request).then(async (cachedResponse) => {
      const fetchRequest = event.request.clone();

      // Fetch the resource from the network
      return fetch(fetchRequest)
        .then((networkResponse) => {
          // If the server returns 304, use the cached version
          if (networkResponse.status === 304 && cachedResponse) {
            return cachedResponse;
          }

          // Otherwise, clone the network response and update the cache
          const clonedResponse = networkResponse.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, clonedResponse);
          });

          // Return the network response
          return networkResponse;
        })
        .catch(() => {
          // If fetch fails (e.g., offline), return cached response if available
          if (cachedResponse) {
            return cachedResponse;
          }

          // Optionally, handle a case where neither fetch nor cache works
          return new Response("Resource not available in cache or network", {
            status: 404,
            statusText: "Not Found",
          });
        });
    })
  );
});

// Activate event: cleanup old caches
self.addEventListener("activate", (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

{
  "name": "BSO Assignment",
  "short_name": "AppName",
  "description": "A short description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

<head>
// Rest of the code...
  <link rel="manifest" href="/manifest.json" />
  <script>
  // Register Service Worker
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker
        .register("/sw.js")
        .then((registration) => {
          console.log(
            "ServiceWorker registration successful with scope: ",
            registration.scope
          );
        })
        .catch((error) => {
          console.log("ServiceWorker registration failed: ", error);
        });
      });
    }
  </script>
// Rest of the Code...
</head>