Refactor WebSocket handling and remove nuxt-visitors module

Replaced nuxt-visitors module with a custom WebSocket implementation for location tracking. Removed redundant code and comments in `useVisitors` composable and introduced the `location.server` plugin to manage user location. Updated dependencies and configurations to reflect these changes, streamlining the approach.

app/components/AppHeader.vue

@@ -57,7 +57,7 @@ async function toggleTheme() {
 }
 
 const { locale, setLocale, locales, t } = useI18n()
-const currentLocale = computed(() => locales.filter(l => l.code === locale.value)[0])
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
 const lang = ref(locale.value)
 watch(lang, () => changeLocale(lang.value))
 

app/components/home/Globe.vue

@@ -34,7 +34,7 @@ const DEFAULT_CONFIG: COBEOptions = {
   mapBrightness: 1,
   baseColor: [0.8, 0.8, 0.8],
   opacity: 0.7,
-  markerColor: [251 / 255, 100 / 255, 21 / 255],
+  markerColor: [160 / 255, 160 / 255, 160 / 255],
   glowColor: [1, 1, 1],
   markers: [],
 }
@@ -90,7 +90,6 @@ function onRender(state: Record<string, unknown>) {
   state.height = width.value * 2
   state.markers = props.locations?.map(location => ({
     location: [location.latitude, location.longitude],
-    // Set the size of the marker to 0.1 if it's the user's location, otherwise 0.05
     size: props.myLocation?.latitude === location.latitude && props.myLocation?.longitude === location.longitude ? 0.1 : 0.05,
   }))
 }

app/components/home/Stats.vue

@@ -2,7 +2,7 @@
 import type { Stats } from '~~/types'
 
 const { locale, locales } = useI18n()
-const currentLocale = computed(() => locales.find(l => l.code === locale.value))
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
 
 const { data: stats } = await useFetch<Stats>('/api/stats')
 const { t } = useI18n({

app/composables/visitors.ts

@@ -1,25 +1,7 @@
 import { useState } from '#imports'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-/**
- * Composable for tracking real-time website visitors count via WebSocket
- *
- * Features:
- * - Real-time visitors count updates
- * - Automatic WebSocket connection management
- * - Connection status tracking
- * - Error handling
- * - Automatic cleanup on component unmount
- *
- * @returns {object} An object containing:
- *  - visitors: Ref<number> - Current number of visitors
- *  - isLoading: Ref<boolean> - Loading state indicator
- *  - error: Ref<string | null> - Error message if any
- *  - isConnected: Ref<boolean> - WebSocket connection status
- *  - reconnect: () => void - Function to manually reconnect
- */
 export function useVisitors() {
-  // State management
   const visitors = useState<number>('visitors', () => 0) // Added default value
   const locations = ref<Array<{ latitude: number, longitude: number }>>([])
   const myLocation = useState('location', () => ({
@@ -32,23 +14,15 @@ export function useVisitors() {
   const isConnected = ref(false)
   const isMounted = ref(true)
 
-  // Constants
   const RECONNECTION_DELAY = 5000 // 5 seconds delay for reconnection
   const WS_NORMAL_CLOSURE = 1000
 
-  /**
-   * Constructs the WebSocket URL based on the current protocol and host
-   * @returns {string} WebSocket URL
-   */
   const getWebSocketUrl = (): string => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
     const baseUrl = window.location.host.replace(/^(http|https):\/\//, '')
-    return `${protocol}//${baseUrl}/.nuxt-visitors/ws?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`
+    return `${protocol}//${baseUrl}/ws?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`
   }
 
-  /**
-   * Cleans up WebSocket connection and resets state
-   */
   const cleanup = () => {
     if (wsRef.value) {
       wsRef.value.close()
@@ -58,10 +32,6 @@ export function useVisitors() {
     isLoading.value = false
   }
 
-  /**
-   * Handles WebSocket messages
-   * @param {MessageEvent} event - WebSocket message event
-   */
   const handleMessage = async (event: MessageEvent) => {
     if (!isMounted.value)
       return
@@ -83,10 +53,6 @@ export function useVisitors() {
     }
   }
 
-  /**
-   * Handles WebSocket connection closure
-   * @param {CloseEvent} event - WebSocket close event
-   */
   const handleClose = (event: CloseEvent) => {
     console.log('Visitors WebSocket closed:', event.code, event.reason)
     isConnected.value = false
@@ -94,14 +60,11 @@ export function useVisitors() {
 
     if (isMounted.value && event.code !== WS_NORMAL_CLOSURE) {
       error.value = 'Connection lost'
-      // Attempt to reconnect after delay
-      setTimeout(() => reconnect(), RECONNECTION_DELAY)
+      // eslint-disable-next-line ts/no-use-before-define
+      setTimeout(reconnect, RECONNECTION_DELAY)
     }
   }
 
-  /**
-   * Initializes WebSocket connection
-   */
   const initWebSocket = () => {
     if (!isMounted.value)
       return
@@ -141,9 +104,6 @@ export function useVisitors() {
     }
   }
 
-  /**
-   * Manually triggers WebSocket reconnection
-   */
   const reconnect = () => {
     if (!isMounted.value)
       return
@@ -152,7 +112,6 @@ export function useVisitors() {
     initWebSocket()
   }
 
-  // Lifecycle hooks
   onMounted(() => {
     if (import.meta.client) {
       isMounted.value = true

app/pages/index.vue

@@ -17,8 +17,6 @@ const { myLocation, locations } = useVisitors()
     <HomeActivity />
     <HomeQuote />
     <HomeCatchPhrase />
-    {{ locations }}
-    {{ myLocation }}
     <HomeGlobe
       :my-location
       :locations

app/plugins/location.server.ts

@@ -0,0 +1,11 @@
+export default defineNuxtPlugin(() => {
+  const event = useRequestEvent()
+  console.log('event', event)
+
+  useState('location', () => ({
+    latitude: event?.context.cf?.latitude || Math.random() * 180 - 90, // default to random latitude (only in dev)
+    longitude: event?.context.cf?.longitude || Math.random() * 360 - 180, // default to random longitude (only in dev)
+  }))
+
+  console.log(useState('location').value)
+})