chore: use /ws/visitors

Author: atinux

README.md

@@ -25,9 +25,9 @@ Inspired by <a href="https://github.com/cloudflare/templates/tree/main/multiplay
 
 When the first request is made, the server store the user's location (latitude and longitude) using the [`useState`](https://nuxt.com/docs/api/composables/use-state) composable in the [`app/plugins/location.server.ts`](./app/plugins/location.server.ts) file.
 
-A `/visitors` websocket endpoint is created in the [`server/routes/visitors.ts`](./server/routes/visitors.ts) file using the [`defineWebSocketHandler`](https://nitro.build/guide/websocket) function.
+A `/ws/visitors` websocket endpoint is created in the [`server/routes/ws/visitors.ts`](./server/routes/ws/visitors.ts) file using the [`defineWebSocketHandler`](https://nitro.build/guide/websocket) function.
 
-When the [`index.vue` page](./app/pages/index.vue) is mounted on client-side, it connects to the `/visitors` websocket endpoint with its location as query parameters to the server.
+When the [`index.vue` page](./app/pages/index.vue) is mounted on client-side, it connects to the `/ws/visitors` websocket endpoint with its location as query parameters to the server.
 
 The websocket endpoints send back the user locations to the client-side.
 

app/pages/index.vue

@@ -7,7 +7,7 @@ const phi = ref(0)
 const locations = ref<Array<{ latitude: number, longitude: number }>>([])
 
 // Connect to the websocket endpoint
-const { data, open } = useWebSocket(`/visitors?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`, { immediate: false })
+const { data, open } = useWebSocket(`/ws/visitors?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`, { immediate: false })
 // When the data is received, we parse it as JSON and update the locations
 watch(data, async (newData) => {
   locations.value = JSON.parse(typeof newData === 'string' ? newData : await newData.text())