куча говна

client/app/composables/use-app.ts

@@ -11,8 +11,6 @@ export const useApp = createGlobalState(() => {
 
   const previousInputMuted = ref(inputMuted.value)
 
-  const me = computed(() => clients.value.find(client => client.isMe))
-
   function muteInput() {
     inputMuted.value = true
   }
@@ -73,7 +71,6 @@ export const useApp = createGlobalState(() => {
 
   return {
     clients,
-    me,
     inputMuted,
     muteInput,
     unmuteInput,

client/app/composables/use-auth.ts

@@ -0,0 +1,69 @@
+import chadApi from '#shared/chad-api'
+import { createGlobalState } from '@vueuse/core'
+
+interface Me {
+  id: string
+  username: string
+  displayName: string
+}
+
+export const useAuth = createGlobalState(() => {
+  const me = shallowRef<Me>()
+
+  function setMe(value: Me | undefined): void {
+    me.value = value
+  }
+
+  async function login(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi('/login', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function register(username: string, password: string): Promise<void> {
+    try {
+      const result = await chadApi('/register', {
+        method: 'POST',
+        body: {
+          username,
+          password,
+        },
+      })
+
+      setMe(result)
+
+      await navigateTo('/')
+    }
+    catch {}
+  }
+
+  async function logout(): Promise<void> {
+    try {
+      await chadApi('/logout', { method: 'POST' })
+
+      setMe(undefined)
+
+      await navigateTo({ name: 'Login' })
+    }
+    catch {}
+  }
+
+  return {
+    me: readonly(me),
+    setMe,
+    login,
+    register,
+    logout,
+  }
+})

client/app/composables/use-clients.ts

@@ -2,26 +2,33 @@ import type { ChadClient, UpdatedClient } from '#shared/types'
 import { createGlobalState } from '@vueuse/core'
 
 export const useClients = createGlobalState(() => {
+  const auth = useAuth()
   const signaling = useSignaling()
   const toast = useToast()
 
   const clients = shallowRef<ChadClient[]>([])
 
+  const me = computed(() => clients.value.find(client => client.userId === auth.me.value?.id))
+
   watch(signaling.socket, (socket) => {
     if (!socket)
       return
 
-    socket.on('clientChanged', (clientId: ChadClient['id'], updatedClient: UpdatedClient) => {
+    socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
       const client = getClient(clientId)
       updateClient(clientId, updatedClient)
 
-      if (updatedClient.username)
-        toast.add({ severity: 'info', summary: `${client?.username} is now ${updatedClient.username}`, closable: false, life: 1000 })
+      if (client && client.displayName !== updatedClient.displayName)
+        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
+    })
+
+    socket.on('disconnect', () => {
+      clients.value = []
     })
   })
 
-  function getClient(clientId: ChadClient['id']) {
-    return clients.value.find(client => client.id === clientId)
+  function getClient(clientId: ChadClient['socketId']) {
+    return clients.value.find(client => client.socketId === clientId)
   }
 
   function addClient(...client: ChadClient[]) {
@@ -30,12 +37,12 @@ export const useClients = createGlobalState(() => {
     triggerRef(clients)
   }
 
-  function removeClient(clientId: ChadClient['id']) {
-    clients.value = clients.value.filter(client => client.id !== clientId)
+  function removeClient(clientId: ChadClient['socketId']) {
+    clients.value = clients.value.filter(client => client.socketId !== clientId)
   }
 
-  function updateClient(clientId: ChadClient['id'], updatedClient: UpdatedClient) {
-    const clientIdx = clients.value.findIndex(client => client.id === clientId)
+  function updateClient(clientId: ChadClient['socketId'], updatedClient: UpdatedClient) {
+    const clientIdx = clients.value.findIndex(client => client.socketId === clientId)
 
     if (clientIdx === -1)
       return
@@ -49,6 +56,7 @@ export const useClients = createGlobalState(() => {
   }
 
   return {
+    me,
     clients,
     getClient,
     addClient,

client/app/composables/use-mediasoup.ts

@@ -1,4 +1,4 @@
-import type { ChadClient, RemoteClient } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
 import { usePreferences } from '~/composables/use-preferences'
@@ -23,6 +23,7 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
+  const { me } = useAuth()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -40,7 +41,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!socket)
       return
 
-    socket.on('connect', async () => {
+    socket.on('authenticated', async () => {
       if (!signaling.socket.value)
         return
 
@@ -123,9 +124,8 @@ export const useMediasoup = createSharedComposable(() => {
       }
 
       const joinedClients = (await signaling.socket.value.emitWithAck('join', {
-        username: preferences.username.value,
         rtpCapabilities: rtpCapabilities.value,
-      })).map(transformClient)
+      }))
 
       addClient(...joinedClients)
 
@@ -135,7 +135,7 @@ export const useMediasoup = createSharedComposable(() => {
     })
 
     socket.on('newPeer', (client) => {
-      addClient(transformClient(client))
+      addClient(client)
     })
 
     socket.on('peerClosed', (id) => {
@@ -188,15 +188,25 @@ export const useMediasoup = createSharedComposable(() => {
     )
 
     socket.on('disconnect', () => {
+      device.value = undefined
+      rtpCapabilities.value = undefined
+
       sendTransport.value?.close()
       sendTransport.value = undefined
 
       recvTransport.value?.close()
       recvTransport.value = undefined
+
+      micProducer.value = undefined
+      webcamProducer.value = undefined
+      shareProducer.value = undefined
+
+      consumers.value = new Map()
+      producers.value = new Map()
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(clientId: ChadClient['id']) {
+  function getClientConsumers(clientId: ChadClient['socketId']) {
     return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
   }
 
@@ -298,27 +308,6 @@ export const useMediasoup = createSharedComposable(() => {
     signaling.connect()
   }
 
-  function transformClient(client: RemoteClient): ChadClient {
-    return {
-      ...client,
-      isMe: client.id === signaling.socket.value!.id,
-    }
-  }
-
-  function dispose() {
-    device.value = undefined
-    rtpCapabilities.value = undefined
-    sendTransport.value = undefined
-    recvTransport.value = undefined
-
-    micProducer.value = undefined
-    webcamProducer.value = undefined
-    shareProducer.value = undefined
-
-    consumers.value = new Map()
-    producers.value = new Map()
-  }
-
   return {
     init,
     consumers,

client/app/composables/use-preferences.ts

@@ -1,13 +1,10 @@
-import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import { createGlobalState } from '@vueuse/core'
 
 export const usePreferences = createGlobalState(() => {
-  const username = useLocalStorage<string>('username', '')
-
   const audioDevice = shallowRef()
   const videoDevice = shallowRef()
 
   return {
-    username,
     audioDevice,
     videoDevice,
   }

client/app/composables/use-signaling.ts

@@ -4,6 +4,7 @@ import { io } from 'socket.io-client'
 
 export const useSignaling = createSharedComposable(() => {
   const toast = useToast()
+  const { me } = useAuth()
 
   const socket = shallowRef<Socket>()
 
@@ -44,8 +45,16 @@ export const useSignaling = createSharedComposable(() => {
       toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
   }, { immediate: true })
 
+  watch(me, (me) => {
+    if (!me) {
+      socket.value?.close()
+      socket.value = undefined
+    }
+  })
+
   onScopeDispose(() => {
     socket.value?.close()
+    socket.value = undefined
   })
 
   function connect() {
@@ -53,9 +62,13 @@ export const useSignaling = createSharedComposable(() => {
       return
 
     socket.value = io('https://api.koptilnya.xyz/webrtc', {
-      // socket.value = io('http://127.0.0.1:4000/webrtc', {
+    // socket.value = io('http://localhost:4000/webrtc', {
       path: '/chad/ws',
       transports: ['websocket'],
+      withCredentials: true,
+      auth: {
+        userId: me.value!.id,
+      },
     })
   }