куча говна

.gitea/workflows/deploy-client.yml

@@ -25,7 +25,9 @@ jobs:
           persist-credentials: false
 
       - name: Build
-        run: docker build -t chad-client ./client --build-arg COMMIT_SHA=${{ gitea.sha }}
+        run: docker build -t chad-client ./client \
+                --build-arg COMMIT_SHA=${{ gitea.sha }}
+                --build-arg API_BASE_URL=${{ vars.API_BASE_URL }}
 
       - name: Stop old container
         run: docker rm -f chad-client || true

client/.gitignore

@@ -29,3 +29,6 @@ logs
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+scripts/release.ps1
+.tauri

client/Dockerfile

@@ -11,7 +11,10 @@ RUN yarn install
 COPY . .
 
 ARG COMMIT_SHA=unknown
-ENV COMMIT_SHA=$COMMIT_SHA
+ARG API_BASE_URL
+
+ENV COMMIT_SHA=$COMMIT_SHA \
+    API_BASE_URL=$API_BASE_URL
 
 RUN yarn generate
 

client/app/app.vue

@@ -5,3 +5,9 @@
 
   <PrimeToast position="bottom-center" />
 </template>
+
+<script setup lang="ts">
+console.group('Build Info')
+console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
+console.groupEnd()
+</script>

client/app/components.d.ts

@@ -17,6 +17,8 @@ declare module 'vue' {
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
+    PrimePassword: typeof import('primevue/password')['default']
+    PrimeSelectButton: typeof import('primevue/selectbutton')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
     PrimeToast: typeof import('primevue/toast')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

client/app/components/ClientRow.vue

@@ -8,17 +8,17 @@
 
       <div class="flex-1">
         <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
-          {{ client.username }}
+          {{ client.displayName }}
         </div>
-        <div class="mt-1 text-xs leading-5 text-muted-color">
+        <div v-if="client.username !== client.displayName" class="mt-1 text-xs leading-5 text-muted-color">
-          {{ client.id }}
+          {{ client.username }}
         </div>
       </div>
 
-      <PrimeBadge v-if="client.isMe && inputMuted" severity="info" value="Muted" />
+      <PrimeBadge v-if="client.inputMuted" severity="info" value="Muted" />
-      <PrimeBadge v-if="client.isMe" severity="secondary" value="You" />
+      <PrimeBadge v-if="isMe" severity="secondary" value="You" />
 
-      <template v-if="!client.isMe">
+      <template v-if="!isMe">
         <PrimeButton icon="pi pi-ellipsis-h" text size="small" severity="contrast" @click="menuRef?.toggle" />
 
         <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
@@ -47,6 +47,7 @@ const props = defineProps<{
 
 const { inputMuted, outputMuted } = useApp()
 const { getClientConsumers } = useMediasoup()
+const { me } = useClients()
 
 const menuRef = useTemplateRef<HTMLAudioElement>('menu')
 
@@ -64,6 +65,10 @@ const menuItems: MenuItem[] = [
   },
 ]
 
+const isMe = computed(() => {
+  return me.value && props.client.userId === me.value.userId
+})
+
 const audioConsumer = computed(() => {
   const consumers = getClientConsumers(props.client.id)
 

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)
+      if (client && client.displayName !== updatedClient.displayName)
-        toast.add({ severity: 'info', summary: `${client?.username} is now ${updatedClient.username}`, closable: false, life: 1000 })
+        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']) {
+  function getClient(clientId: ChadClient['socketId']) {
-    return clients.value.find(client => client.id === clientId)
+    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']) {
+  function removeClient(clientId: ChadClient['socketId']) {
-    clients.value = clients.value.filter(client => client.id !== clientId)
+    clients.value = clients.value.filter(client => client.socketId !== clientId)
   }
 
-  function updateClient(clientId: ChadClient['id'], updatedClient: UpdatedClient) {
+  function updateClient(clientId: ChadClient['socketId'], updatedClient: UpdatedClient) {
-    const clientIdx = clients.value.findIndex(client => client.id === clientId)
+    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,
+      },
     })
   }
 

client/app/index.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+  interface PageMeta {
+    auth?: boolean | 'guest'
+  }
+}
+
+export {}

client/app/layouts/auth.vue

@@ -1,5 +1,40 @@
 <template>
-  <div class="w-full h-full flex justify-center items-center p-3">
+  <div class="w-full h-full flex p-3">
-    <slot />
+    <img src="/chad-bg.webp" alt="Background" draggable="false" class="pointer-events-none absolute opacity-3 -z-1 block inset-0 object-contain w-full h-full">
+
+    <div v-auto-animate class="w-1/2 m-auto">
+      <div class="text-center">
+        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
+      </div>
+
+      <slot />
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const options = computed(() => {
+  return [
+    {
+      label: 'Login',
+      routeName: 'Login',
+    },
+    {
+      label: 'Register',
+      routeName: 'Register',
+
+    },
+  ]
+})
+
+const tab = shallowRef(options.value.find(option => route.name === option.routeName))
+
+watch(tab, (tab) => {
+  if (!tab)
+    return
+
+  navigateTo({ name: tab.routeName })
+})
+</script>

client/app/layouts/default.vue

@@ -30,9 +30,8 @@
 </template>
 
 <script setup lang="ts">
-import { vAutoAnimate } from '@formkit/auto-animate'
-
 const { clients, inputMuted, toggleInput, outputMuted, toggleOutput } = useApp()
+const { connect } = useSignaling()
 
 const route = useRoute()
 
@@ -43,4 +42,6 @@ const inPreferences = computed(() => {
 function onClickPreferences() {
   navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
 }
+
+connect()
 </script>

client/app/layouts/updater.vue

@@ -0,0 +1,3 @@
+<template>
+  UPDATER
+</template>

client/app/middleware/00.updater.global.ts

@@ -0,0 +1,41 @@
+import { relaunch } from '@tauri-apps/plugin-process'
+import { check } from '@tauri-apps/plugin-updater'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (from?.name)
+    return
+
+  const update = await check()
+
+  console.log(update)
+
+  if (import.meta.dev)
+    return
+
+  if (update) {
+    console.log(
+      `found update ${update.version} from ${update.date} with notes ${update.body}`,
+    )
+    let downloaded = 0
+    let contentLength = 0
+    // alternatively we could also call update.download() and update.install() separately
+    await update.downloadAndInstall((event) => {
+      switch (event.event) {
+        case 'Started':
+          contentLength = event.data.contentLength ?? 0
+          console.log(`started downloading ${event.data.contentLength} bytes`)
+          break
+        case 'Progress':
+          downloaded += event.data.chunkLength
+          console.log(`downloaded ${downloaded} from ${contentLength}`)
+          break
+        case 'Finished':
+          console.log('download finished')
+          break
+      }
+    })
+
+    console.log('update installed')
+    await relaunch()
+  }
+})

client/app/middleware/01.auth.global.ts

@@ -0,0 +1,20 @@
+import chadApi from '#shared/chad-api'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const { me, setMe } = useAuth()
+
+  if (!me.value && !from?.name) {
+    try {
+      setMe(await chadApi('/me'))
+    }
+    catch {
+      if (to.meta.auth !== 'guest') {
+        return navigateTo({ name: 'Login' })
+      }
+    }
+  }
+
+  if (me.value && to.meta.auth === 'guest') {
+    return navigateTo('/')
+  }
+})

client/app/middleware/01.build-info.global.ts

@@ -1,5 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  console.group('Build Info')
-  console.log(`COMMIT_SHA: ${__COMMIT_SHA__}`)
-  console.groupEnd()
-})

client/app/middleware/02.auth.global.ts

@@ -1,18 +0,0 @@
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { username } = usePreferences()
-
-  if (!username.value && to.name !== 'Login') {
-    return navigateTo({ name: 'Login' })
-  }
-
-  if (!username.value)
-    return
-
-  const { init } = useMediasoup()
-
-  init()
-
-  if (to.path === 'Login') {
-    return navigateTo('/')
-  }
-})

client/app/pages/login.vue

@@ -1,13 +1,30 @@
 <template>
-  <PrimeCard class="w-2/5">
+  <PrimeCard>
     <template #content>
-      <form class="flex flex-col gap-3" @submit.prevent="submit">
+      <form @submit.prevent="submit">
-        <PrimeFloatLabel variant="on">
+        <div class="flex flex-col gap-3">
-          <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+          <PrimeFloatLabel variant="on">
-          <label for="username">Username</label>
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
-        </PrimeFloatLabel>
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
 
-        <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!localUsername" type="submit" />
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          label="Let's go"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
       </form>
     </template>
   </PrimeCard>
@@ -17,18 +34,34 @@
 definePageMeta({
   name: 'Login',
   layout: 'auth',
+  auth: 'guest',
 })
 
-const { username } = usePreferences()
+const { login } = useAuth()
 
-const localUsername = ref<typeof username.value>()
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  return true
+})
 
 async function submit() {
-  if (!localUsername.value)
+  if (!valid.value)
     return
 
-  username.value = localUsername.value
+  submitting.value = true
 
-  await navigateTo('/')
+  await login(username.value!, password.value!)
+
+  submitting.value = false
 }
 </script>

client/app/pages/preferences.vue

@@ -4,12 +4,16 @@
 
     <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
       <PrimeFloatLabel variant="on">
-        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
+        <PrimeInputText id="username" v-model="displayName" size="large" fluid autocomplete="off" />
         <label for="username">Username</label>
       </PrimeFloatLabel>
 
-      <PrimeButton label="Save" type="submit" :disabled="!localUsername || localUsername === username" />
+      <PrimeButton label="Save" type="submit" :disabled="!valid" />
     </form>
+
+    <div class="p-3">
+      <PrimeButton label="Logout" fluid severity="danger" @click="logout" />
+    </div>
   </div>
 </template>
 
@@ -18,22 +22,33 @@ definePageMeta({
   name: 'Preferences',
 })
 
+const { me, setMe, logout } = useAuth()
+
 const signaling = useSignaling()
-const { username } = usePreferences()
 const toast = useToast()
 
-const localUsername = ref(username.value)
+const displayName = ref(me.value?.displayName || '')
+
+const valid = computed(() => {
+  if (!displayName.value || !me.value)
+    return false
+
+  if (displayName.value === me.value.displayName)
+    return false
+
+  return true
+})
 
 async function save() {
-  if (!localUsername.value || localUsername.value === username.value)
+  if (!valid.value)
     return
 
-  username.value = localUsername.value
+  const updatedMe = await signaling.socket.value?.emitWithAck('updateClient', {
-
+    displayName: displayName.value,
-  await signaling.socket.value?.emitWithAck('updateClient', {
-    username: username.value,
   })
 
+  setMe({ ...me.value, displayName: updatedMe.displayName })
+
   toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
 }
 </script>

client/app/pages/register.vue

@@ -0,0 +1,74 @@
+<template>
+  <PrimeCard>
+    <template #content>
+      <form @submit.prevent="submit">
+        <div class="flex flex-col gap-3">
+          <PrimeFloatLabel variant="on">
+            <PrimeInputText id="username" v-model="username" size="large" autocomplete="off" fluid autofocus />
+            <label for="username">Username</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="password" v-model="password" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="password">Password</label>
+          </PrimeFloatLabel>
+
+          <PrimeFloatLabel variant="on">
+            <PrimePassword id="repeatPassword" v-model="repeatPassword" size="large" autocomplete="off" toggle-mask fluid :feedback="false" />
+            <label for="repeatPassword">Repeat password</label>
+          </PrimeFloatLabel>
+        </div>
+
+        <PrimeButton
+          class="mt-6"
+          size="large"
+          label="Register"
+          :loading="submitting"
+          :disabled="!valid"
+          type="submit"
+          fluid
+        />
+      </form>
+    </template>
+  </PrimeCard>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Register',
+  layout: 'auth',
+  auth: 'guest',
+})
+
+const { register } = useAuth()
+
+const submitting = ref(false)
+
+const username = ref<string>()
+const password = ref<string>()
+const repeatPassword = ref<string>()
+
+const valid = computed(() => {
+  if (!username.value)
+    return false
+
+  if (!password.value)
+    return false
+
+  if (repeatPassword.value !== password.value)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value)
+    return
+
+  submitting.value = true
+
+  await register(username.value!, password.value!)
+
+  submitting.value = false
+}
+</script>

client/nuxt.config.ts

@@ -8,6 +8,7 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/fonts',
     '@primevue/nuxt-module',
+    '@formkit/auto-animate/nuxt',
   ],
   primevue: {
     options: {
@@ -35,9 +36,16 @@ export default defineNuxtConfig({
     envPrefix: ['VITE_', 'TAURI_'],
     server: {
       strictPort: true,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:4000',
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''),
+        },
+      },
     },
     define: {
-      __COMMIT_SHA__: JSON.stringify(process.env.COMMIT_SHA || 'local'),
+      __COMMIT_SHA__: JSON.stringify(import.meta.env.COMMIT_SHA || 'local'),
     },
   },
   ignore: ['**/src-tauri/**'],

client/package.json

@@ -14,6 +14,8 @@
     "@nuxt/fonts": "^0.11.4",
     "@primeuix/themes": "^1.2.5",
     "@tailwindcss/vite": "^4.1.14",
+    "@tauri-apps/plugin-process": "~2",
+    "@tauri-apps/plugin-updater": "~2",
     "@vueuse/core": "^13.9.0",
     "mediasoup-client": "^3.16.7",
     "nuxt": "^4.1.2",

client/shared/chad-api.ts

@@ -0,0 +1,16 @@
+import { ToastEventBus } from 'primevue'
+
+const instance = $fetch.create({
+  baseURL: process.env.API_BASE_URL || '/api',
+  credentials: 'include',
+  onResponseError({ response }) {
+    if (!import.meta.client)
+      return
+
+    const message = response._data.error || 'Something went wrong'
+
+    ToastEventBus.emit('add', { severity: 'error', summary: 'Error', detail: message, closable: false, life: 3000 })
+  },
+})
+
+export default instance

client/shared/types.ts

@@ -1,12 +1,10 @@
-export interface RemoteClient {
+export interface ChadClient {
-  id: string
+  socketId: string
+  userId: string
   username: string
-}
+  displayName: string
-
-export interface ChadClient extends RemoteClient {
-  isMe: boolean
   inputMuted?: boolean
   outputMuted?: boolean
 }
 
-export type UpdatedClient = Omit<ChadClient, 'id' | 'isMe'>
+export type UpdatedClient = Omit<ChadClient, 'socketId' | 'userId' | 'isMe'>

client/src-tauri/Cargo.lock

@@ -94,7 +94,18 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-log",
+ "tauri-plugin-process",
  "tauri-plugin-single-instance",
+ "tauri-plugin-updater",
+]
+
+[[package]]
+name = "arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3d036a3c4ab069c7b410a2ce876bd74808d2d0888a82667669f8e783a898bf1"
+dependencies = [
+ "derive_arbitrary",
 ]
 
 [[package]]
@@ -795,6 +806,17 @@ dependencies = [
  "serde_core",
 ]
 
+[[package]]
+name = "derive_arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "derive_more"
 version = "0.99.20"
@@ -1064,6 +1086,18 @@ dependencies = [
  "rustc_version",
 ]
 
+[[package]]
+name = "filetime"
+version = "0.2.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc0505cd1b6fa6580283f6bdf70a73fcf4aba1184038c90902b92b3dd0df63ed"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "libredox",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "find-msvc-tools"
 version = "0.1.2"
@@ -1359,8 +1393,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "wasi 0.11.1+wasi-snapshot-preview1",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1370,9 +1406,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26145e563e54f2cadc477553f1ec5ee650b00862f0a58bcd12cbdc5f0ea2d2f4"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi",
  "wasi 0.14.7+wasi-0.2.4",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1641,6 +1679,23 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "hyper-rustls"
+version = "0.27.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+ "webpki-roots",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.17"
@@ -2031,6 +2086,7 @@ checksum = "416f7e718bdb06000964960ffa43b4335ad4012ae8b99060261aa4a8088d5ccb"
 dependencies = [
  "bitflags 2.9.4",
  "libc",
+ "redox_syscall",
 ]
 
 [[package]]
@@ -2064,6 +2120,12 @@ dependencies = [
  "value-bag",
 ]
 
+[[package]]
+name = "lru-slab"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
+
 [[package]]
 name = "mac"
 version = "0.1.1"
@@ -2122,6 +2184,12 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "minisign-verify"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e856fdd13623a2f5f2f54676a4ee49502a96a80ef4a62bcedd23d52427c44d43"
+
 [[package]]
 name = "miniz_oxide"
 version = "0.8.9"
@@ -2439,6 +2507,18 @@ dependencies = [
  "objc2-foundation 0.2.2",
 ]
 
+[[package]]
+name = "objc2-osa-kit"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26bb88504b5a050dbba515d2414607bf5e57dd56b107bc5f0351197a3e7bdc5d"
+dependencies = [
+ "bitflags 2.9.4",
+ "objc2 0.6.2",
+ "objc2-app-kit",
+ "objc2-foundation 0.3.1",
+]
+
 [[package]]
 name = "objc2-quartz-core"
 version = "0.2.2"
@@ -2533,6 +2613,20 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "osakit"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "732c71caeaa72c065bb69d7ea08717bd3f4863a4f451402fc9513e29dbd5261b"
+dependencies = [
+ "objc2 0.6.2",
+ "objc2-foundation 0.3.1",
+ "objc2-osa-kit",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.17",
+]
+
 [[package]]
 name = "pango"
 version = "0.18.3"
@@ -2923,6 +3017,61 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "quinn"
+version = "0.11.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e20a958963c291dc322d98411f541009df2ced7b5a4f2bd52337638cfccf20"
+dependencies = [
+ "bytes",
+ "cfg_aliases",
+ "pin-project-lite",
+ "quinn-proto",
+ "quinn-udp",
+ "rustc-hash",
+ "rustls",
+ "socket2",
+ "thiserror 2.0.17",
+ "tokio",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-proto"
+version = "0.11.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1906b49b0c3bc04b5fe5d86a77925ae6524a19b816ae38ce1e426255f1d8a31"
+dependencies = [
+ "bytes",
+ "getrandom 0.3.3",
+ "lru-slab",
+ "rand 0.9.2",
+ "ring",
+ "rustc-hash",
+ "rustls",
+ "rustls-pki-types",
+ "slab",
+ "thiserror 2.0.17",
+ "tinyvec",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-udp"
+version = "0.5.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "addec6a0dcad8a8d96a771f815f0eaf55f9d1805756410b39f5fa81332574cbd"
+dependencies = [
+ "cfg_aliases",
+ "libc",
+ "once_cell",
+ "socket2",
+ "tracing",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.41"
@@ -2969,6 +3118,16 @@ dependencies = [
  "rand_core 0.6.4",
 ]
 
+[[package]]
+name = "rand"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6db2770f06117d490610c7488547d543617b21bfa07796d7a12f6f1bd53850d1"
+dependencies = [
+ "rand_chacha 0.9.0",
+ "rand_core 0.9.3",
+]
+
 [[package]]
 name = "rand_chacha"
 version = "0.2.2"
@@ -2989,6 +3148,16 @@ dependencies = [
  "rand_core 0.6.4",
 ]
 
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.9.3",
+]
+
 [[package]]
 name = "rand_core"
 version = "0.5.1"
@@ -3007,6 +3176,15 @@ dependencies = [
  "getrandom 0.2.16",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99d9a13982dcf210057a8a78572b2217b667c3beacbf3a0d8b454f6f82837d38"
+dependencies = [
+ "getrandom 0.3.3",
+]
+
 [[package]]
 name = "rand_hc"
 version = "0.2.0"
@@ -3123,16 +3301,21 @@ dependencies = [
  "http-body",
  "http-body-util",
  "hyper",
+ "hyper-rustls",
  "hyper-util",
  "js-sys",
  "log",
  "percent-encoding",
  "pin-project-lite",
+ "quinn",
+ "rustls",
+ "rustls-pki-types",
  "serde",
  "serde_json",
  "serde_urlencoded",
  "sync_wrapper",
  "tokio",
+ "tokio-rustls",
  "tokio-util",
  "tower",
  "tower-http",
@@ -3142,6 +3325,21 @@ dependencies = [
  "wasm-bindgen-futures",
  "wasm-streams",
  "web-sys",
+ "webpki-roots",
+]
+
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.16",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -3195,6 +3393,12 @@ version = "0.1.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56f7d92ca342cea22a06f2121d944b4fd82af56988c270852495420f961d4ace"
 
+[[package]]
+name = "rustc-hash"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
+
 [[package]]
 name = "rustc_version"
 version = "0.4.1"
@@ -3217,6 +3421,41 @@ dependencies = [
  "windows-sys 0.61.1",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.23.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "751e04a496ca00bb97a5e043158d23d66b5aabf2e1d5aa2a0aaebb1aafe6f82c"
+dependencies = [
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "229a4a4c221013e7e1f1a043678c5cc39fe5171437c88fb47151a21e6f5b5c79"
+dependencies = [
+ "web-time",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e10b3f4191e8a80e6b43eebabfac91e5dcecebb27a71f04e820c47ec41d314bf"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -3663,6 +3902,12 @@ version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
 [[package]]
 name = "swift-rs"
 version = "1.0.7"
@@ -3786,6 +4031,17 @@ version = "1.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
 
+[[package]]
+name = "tar"
+version = "0.4.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d863878d212c87a19c1a610eb53bb01fe12951c0501cf5a0d65f724914a667a"
+dependencies = [
+ "filetime",
+ "libc",
+ "xattr",
+]
+
 [[package]]
 name = "target-lexicon"
 version = "0.12.16"
@@ -3946,6 +4202,16 @@ dependencies = [
  "time",
 ]
 
+[[package]]
+name = "tauri-plugin-process"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7461c622a5ea00eb9cd9f7a08dbd3bf79484499fd5c21aa2964677f64ca651ab"
+dependencies = [
+ "tauri",
+ "tauri-plugin",
+]
+
 [[package]]
 name = "tauri-plugin-single-instance"
 version = "2.3.4"
@@ -3961,6 +4227,38 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "tauri-plugin-updater"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27cbc31740f4d507712550694749572ec0e43bdd66992db7599b89fbfd6b167b"
+dependencies = [
+ "base64 0.22.1",
+ "dirs",
+ "flate2",
+ "futures-util",
+ "http",
+ "infer",
+ "log",
+ "minisign-verify",
+ "osakit",
+ "percent-encoding",
+ "reqwest",
+ "semver",
+ "serde",
+ "serde_json",
+ "tar",
+ "tauri",
+ "tauri-plugin",
+ "tempfile",
+ "thiserror 2.0.17",
+ "time",
+ "tokio",
+ "url",
+ "windows-sys 0.60.2",
+ "zip",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.8.0"
@@ -4200,6 +4498,16 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
+[[package]]
+name = "tokio-rustls"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-util"
 version = "0.7.16"
@@ -4489,6 +4797,12 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
 [[package]]
 name = "url"
 version = "2.5.7"
@@ -4725,6 +5039,16 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "webkit2gtk"
 version = "2.0.1"
@@ -4769,6 +5093,15 @@ dependencies = [
  "system-deps",
 ]
 
+[[package]]
+name = "webpki-roots"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32b130c0d2d49f8b6889abc456e795e82525204f27c42cf767cf0d7734e089b8"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "webview2-com"
 version = "0.38.0"
@@ -4999,6 +5332,15 @@ dependencies = [
  "windows-targets 0.42.2",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -5345,6 +5687,16 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "xattr"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32e45ad4206f6d2479085147f02bc2ef834ac85886624a23575ae137c8aa8156"
+dependencies = [
+ "libc",
+ "rustix",
+]
+
 [[package]]
 name = "yoke"
 version = "0.8.0"
@@ -5470,6 +5822,12 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
 [[package]]
 name = "zerotrie"
 version = "0.2.2"
@@ -5503,6 +5861,18 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "zip"
+version = "4.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa8cd6af31c3b31c6631b8f483848b91589021b28fffe50adada48d4f4d2ed1"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "indexmap 2.11.4",
+ "memchr",
+]
+
 [[package]]
 name = "zvariant"
 version = "5.7.0"

client/src-tauri/Cargo.toml

@@ -23,6 +23,8 @@ serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
 tauri = { version = "2.8.5", features = [] }
 tauri-plugin-log = "2"
+tauri-plugin-process = "2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2"
+tauri-plugin-updater = "2"

client/src-tauri/src/lib.rs

@@ -1,11 +1,13 @@
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
-//         .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
+        .plugin(tauri_plugin_process::init())
-//             app.get_webview_window("main")
+        .plugin(tauri_plugin_updater::Builder::new().build())
-//                .expect("no main window")
+        //         .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
-//                .set_focus();
+        //             app.get_webview_window("main")
-//         }))
+        //                .expect("no main window")
+        //                .set_focus();
+        //         }))
         .setup(|app| {
             if cfg!(debug_assertions) {
                 app.handle().plugin(

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",
@@ -30,6 +30,7 @@
     }
   },
   "bundle": {
+    "createUpdaterArtifacts": true,
     "active": true,
     "targets": ["nsis"],
     "icon": [
@@ -39,5 +40,13 @@
       "icons/icon.icns",
       "icons/icon.ico"
     ]
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDI3NDM5Q0I4MDI5M0MyRjQKUldUMHdwTUN1SnhESjBoUFpuWkJxRzFqcWJxdTY4UkNvMmUzcHFnZnJtbSs3WmJoUmhxQ3R5bWYK",
+      "endpoints": [
+        "https://git.koptilnya.xyz/opti1337/chad/releases/download/latest/latest.json"
+      ]
+    }
   }
 }

client/yarn.lock

@@ -2537,6 +2537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tauri-apps/api@npm:^2.6.0":
+  version: 2.8.0
+  resolution: "@tauri-apps/api@npm:2.8.0"
+  checksum: 10c0/fb111e4d7572372997b440ebe6879543fa8c4765151878e3fddfbfe809b18da29eed142ce83061d14a9ca6d896b3266dc8a4927c642d71cdc0b4277dc7e3aabf
+  languageName: node
+  linkType: hard
+
 "@tauri-apps/cli-darwin-arm64@npm:2.8.4":
   version: 2.8.4
   resolution: "@tauri-apps/cli-darwin-arm64@npm:2.8.4"
@@ -2658,6 +2665,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tauri-apps/plugin-process@npm:~2":
+  version: 2.3.0
+  resolution: "@tauri-apps/plugin-process@npm:2.3.0"
+  dependencies:
+    "@tauri-apps/api": "npm:^2.6.0"
+  checksum: 10c0/ef50344a7436d92278c2ef4526f72daaf3171c4d65743bbc1f7a00fa581644a8583bb8680f637a34af5c7e6a0e8722c22189290e903584fef70ed83b64b6e9c0
+  languageName: node
+  linkType: hard
+
+"@tauri-apps/plugin-updater@npm:~2":
+  version: 2.9.0
+  resolution: "@tauri-apps/plugin-updater@npm:2.9.0"
+  dependencies:
+    "@tauri-apps/api": "npm:^2.6.0"
+  checksum: 10c0/72ce83d1c241308a13b9929f0900e4d33453875877009166e3998e3e75a1003ac48c3641086b4d3230f0f18c64f475ad6c3556d1603fc641ca50dc9c18d61866
+  languageName: node
+  linkType: hard
+
 "@tybys/wasm-util@npm:^0.10.1":
   version: 0.10.1
   resolution: "@tybys/wasm-util@npm:0.10.1"
@@ -3730,6 +3755,8 @@ __metadata:
     "@primevue/nuxt-module": "npm:^4.4.0"
     "@tailwindcss/vite": "npm:^4.1.14"
     "@tauri-apps/cli": "npm:^2.8.4"
+    "@tauri-apps/plugin-process": "npm:~2"
+    "@tauri-apps/plugin-updater": "npm:~2"
     "@vueuse/core": "npm:^13.9.0"
     eslint: "npm:^9.36.0"
     eslint-plugin-format: "npm:^1.0.2"

server/auth/lucia.ts

@@ -1,7 +1,29 @@
 import { PrismaAdapter } from '@lucia-auth/adapter-prisma'
 import { Lucia } from 'lucia'
-import prisma from '../prisma/client'
+import prisma from '../prisma/client.ts'
 
-export const auth = new Lucia<object, { username: string, displayName: string }>(new PrismaAdapter(prisma.session, prisma.user))
+declare module 'lucia' {
+  interface Register {
+    Lucia: typeof Lucia
+    UserId: string
+    DatabaseUserAttributes: DatabaseUserAttributes
+  }
+}
+
+interface DatabaseUserAttributes {
+  id: string
+  displayName: string
+  username: string
+}
+
+export const auth = new Lucia(new PrismaAdapter(prisma.session, prisma.user), {
+  getUserAttributes: ({ id, displayName, username }) => {
+    return {
+      id,
+      displayName,
+      username,
+    }
+  },
+})
 
 export type Auth = typeof auth

server/package.json

@@ -4,17 +4,19 @@
     "start": "ts-node --transpile-only server.ts",
     "db:deploy": "npx prisma migrate deploy && npx prisma generate"
   },
+  "type": "module",
   "packageManager": "yarn@4.10.3",
   "dependencies": {
+    "@fastify/autoload": "^6.3.1",
+    "@fastify/cookie": "^11.0.2",
+    "@fastify/cors": "^11.1.0",
     "@lucia-auth/adapter-prisma": "^4.0.1",
     "@prisma/client": "^6.17.0",
-    "@trpc/server": "^11.6.0",
     "bcrypt": "^6.0.0",
     "consola": "^3.4.2",
-    "cookie-parser": "^1.4.7",
-    "cors": "^2.8.5",
     "dotenv": "^17.2.3",
-    "express": "^5.1.0",
+    "fastify": "^5.6.1",
+    "fastify-plugin": "^5.1.0",
     "lucia": "^3.2.2",
     "mediasoup": "^3.19.3",
     "prisma": "^6.17.0",
@@ -25,8 +27,6 @@
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
     "@types/bcrypt": "^6",
-    "@types/cookie-parser": "^1",
-    "@types/express": "^5.0.3",
     "@types/ws": "^8",
     "eslint": "^9.36.0",
     "ts-node": "^10.9.2",

server/plugins/auth.ts

@@ -0,0 +1,40 @@
+import type { Session, User } from 'lucia'
+import fp from 'fastify-plugin'
+import { auth } from '../auth/lucia.ts'
+
+declare module 'fastify' {
+  interface FastifyRequest {
+    user: User | null
+    session: Session | null
+  }
+}
+
+export default fp(async (fastify) => {
+  fastify.decorateRequest('user', null)
+  fastify.decorateRequest('session', null)
+
+  fastify.addHook('preHandler', async (req, reply) => {
+    try {
+      const sessionId = auth.readSessionCookie(req.headers.cookie ?? '')
+
+      const { session, user } = await auth.validateSession(sessionId ?? '')
+
+      if (session && session.fresh) {
+        const cookie = auth.createSessionCookie(session.id)
+        reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+      }
+
+      if (!session) {
+        const blank = auth.createBlankSessionCookie()
+        reply.setCookie(blank.name, blank.value, blank.attributes)
+      }
+
+      req.user = user
+      req.session = session
+    }
+    catch {
+      req.user = null
+      req.session = null
+    }
+  })
+})

server/plugins/mediasoup-router.ts

@@ -0,0 +1,29 @@
+import type * as mediasoup from 'mediasoup'
+import fp from 'fastify-plugin'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    mediasoupRouter: mediasoup.types.Router
+  }
+}
+
+export default fp<mediasoup.types.RouterOptions>(
+  async (fastify, opts) => {
+    const router = await fastify.mediasoupWorker.createRouter(opts)
+
+    fastify.decorate('mediasoupRouter', router)
+  },
+  { name: 'mediasoup-router', dependencies: ['mediasoup-worker'] },
+)
+
+export const autoConfig: mediasoup.types.RouterOptions = {
+  mediaCodecs: [
+    {
+      kind: 'audio',
+      mimeType: 'audio/opus',
+      clockRate: 48000,
+      channels: 2,
+      parameters: { useinbandfec: 1, stereo: 1 },
+    },
+  ],
+}

server/plugins/mediasoup-worker.ts

@@ -0,0 +1,23 @@
+import { consola } from 'consola'
+import fp from 'fastify-plugin'
+import * as mediasoup from 'mediasoup'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    mediasoupWorker: mediasoup.types.Worker
+  }
+}
+
+export default fp(
+  async (fastify) => {
+    const worker = await mediasoup.createWorker()
+    worker.on('died', () => {
+      consola.error('[Mediasoup]', 'Worker died, exiting...')
+
+      process.exit(1)
+    })
+
+    fastify.decorate('mediasoupWorker', worker)
+  },
+  { name: 'mediasoup-worker' },
+)

server/plugins/socket.ts

@@ -0,0 +1,39 @@
+import type { FastifyInstance } from 'fastify'
+import type { ServerOptions } from 'socket.io'
+import fp from 'fastify-plugin'
+import { Server } from 'socket.io'
+import registerWebrtcSocket from '../socket/webrtc.ts'
+
+declare module 'fastify' {
+  interface FastifyInstance {
+    io: Server
+  }
+}
+
+export default fp<Partial<ServerOptions>>(
+  async (fastify, opts) => {
+    fastify.decorate('io', new Server(fastify.server, opts))
+
+    fastify.addHook('preClose', () => {
+      fastify.io.disconnectSockets(true)
+    })
+
+    fastify.addHook('onClose', async (fastify: FastifyInstance) => {
+      await fastify.io.close()
+    })
+
+    fastify.ready(() => {
+      registerWebrtcSocket(fastify.io, fastify.mediasoupRouter)
+    })
+  },
+  { name: 'socket-io', dependencies: ['mediasoup-worker', 'mediasoup-router'] },
+)
+
+export const autoConfig: Partial<ServerOptions> = {
+  path: '/chad/ws',
+  cors: {
+    origin: process.env.CORS_ORIGIN || '*',
+    methods: ['GET', 'POST'],
+    credentials: true,
+  },
+}

server/prisma/client.ts

@@ -1,7 +1,7 @@
 import { PrismaClient } from '@prisma/client'
 
-const instance = new PrismaClient({
+const client = new PrismaClient({
   log: ['query', 'error', 'warn'],
 })
 
-export default instance
+export default client

server/prisma/schema.prisma

@@ -5,6 +5,7 @@ datasource db {
 
 generator client {
   provider = "prisma-client-js"
+  // output   = "./generated/client"
 }
 
 model User {

server/routes/auth.ts

@@ -0,0 +1,120 @@
+import type { FastifyInstance } from 'fastify'
+import bcrypt from 'bcrypt'
+import { z } from 'zod'
+import { auth } from '../auth/lucia.ts'
+import prisma from '../prisma/client.ts'
+
+export default function (fastify: FastifyInstance) {
+  fastify.post('/register', async (req, reply) => {
+    try {
+      const schema = z.object({
+        username: z.string().min(1),
+        password: z.string().min(6),
+      })
+      const input = schema.parse(req.body)
+
+      const hashed = await bcrypt.hash(input.password, 10)
+      const user = await prisma.user.create({
+        data: {
+          username: input.username,
+          password: hashed,
+          displayName: input.username,
+        },
+      })
+
+      const session = await auth.createSession(user.id, {})
+      const cookie = auth.createSessionCookie(session.id)
+
+      reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+
+      return {
+        id: user.id,
+        username: user.username,
+        displayName: user.displayName,
+      }
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400)
+
+      if (err instanceof z.ZodError) {
+        reply.send({ error: z.prettifyError(err) })
+      }
+      else {
+        reply.send({ error: err.message })
+      }
+    }
+  })
+
+  fastify.post('/login', async (req, reply) => {
+    try {
+      const schema = z.object({
+        username: z.string().min(1),
+        password: z.string(),
+      })
+      const input = schema.parse(req.body)
+
+      const user = await prisma.user.findFirst({
+        where: { username: input.username },
+      })
+
+      if (!user) {
+        return reply.code(404).send({ error: 'Incorrect username or password' })
+      }
+
+      const validPassword = await bcrypt.compare(input.password, user.password)
+      if (!validPassword) {
+        return reply.code(404).send({ error: 'Incorrect username or password' })
+      }
+
+      const session = await auth.createSession(user.id, {})
+      const cookie = auth.createSessionCookie(session.id)
+
+      cookie.attributes.secure = false
+
+      reply.setCookie(cookie.name, cookie.value, cookie.attributes)
+
+      return {
+        id: user.id,
+        username: user.username,
+        displayName: user.displayName,
+      }
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400)
+
+      if (err instanceof z.ZodError) {
+        reply.send({ error: z.prettifyError(err) })
+      }
+      else {
+        reply.send({ error: err.message })
+      }
+    }
+  })
+
+  fastify.get('/me', async (req, reply) => {
+    if (req.user) {
+      return req.user
+    }
+
+    reply.code(401).send(false)
+  })
+
+  fastify.post('/logout', async (req, reply) => {
+    try {
+      if (req.session)
+        await auth.invalidateSession(req.session.id)
+
+      const blank = auth.createBlankSessionCookie()
+
+      reply.setCookie(blank.name, blank.value, blank.attributes)
+
+      return true
+    }
+    catch (err) {
+      fastify.log.error(err)
+      reply.code(400).send({ error: err.message })
+    }
+  })
+}

server/server.ts

@@ -1,61 +1,41 @@
-import { createServer as createHttpServer } from 'node:http'
+import { dirname, join } from 'node:path'
-import { createExpressMiddleware } from '@trpc/server/adapters/express'
+import { fileURLToPath } from 'node:url'
-import { consola } from 'consola'
+import FastifyAutoLoad from '@fastify/autoload'
-import cookieParser from 'cookie-parser'
+import FastifyCookie from '@fastify/cookie'
-import cors from 'cors'
+import FastifyCors from '@fastify/cors'
-import express from 'express'
+import Fastify from 'fastify'
-import * as mediasoup from 'mediasoup'
+import prisma from './prisma/client.ts'
-import { Server as SocketServer } from 'socket.io'
-import { createContext } from './trpc/context'
-import { appRouter } from './trpc/routers'
-import webrtcSocket from './webrtc/socket'
 
-(async () => {
+const __filename = fileURLToPath(import.meta.url)
-  const app = express()
+const __dirname = dirname(__filename)
 
-  app.use(cors())
+const fastify = Fastify({
-  app.use(cookieParser())
+  logger: true,
-  app.use(express.json())
+})
 
-  app.use(
+fastify.register(FastifyCors)
-    '/chad/trpc',
-    createExpressMiddleware({
-      router: appRouter,
-      createContext,
-    }),
-  )
 
-  const server = createHttpServer(app)
+fastify.register(FastifyCookie)
 
-  const worker = await mediasoup.createWorker()
+fastify.register(FastifyAutoLoad, {
-  worker.on('died', () => {
+  dir: join(__dirname, 'plugins'),
-    consola.error('[Mediasoup]', 'Worker died, exiting...')
+})
 
+fastify.register(FastifyAutoLoad, {
+  dir: join(__dirname, 'routes'),
+})
+
+;(async () => {
+  const port = process.env.PORT ? Number(process.env.PORT) : 4000
+
+  try {
+    await fastify.listen({ port })
+
+    await prisma.$connect()
+    fastify.log.info('Testing DB Connection. OK')
+  }
+  catch (err) {
+    fastify.log.error(err)
     process.exit(1)
-  })
+  }
-
-  const router = await worker.createRouter({
-    mediaCodecs: [
-      {
-        kind: 'audio',
-        mimeType: 'audio/opus',
-        clockRate: 48000,
-        channels: 2,
-        parameters: { useinbandfec: 1, stereo: 1 },
-      },
-    ],
-  })
-
-  const io = new SocketServer(server, {
-    path: '/chad/ws',
-    cors: {
-      origin: process.env.CORS_ORIGIN || '*',
-    },
-  })
-
-  webrtcSocket(io, router)
-
-  server.listen(process.env.PORT || 4000, () => {
-    console.log('✅ Server running')
-  })
 })()

server/socket/webrtc.ts

@@ -1,10 +1,14 @@
+import type { User } from '@prisma/client'
 import type { types } from 'mediasoup'
 import type { Namespace, RemoteSocket, Socket, Server as SocketServer } from 'socket.io'
 import { consola } from 'consola'
+import prisma from '../prisma/client.ts'
 
 interface ChadClient {
-  id: string
+  socketId: string
-  username: string
+  userId: User['id']
+  username: User['username']
+  displayName: User['displayName']
   inputMuted: boolean
   outputMuted: boolean
 }
@@ -27,10 +31,9 @@ type EventCallback<T = SuccessCallbackResult> = (result: T | ErrorCallbackResult
 interface ClientToServerEvents {
   join: (
     options: {
-      username: string
       rtpCapabilities: types.RtpCapabilities
     },
-    cb: EventCallback<{ id: string, username: string }[]>
+    cb: EventCallback<ChadClient[]>
   ) => void
   getRtpCapabilities: (
     cb: EventCallback<types.RtpCapabilities>
@@ -88,12 +91,13 @@ interface ClientToServerEvents {
     cb: EventCallback
   ) => void
   updateClient: (
-    options: Partial<Omit<ChadClient, 'id'>>,
+    options: Partial<Omit<ChadClient, 'socketId' | 'userId'>>,
-    cb: EventCallback
+    cb: EventCallback<ChadClient>
   ) => void
 }
 
 interface ServerToClientEvents {
+  authenticated: () => void
   newPeer: (arg: ChadClient) => void
   producers: (arg: ProducerShort[]) => void
   newConsumer: (
@@ -114,14 +118,16 @@ interface ServerToClientEvents {
   consumerPaused: (arg: { consumerId: string }) => void
   consumerResumed: (arg: { consumerId: string }) => void
   consumerScore: (arg: { consumerId: string, score: types.ConsumerScore }) => void
-  clientChanged: (clientId: ChadClient['id'], client: ChadClient) => void
+  clientChanged: (clientId: ChadClient['socketId'], client: ChadClient) => void
 }
 
 interface InterServerEvent {}
 
 interface SocketData {
   joined: boolean
-  username: string
+  userId: User['id']
+  username: User['username']
+  displayName: User['displayName']
   inputMuted: boolean
   outputMuted: boolean
   rtpCapabilities: types.RtpCapabilities
@@ -130,6 +136,8 @@ interface SocketData {
   consumers: Map<types.Consumer['id'], types.Consumer>
 }
 
+type SomeSocket = Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> | RemoteSocket<ServerToClientEvents, SocketData>
+
 export default function (io: SocketServer, router: types.Router) {
   const namespace: Namespace<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData> = io.of('/webrtc')
 
@@ -138,7 +146,6 @@ export default function (io: SocketServer, router: types.Router) {
 
     socket.data.joined = false
 
-    socket.data.username = socket.id
     socket.data.inputMuted = false
     socket.data.outputMuted = false
 
@@ -146,24 +153,35 @@ export default function (io: SocketServer, router: types.Router) {
     socket.data.producers = new Map()
     socket.data.consumers = new Map()
 
-    socket.on('join', async ({ username, rtpCapabilities }, cb) => {
+    prisma.user.findUnique({
+      where: {
+        id: socket.handshake.auth.userId,
+      },
+      select: {
+        id: true,
+        username: true,
+        displayName: true,
+      },
+    }).then(({ id, username, displayName }) => {
+      socket.data.userId = id
+      socket.data.username = username
+      socket.data.displayName = displayName
+
+      socket.emit('authenticated')
+    })
+
+    socket.on('join', async ({ rtpCapabilities }, cb) => {
       if (socket.data.joined) {
         consola.error('[WebRtc]', 'Already joined')
         cb({ error: 'Already joined' })
       }
 
       socket.data.joined = true
-      socket.data.username = username
       socket.data.rtpCapabilities = rtpCapabilities
 
       const joinedSockets = await getJoinedSockets()
 
-      cb(joinedSockets.map((s) => {
+      cb(joinedSockets.map(socketToClient))
-        return {
-          id: s.id,
-          username: s.data.username,
-        }
-      }))
 
       for (const joinedSocket of joinedSockets.filter(joinedSocket => joinedSocket.id !== socket.id)) {
         for (const producer of joinedSocket.data.producers.values()) {
@@ -417,9 +435,18 @@ export default function (io: SocketServer, router: types.Router) {
       cb({ ok: true })
     })
 
-    socket.on('updateClient', (updatedClient, cb) => {
+    socket.on('updateClient', async (updatedClient, cb) => {
-      if (updatedClient.username) {
+      if (updatedClient.displayName) {
-        socket.data.username = updatedClient.username
+        await prisma.user.update({
+          where: {
+            id: socket.data.userId,
+          },
+          data: {
+            displayName: updatedClient.displayName,
+          },
+        })
+
+        socket.data.displayName = updatedClient.displayName
       }
 
       if (updatedClient.inputMuted) {
@@ -430,7 +457,7 @@ export default function (io: SocketServer, router: types.Router) {
         socket.data.outputMuted = updatedClient.outputMuted
       }
 
-      cb({ ok: true })
+      cb(socketToClient(socket))
 
       namespace.emit('clientChanged', socket.id, socketToClient(socket))
     })
@@ -455,8 +482,8 @@ export default function (io: SocketServer, router: types.Router) {
   }
 
   async function createConsumer(
-    consumerSocket: Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData>,
+    consumerSocket: SomeSocket,
-    producerSocket: RemoteSocket<ServerToClientEvents, SocketData>,
+    producerSocket: SomeSocket,
     producer: types.Producer,
   ) {
     if (
@@ -554,10 +581,12 @@ export default function (io: SocketServer, router: types.Router) {
     }
   }
 
-  function socketToClient(socket: Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvent, SocketData>): ChadClient {
+  function socketToClient(socket: SomeSocket): ChadClient {
     return {
-      id: socket.id,
+      socketId: socket.id,
+      userId: socket.data.userId,
       username: socket.data.username,
+      displayName: socket.data.displayName,
       inputMuted: socket.data.inputMuted,
       outputMuted: socket.data.outputMuted,
     }

server/trpc/context.ts

@@ -1,23 +0,0 @@
-import type { CreateExpressContextOptions } from '@trpc/server/adapters/express'
-import { auth } from '../auth/lucia'
-
-export async function createContext({ res, req }: CreateExpressContextOptions) {
-  const sessionId = auth.readSessionCookie(req.headers.cookie ?? '')
-
-  if (!sessionId)
-    return { res, req }
-
-  const { session, user } = await auth.validateSession(sessionId)
-
-  if (session && session.fresh) {
-    res.appendHeader('Set-Cookie', auth.createSessionCookie(session.id).serialize())
-  }
-
-  if (!session) {
-    res.appendHeader('Set-Cookie', auth.createBlankSessionCookie().serialize())
-  }
-
-  return { res, req, session, user }
-}
-
-export type Context = Awaited<ReturnType<typeof createContext>>

server/trpc/router.ts

@@ -1,15 +0,0 @@
-import type { Context } from './context'
-import { initTRPC } from '@trpc/server'
-
-const t = initTRPC.context<Context>().create()
-
-export const router = t.router
-
-export const publicProcedure = t.procedure
-
-export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
-  if (!ctx.session?.fresh)
-    throw new Error('UNAUTHORIZED')
-
-  return next({ ctx: { ...ctx } })
-})

server/trpc/routers/auth.ts

@@ -1,74 +0,0 @@
-import { TRPCError } from '@trpc/server'
-import bcrypt from 'bcrypt'
-import { z } from 'zod'
-import { auth } from '../../auth/lucia'
-import client from '../../prisma/client'
-import { protectedProcedure, publicProcedure, router } from '../router'
-
-export const authRouter = router({
-  register: publicProcedure
-    .input(z.object({ username: z.string().min(1), password: z.string().min(6) }))
-    .mutation(async ({ input, ctx }) => {
-      const hashed = await bcrypt.hash(input.password, 10)
-      const user = await client.user.create({
-        data: {
-          username: input.username,
-          password: hashed,
-          displayName: input.username,
-        },
-      })
-
-      const session = await auth.createSession(user.id, {})
-      const cookie = auth.createSessionCookie(session.id)
-
-      ctx.res.setHeader('Set-Cookie', cookie.serialize())
-
-      return { user }
-    }),
-
-  login: publicProcedure
-    .input(z.object({ username: z.string().min(1), password: z.string() }))
-    .mutation(async ({ input, ctx }) => {
-      const user = await client.user.findFirst({
-        where: {
-          username: input.username,
-        },
-      })
-
-      if (!user) {
-        throw new TRPCError({
-          code: 'NOT_FOUND',
-          message: 'Incorrect username or password',
-        })
-      }
-
-      const validPassword = await bcrypt.compare(input.password, user.password)
-
-      if (!validPassword) {
-        throw new TRPCError({
-          code: 'NOT_FOUND',
-          message: 'Incorrect username or password',
-        })
-      }
-
-      const session = await auth.createSession(user.id, {})
-      const cookie = auth.createSessionCookie(session.id)
-
-      ctx.res.setHeader('Set-Cookie', cookie.serialize())
-
-      return { user }
-    }),
-
-  me: protectedProcedure.query(({ ctx }) => {
-    return ctx.user
-  }),
-
-  logout: publicProcedure.mutation(async ({ ctx }) => {
-    if (ctx.session)
-      await auth.invalidateSession(ctx.session.id)
-
-    ctx.res.setHeader('Set-Cookie', auth.createBlankSessionCookie().serialize())
-
-    return true
-  }),
-})

server/trpc/routers/index.ts

@@ -1,10 +0,0 @@
-import { router } from '../router'
-import { authRouter } from './auth'
-// import { webrtcRouter } from './webrtc'
-
-export const appRouter = router({
-  auth: authRouter,
-  // webrtc: webrtcRouter,
-})
-
-export type AppRouter = typeof appRouter

server/tsconfig.json

@@ -1,10 +1,12 @@
 {
   "compilerOptions": {
     "target": "es2016",
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "nodenext",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true
   }
 }