@@ -38,13 +38,17 @@
Я
-
+
10:35
Вы
-
- Отлично! Тоже хочу сходить.
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+ has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+ took a galley of type and scrambled it to make a type specimen book.
diff --git a/src/components/ChatToolbar.vue b/src/components/ChatToolbar.vue
new file mode 100644
index 0000000..f6d3e25
--- /dev/null
+++ b/src/components/ChatToolbar.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ChatsPane.vue b/src/components/ChatsPane.vue
new file mode 100644
index 0000000..31f259d
--- /dev/null
+++ b/src/components/ChatsPane.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/MessageData.vue b/src/components/MessageData.vue
new file mode 100644
index 0000000..7bfd2f1
--- /dev/null
+++ b/src/components/MessageData.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ avatarLetter }}
+
+
+ {{ props.text }}
+ {{ createdAt }}
+
+
+
+
+
diff --git a/src/components/MessageForm.vue b/src/components/MessageForm.vue
new file mode 100644
index 0000000..c5f3670
--- /dev/null
+++ b/src/components/MessageForm.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+ mdi-emoticon-outline
+
+
+
+
+
+
+
+ mdi-paperclip
+
+
+
+
+
+ mdi-send
+
+
+
+
+
+
diff --git a/src/components/MessageToolbar.vue b/src/components/MessageToolbar.vue
new file mode 100644
index 0000000..a799bb7
--- /dev/null
+++ b/src/components/MessageToolbar.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
+ name
+
+
+
+
diff --git a/src/components/MessagesPane.vue b/src/components/MessagesPane.vue
new file mode 100644
index 0000000..018165b
--- /dev/null
+++ b/src/components/MessagesPane.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/WebSocketComponent.vue b/src/components/WebSocketComponent.vue
index 55f52bf..971f407 100644
--- a/src/components/WebSocketComponent.vue
+++ b/src/components/WebSocketComponent.vue
@@ -5,29 +5,29 @@ import { useSharedWebSocket, WsDataType } from '../composables/useSharedWebSocke
const message = ref('')
const selectedChat = ref('')
-const { messages, chats, isConnected, error, send } = useSharedWebSocket({
+// const { messages, chats, isConnected, error, send } = useSharedWebSocket({
// onMessage: (data) => {
// console.log('Received message:', data)
// },
-})
+// })
const onChatClick = (id: string) => {
console.log(id)
selectedChat.value = id
- send({
- type: WsDataType.GET_MESSAGES,
- data: { chat_id: id },
- })
+ // send({
+ // type: WsDataType.GET_MESSAGES,
+ // data: { chat_id: id },
+ // })
}
const sendMessage = () => {
if (message.value.trim()) {
- send({
- type: WsDataType.CREATE_MESSAGE,
- data: {
- chat_id: selectedChat.value,
- text: message.value,
- },
+ // send({
+ // type: WsDataType.CREATE_MESSAGE,
+ // data: {
+ // chat_id: selectedChat.value,
+ // text: message.value,
+ // },
})
message.value = ''
}
@@ -37,29 +37,29 @@ const sendMessage = () => {
-
- status: {{ isConnected ? 'connected' : 'disconnected' }}
-
+
+
+
selected chat {{ selectedChat }}
- Error: {{ error }}
+
-
-
{{ chat.id }}
-
{{ chat.users }}
-
+
+
+
+
-
+
+
+
@@ -72,13 +72,13 @@ const sendMessage = () => {
placeholder="Type message..."
>
-
+
+
+
+
+
+
+
diff --git a/src/composables/useSharedWebSocket.ts b/src/composables/useSharedWebSocket.ts
index c66b8b2..cfdda87 100644
--- a/src/composables/useSharedWebSocket.ts
+++ b/src/composables/useSharedWebSocket.ts
@@ -44,10 +44,7 @@ export enum COMMAND {
export function useSharedWebSocket(options?: { url?: string; autoConnect?: true }) {
const url = options?.url || 'ws://localhost:3000/ws'
- const autoConnect = options?.autoConnect ?? true
-
- console.log('useSharedWebSocket', url, autoConnect)
-
+ const autoConnect = options?.autoConnect ?? false
const messages = ref([])
const chats = ref([])
const users = ref([])
@@ -55,9 +52,11 @@ export function useSharedWebSocket(options?: { url?: string; autoConnect?: true
const error = ref()
const worker = ref()
- const initWorker = () => {
+ const init = () => {
+ console.log('INIT WORKER')
+
if (!window.SharedWorker) {
- console.warn('SharedWorker not supported')
+ console.log('SharedWorker not supported')
error.value = 'SharedWorker not supported'
}
@@ -68,13 +67,10 @@ export function useSharedWebSocket(options?: { url?: string; autoConnect?: true
worker.value.port.onmessage = (event) => {
const { type, data, connected, message } = event.data
- console.log(event.data)
switch (type) {
case WsDataType.USER:
- console.log('USER')
break
case WsDataType.CHATS:
- console.log('chat')
chats.value = data
break
case WsDataType.MESSAGES:
@@ -91,16 +87,25 @@ export function useSharedWebSocket(options?: { url?: string; autoConnect?: true
break
case WsDataType.ERROR:
error.value = message
+ logout()
break
}
}
worker.value.port.postMessage({
command: COMMAND.CONNECT,
- data: { url },
+ data: { url: url, token: getToken() },
})
}
+ function logout() {
+ return localStorage.removeItem('token')
+ }
+
+ function getToken() {
+ return localStorage.getItem('token')
+ }
+
const send = (data: WsData) => {
if (worker.value) {
worker.value.port.postMessage({
@@ -117,7 +122,7 @@ export function useSharedWebSocket(options?: { url?: string; autoConnect?: true
}
onMounted(() => {
- if (autoConnect) initWorker()
+ if (autoConnect) init()
})
onUnmounted(() => {
@@ -131,6 +136,6 @@ export function useSharedWebSocket(options?: { url?: string; autoConnect?: true
error,
send,
close,
- initWorker,
+ init,
}
}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
new file mode 100644
index 0000000..9989305
--- /dev/null
+++ b/src/stores/auth.ts
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAuthStore = defineStore('auth', () => {
+ const token = ref(localStorage.getItem('token'))
+
+ async function login(email: string) {
+ try {
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ email: email }),
+ }
+ const res = await fetch('http://localhost:5173/login', options)
+ if (res.ok) {
+ const data: { accessToken: string; refreshToken: string } = await res.json()
+
+ token.value = data.accessToken
+ localStorage.setItem('token', token.value)
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+
+ return { token, login }
+})
diff --git a/src/stores/chats.ts b/src/stores/chats.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/stores/messages.ts b/src/stores/messages.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/stores/sockets.ts b/src/stores/sockets.ts
new file mode 100644
index 0000000..90a2ae1
--- /dev/null
+++ b/src/stores/sockets.ts
@@ -0,0 +1,5 @@
+import { defineStore } from 'pinia'
+
+export const useSockets = defineStore('sockets', () => {
+ return {}
+})
diff --git a/src/stores/users.ts b/src/stores/users.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
new file mode 100644
index 0000000..a9fb91a
--- /dev/null
+++ b/src/views/ChatView.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+ error:{{ error }}
+ is connected:{{ isConnected }}
+ chats {{ chats }}
+
+
+
+
+
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..deb96dc
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/workers/worker.js b/src/workers/worker.js
index 49982df..24823eb 100644
--- a/src/workers/worker.js
+++ b/src/workers/worker.js
@@ -9,7 +9,6 @@ function connectWebSocket(url) {
socket.onopen = () => {
console.log('[Shared Worker] WebSocket connected')
- reconnectAttempts = 0
broadcast({ type: 'STATUS', connected: true })
}
@@ -34,10 +33,10 @@ function connectWebSocket(url) {
socket.onerror = (error) => {
console.error('[Shared Worker] WebSocket error:', error)
- broadcast({ type: 'ERROR', message: error.message })
+ broadcast({ type: 'ERROR', message: 'error' })
}
} catch (error) {
- console.error('[Shared Worker] Failed to create WebSocket:', error)
+ console.error('[Shared Worker] Failed to create WebSocket:', error.message)
}
}
@@ -57,7 +56,8 @@ onconnect = function (event) {
switch (command) {
case 'CONNECT':
if (!socket || socket.readyState !== WebSocket.OPEN) {
- connectWebSocket(data.url)
+ console.log()
+ connectWebSocket(data.url + '?token=' + data.token)
}
break
case 'SEND':