wip

src/stores/auth.ts

@@ -1,8 +1,11 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import type { WsData } from '@/composables/useSharedWebSocket.ts'
+import type { User } from '@/stores/users.ts'
 
 export const useAuthStore = defineStore('auth', () => {
   const token = ref(localStorage.getItem('token'))
+  const me = ref<User>()
 
   async function login(email: string) {
     try {
@@ -25,5 +28,16 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
-  return { token, login }
+  const isAuth = computed(() => !!token.value)
+
+  function getToken() {
+    return localStorage.getItem('token')
+  }
+
+  function logout() {
+    token.value = ''
+    return localStorage.removeItem('token')
+  }
+
+  return { me, token, isAuth, login, logout, getToken }
 })

src/stores/chats.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { User } from '@/stores/users.ts'
+
+export interface Chat {
+  id: string
+  type_id: number
+  name: string
+  users: User[]
+}
+
+export const useChatsStore = defineStore('chats', () => {
+  const chats = ref<Chat[]>([])
+  const selected = ref<string>()
+
+  return { chats, selected }
+})

src/stores/messages.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface Message {
+  id: number
+  text: string
+  user_id: number
+  created_at: string
+}
+
+export const useMessagesStore = defineStore('messages', () => {
+  const messages = ref<Message[]>([])
+
+  return { messages }
+})

src/stores/sockets.ts

@@ -1,5 +1,122 @@
 import { defineStore } from 'pinia'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { type Chat, useChatsStore } from '@/stores/chats.ts'
+import { useAuthStore } from '@/stores/auth.ts'
+import { type Message, useMessagesStore } from '@/stores/messages.ts'
 
-export const useSockets = defineStore('sockets', () => {
-  return {}
+export enum SocketDataReq {
+  GET_CHATS = 'GET_CHATS',
+  CREATE_CHAT = 'CREATE_CHAT',
+  GET_USERS = 'GET_USERS',
+  GET_USER = 'GET_USER',
+  GET_MESSAGES = 'GET_MESSAGES',
+  CREATE_MESSAGE = 'CREATE_MESSAGE',
+}
+
+export enum SocketDataRes {
+  USERS = 'USERS',
+  CHATS = 'CHATS',
+  MESSAGES = 'MESSAGES',
+  MESSAGE = 'MESSAGE',
+  USER = 'USER',
+  STATUS = 'STATUS',
+  ERROR = 'ERROR',
+}
+
+export enum COMMAND {
+  CONNECT = 'CONNECT',
+  SEND = 'SEND',
+  CLOSE = 'CLOSE',
+}
+
+export const useSocketsStore = defineStore('sockets', () => {
+  const url = 'ws://localhost:3000/ws'
+
+  const authStore = useAuthStore()
+  const chatsStore = useChatsStore()
+  const messagesStore = useMessagesStore()
+
+  const isConnected = ref(false)
+  const error = ref<string>()
+  const worker = ref<SharedWorker>()
+
+  function init() {
+    console.log('INIT SHARED WORKER')
+
+    if (!window.SharedWorker) {
+      console.log('SharedWorker not supported')
+      error.value = 'SharedWorker not supported'
+    }
+
+    worker.value = new SharedWorker(new URL('@/workers/worker.js', import.meta.url), {
+      type: 'module',
+    })
+
+    worker.value.port.onmessage = (event) => {
+      const { type, data, connected, message } = event.data
+
+      switch (type) {
+        case SocketDataRes.USERS:
+          console.log('USERS_LIST', data)
+          break
+        case SocketDataRes.USER:
+          console.log('USER', data)
+          authStore.me = data
+          break
+        case SocketDataRes.CHATS:
+          console.log('CHATS', data)
+          chatsStore.chats = data
+          break
+        case SocketDataRes.MESSAGES:
+          console.log('MESSAGES', data)
+
+          messagesStore.messages = data.reverse()
+          // if (options.onMessage) {
+          //   options.onMessage(data)
+          // }
+          break
+        case SocketDataRes.MESSAGE:
+          console.log('MESSAGE', data)
+          messagesStore.messages.push(data)
+          break
+        case SocketDataRes.STATUS:
+          isConnected.value = connected
+          break
+        case SocketDataRes.ERROR:
+          error.value = message
+          authStore.logout()
+          break
+      }
+    }
+
+    connect()
+  }
+
+  function postMessage(command: COMMAND, data?: unknown) {
+    if (worker.value) worker.value.port.postMessage({ command, data })
+  }
+
+  function connect() {
+    postMessage(COMMAND.CONNECT, { url: url, token: authStore.getToken() })
+  }
+
+  const send = (data: unknown) => {
+    postMessage(COMMAND.SEND, data)
+  }
+
+  const close = () => {
+    postMessage(COMMAND.CLOSE)
+  }
+
+  onUnmounted(() => {
+    if (worker.value) close()
+  })
+
+  return {
+    isConnected,
+    error,
+    send,
+    close,
+    init,
+  }
 })

src/stores/users.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface User {
+  id: number
+  email: string
+  name: string
+}
+
+export const useUsersStore = defineStore('users', () => {
+  const users = ref<User[]>([])
+
+  return { users }
+})