nuxt-visitors 1.0.1 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# Nuxt Active Users
+# Nuxt Visitors 👀
 
 <!-- automd:badges color=black license provider=shields name=nuxt-visitors -->
 
@@ -17,6 +17,7 @@ Add live visitor counting to your Nuxt website in seconds. WebSocket-based, type
 - 🛠 Automatic connection management
 - 📊 Type-safe composable
 - 🧹 Auto cleanup on unmount
+- 🌐 Leverages [Nitro WebSocket](https://nitro.unjs.io/guide/websocket) with Pub/Sub
 
 ## Installation
 
@@ -26,30 +27,19 @@ Install the module to your Nuxt application with one command:
 npx nuxi module add nuxt-visitors
 ```
 
-<!-- automd:pm-install name="nuxt-visitors" -->
+As [Nitro WebSocket support](https://nitro.unjs.io/guide/websocket) is experimental, you need to enable it in your `nuxt.config.ts`:
 
-```sh
-# ✨ Auto-detect
-npx nypm install nuxt-visitors
-
-# npm
-npm install nuxt-visitors
-
-# yarn
-yarn add nuxt-visitors
-
-# pnpm
-pnpm install nuxt-visitors
-
-# bun
-bun install nuxt-visitors
-
-# deno
-deno install nuxt-visitors
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-visitors'],
+  nitro: {
+    experimental: {
+      websocket: true
+    }
+  }
+})
 ```
 
-<!-- /automd -->
-
 ## Usage
 
 ```vue

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-visitors",
   "configKey": "visitors",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -7,14 +7,10 @@ const module = defineNuxtModule({
   },
   setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    nuxt.options = nuxt.options || {};
-    nuxt.options.nitro = nuxt.options.nitro || {};
-    nuxt.options.nitro.experimental = nuxt.options.nitro.experimental || {};
-    nuxt.options.nitro.experimental.websocket = true;
-    addImportsDir(resolver.resolve("runtime/composables"));
+    addImportsDir(resolver.resolve("./runtime/app/composables"));
     addServerHandler({
-      route: "/api/_visitors_/ws",
-      handler: resolver.resolve("./runtime/server/api/visitors.ts")
+      route: "/.nuxt-visitors/ws",
+      handler: resolver.resolve("./runtime/server/routes/visitors")
     });
   }
 });

package/dist/runtime/{composables → app/composables}/useVisitors.js

@@ -10,7 +10,7 @@ export function useVisitors() {
   const getWebSocketUrl = () => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const baseUrl = window.location.host.replace(/^(http|https):\/\//, "");
-    return `${protocol}//${baseUrl}/api/_visitors_/ws`;
+    return `${protocol}//${baseUrl}/.nuxt-visitors/ws`;
   };
   const cleanup = () => {
     if (wsRef.value) {
@@ -20,10 +20,11 @@ export function useVisitors() {
     isConnected.value = false;
     isLoading.value = false;
   };
-  const handleMessage = (event) => {
+  const handleMessage = async (event) => {
     if (!isMounted.value) return;
     try {
-      const visitorCount = parseInt(event.data, 10);
+      const data = typeof event.data === "string" ? event.data : await event.data.text();
+      const visitorCount = parseInt(data, 10);
       if (!isNaN(visitorCount) && visitorCount >= 0) {
         visitors.value = visitorCount;
       } else {

package/dist/runtime/server/routes/visitors.js

@@ -0,0 +1,11 @@
+export default defineWebSocketHandler({
+  open(peer) {
+    peer.subscribe("nuxt-visitors");
+    peer.send(peer.peers.size);
+    peer.publish("nuxt-visitors", peer.peers.size);
+  },
+  close(peer) {
+    peer.publish("nuxt-visitors", peer.peers.size);
+    peer.unsubscribe("nuxt-visitors");
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-visitors",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Add real-time visitor tracking to your Nuxt app with one line of code. WebSocket made easy",
   "license": "Apache-2.0",
   "type": "module",
@@ -50,11 +50,11 @@
     "@types/node": "latest",
     "changelogen": "^0.5.7",
     "eslint": "^9.19.0",
-    "nuxt": "3.15.2",
+    "nuxt": "3.15.3",
     "typescript": "5.6.3",
     "vitest": "^3.0.4",
     "vue-tsc": "^2.2.0",
     "automd": "^0.3.12"
   },
-  "packageManager": "pnpm@8.6.5+sha1.a074a371066567dcdeb19a1d1bd9a78cf3c9faa3"
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }

package/dist/runtime/server/api/visitors.js

@@ -1,54 +0,0 @@
-class StatsWebSocketManager {
-  static instance;
-  connectedPeers = /* @__PURE__ */ new Set();
-  constructor() {
-  }
-  static getInstance() {
-    if (!this.instance) {
-      this.instance = new StatsWebSocketManager();
-    }
-    return this.instance;
-  }
-  addPeer(peer) {
-    this.connectedPeers.add(peer);
-    this.logConnectionStats();
-  }
-  removePeer(peer) {
-    this.connectedPeers.delete(peer);
-    this.logConnectionStats();
-  }
-  getActiveVisitors() {
-    return this.connectedPeers.size;
-  }
-  updateActiveVisitors(visitors) {
-    this.connectedPeers.forEach((peer) => {
-      peer.send(JSON.stringify(visitors));
-    });
-  }
-  logConnectionStats() {
-    console.log(`Active visitors connections: ${this.connectedPeers.size}`);
-  }
-}
-const wsManager = StatsWebSocketManager.getInstance();
-export default defineWebSocketHandler({
-  open(peer) {
-    try {
-      wsManager.addPeer(peer);
-      const visitors = wsManager.getActiveVisitors();
-      wsManager.updateActiveVisitors(visitors);
-    } catch (error) {
-      console.error("Visitors WebSocket open error:", error);
-      peer.close(1011, error instanceof Error ? error.message : "Unknown error");
-    }
-  },
-  close(peer) {
-    wsManager.removePeer(peer);
-    const visitors = wsManager.getActiveVisitors();
-    wsManager.updateActiveVisitors(visitors);
-    console.log("Visitors WebSocket disconnected:", peer.id);
-  },
-  error(peer, error) {
-    wsManager.removePeer(peer);
-    console.error("Visitors WebSocket error:", error);
-  }
-});