uniknow/chat_front_svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

почти рабочий websocket. тест

Browse source
This commit is contained in:
uniknow 2024-06-06 16:14:11 +04:00
parent 68374a8890
commit 3522ee8e5c
9 changed files with 394 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
package-lock.json generated
View file

@ -11,12 +11,13 @@
"@sveltestrap/sveltestrap": "^6.2.4", "@sveltestrap/sveltestrap": "^6.2.4",
"@themesberg/flowbite": "^1.3.0", "@themesberg/flowbite": "^1.3.0",
"sass": "^1.70.0", "sass": "^1.70.0",
"socket.io": "^4.7.4", "socket.io": "^4.7.5",
"socket.io-client": "^4.7.4", "socket.io-client": "^4.7.5",
"sockjs-client": "^1.6.1",
"svelte-routing": "^2.12.0", "svelte-routing": "^2.12.0",
"svelte-select": "^5.8.3", "svelte-select": "^5.8.3",
"websocket": "^1.0.34", "websocket": "^1.0.34",
"ws": "^8.16.0" "ws": "^8.17.0"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-auto": "^3.0.0",
@ -24,6 +25,7 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/node": "^20.11.16", "@types/node": "^20.11.16",
"@types/websocket": "^1.0.10", "@types/websocket": "^1.0.10",
"@types/ws": "^8.5.10",
"autoprefixer": "^10.4.17", "autoprefixer": "^10.4.17",
"flowbite": "^2.2.1", "flowbite": "^2.2.1",
"flowbite-svelte": "^0.44.22", "flowbite-svelte": "^0.44.22",
@ -1147,6 +1149,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@yr/monotone-cubic-spline": { "node_modules/@yr/monotone-cubic-spline": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
@ -1924,6 +1935,14 @@
"es5-ext": "~0.10.14" "es5-ext": "~0.10.14"
} }
}, },
"node_modules/eventsource": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/ext": { "node_modules/ext": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz", "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
@ -1962,6 +1981,17 @@
"reusify": "^1.0.4" "reusify": "^1.0.4"
} }
}, },
"node_modules/faye-websocket": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
"integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
"dependencies": {
"websocket-driver": ">=0.5.1"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -2120,6 +2150,11 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/http-parser-js": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
"integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
},
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.3.5", "version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@ -2148,8 +2183,7 @@
"node_modules/inherits": { "node_modules/inherits": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
"dev": true
}, },
"node_modules/is-binary-path": { "node_modules/is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
@ -2859,6 +2893,11 @@
} }
} }
}, },
"node_modules/querystringify": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
},
"node_modules/queue-microtask": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -2905,6 +2944,11 @@
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"dev": true "dev": true
}, },
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.8", "version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -3014,6 +3058,25 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/safer-buffer": { "node_modules/safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@ -3135,9 +3198,9 @@
} }
}, },
"node_modules/socket.io": { "node_modules/socket.io": {
"version": "4.7.4", "version": "4.7.5",
"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.4.tgz", "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.5.tgz",
"integrity": "sha512-DcotgfP1Zg9iP/dH9zvAQcWrE0TtbMVwXmlV4T4mqsvY+gw+LqUGPfx2AoVyRk0FLME+GQhufDMyacFmw7ksqw==", "integrity": "sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==",
"dependencies": { "dependencies": {
"accepts": "~1.3.4", "accepts": "~1.3.4",
"base64id": "~2.0.0", "base64id": "~2.0.0",
@ -3180,9 +3243,9 @@
} }
}, },
"node_modules/socket.io-client": { "node_modules/socket.io-client": {
"version": "4.7.4", "version": "4.7.5",
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.4.tgz", "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
"integrity": "sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==", "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
"dependencies": { "dependencies": {
"@socket.io/component-emitter": "~3.1.0", "@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.2", "debug": "~4.3.2",
@ -3205,6 +3268,32 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/sockjs-client": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
"integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
"dependencies": {
"debug": "^3.2.7",
"eventsource": "^2.0.2",
"faye-websocket": "^0.11.4",
"inherits": "^2.0.4",
"url-parse": "^1.5.10"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://tidelift.com/funding/github/npm/sockjs-client"
}
},
"node_modules/sockjs-client/node_modules/debug": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"dependencies": {
"ms": "^2.1.1"
}
},
"node_modules/sorcery": { "node_modules/sorcery": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz", "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
@ -3914,6 +4003,15 @@
"browserslist": ">= 4.21.0" "browserslist": ">= 4.21.0"
} }
}, },
"node_modules/url-parse": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
"dependencies": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"
}
},
"node_modules/utf-8-validate": { "node_modules/utf-8-validate": {
"version": "5.0.10", "version": "5.0.10",
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz", "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
@ -4025,6 +4123,27 @@
"node": ">=4.0.0" "node": ">=4.0.0"
} }
}, },
"node_modules/websocket-driver": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
"integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
"dependencies": {
"http-parser-js": ">=0.5.1",
"safe-buffer": ">=5.1.0",
"websocket-extensions": ">=0.1.1"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/websocket-extensions": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/websocket/node_modules/debug": { "node_modules/websocket/node_modules/debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@ -4151,9 +4270,9 @@
"dev": true "dev": true
}, },
"node_modules/ws": { "node_modules/ws": {
"version": "8.16.0", "version": "8.17.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
"engines": { "engines": {
"node": ">=10.0.0" "node": ">=10.0.0"
}, },

8
package.json
View file

@ -16,6 +16,7 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/node": "^20.11.16", "@types/node": "^20.11.16",
"@types/websocket": "^1.0.10", "@types/websocket": "^1.0.10",
"@types/ws": "^8.5.10",
"autoprefixer": "^10.4.17", "autoprefixer": "^10.4.17",
"flowbite": "^2.2.1", "flowbite": "^2.2.1",
"flowbite-svelte": "^0.44.22", "flowbite-svelte": "^0.44.22",
@ -36,11 +37,12 @@
"@sveltestrap/sveltestrap": "^6.2.4", "@sveltestrap/sveltestrap": "^6.2.4",
"@themesberg/flowbite": "^1.3.0", "@themesberg/flowbite": "^1.3.0",
"sass": "^1.70.0", "sass": "^1.70.0",
"socket.io": "^4.7.4", "socket.io": "^4.7.5",
"socket.io-client": "^4.7.4", "socket.io-client": "^4.7.5",
"sockjs-client": "^1.6.1",
"svelte-routing": "^2.12.0", "svelte-routing": "^2.12.0",
"svelte-select": "^5.8.3", "svelte-select": "^5.8.3",
"websocket": "^1.0.34", "websocket": "^1.0.34",
"ws": "^8.16.0" "ws": "^8.17.0"
} }
} }

72
src/lib/chat.js
View file

@ -1,13 +1,18 @@
export async function getLastMessages(chatId,msgLoaded){ export async function getLastMessages(chatId,msgLoaded){
const response = await fetch(`http://localhost:8000/api/chat/get_some_messages/${chatId}?messages_loaded=${msgLoaded}&messages_to_get=15`, let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/api/chat/get_some_messages/${chatId}?messages_loaded=${msgLoaded}&messages_to_get=15`,
{ {
method:'GET', method:'GET',
credentials:'include' credentials:'include',
headers: {'accept': 'application/json',
'Authorization': token,
},
}) })
if(response.ok){ if(response.ok){
let msgMassive = await response.json(); let msgMassive = await response.json();
msgMassive = msgMassive.messages
let localTime let localTime
for(let i = 0; i < msgMassive.length; i++){ for(let i = 0; i < msgMassive.length; i++){
localTime = new Date(msgMassive[i].created_at) localTime = new Date(msgMassive[i].created_at)
@ -37,9 +42,12 @@
export async function getMessageById(chatId,msgId){ export async function getMessageById(chatId,msgId){
const response = await fetch(`http://localhost:8000/api/chat/message/${chatId}?message_id=${msgId}`,{ let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/chat/message/${chatId}?message_id=${msgId}`,{
method:"GET", method:"GET",
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(response.ok){ if(response.ok){
@ -54,22 +62,24 @@
export async function MessagePicToUrl(messagePic){ export async function MessagePicToUrl(messagePic){
console.log(messagePic) let token = localStorage.getItem('BPChat')
const DataForm = new FormData(); const DataForm = new FormData();
DataForm.append('file', messagePic) DataForm.append('file', messagePic)
const respone = await fetch('http://localhost:8000/api/images/upload_image', const response = await fetch('https://docs.black-phoenix.ru/api/images/upload_image',
{ {
method:"POST", method:"POST",
body:DataForm body:DataForm,
headers: {'Authorization': token },
}) })
if(!respone.ok) if(!response.ok)
console.log("ошибка", respone.status) console.log("ошибка", response.status)
if(respone.ok){ if(response.ok){
const data = await respone.json(); const data = await response.json();
console.log("картинка принята") console.log("картинка принята")
return data.image_url; return data.image_url;
@ -78,28 +88,35 @@
export async function getAllChats(){ export async function getAllChats(){
const response = await fetch(`http://localhost:8000/api/chat`, let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/api/chat`,
{ {
method:"GET", method:"GET",
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(response.ok){ if(response.ok){
return await response.json(); let data = await response.json();
return data.allowed_chats
} }
else{ else{
console.log(response.status) console.log(response, "ты еблан")
} }
} }
export async function getPinnedMsg(ID){ export async function getPinnedMsg(ID){
const response = await fetch(`http://localhost:8000/api/chat/pinned_messages/${ID}`,{ let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/api/chat/pinned_messages/${ID}`,{
method:"GET", method:"GET",
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(response.ok){ if(response.ok){
return await response.json(); const data = await response.json()
return data.pinned_messages
} }
else{ else{
console.log(response.status) console.log(response.status)
@ -108,12 +125,15 @@
export async function pinMessage(chatId,messageId){ export async function pinMessage(chatId,messageId){
const response = await fetch(`http://localhost:8000/api/chat/pinn_message?chat_id=${chatId}&message_id=${messageId}`,{ let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/api/chat/pinn_message?chat_id=${chatId}&message_id=${messageId}`,{
method:"POST", method:"POST",
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(response.ok){ if(response.ok){
return await response.json(); const data = await response.json()
return data.pinned_message
} }
else else
console.log(response.status) console.log(response.status)
@ -122,9 +142,11 @@
export async function unpinMessage(chatId, messageId){ export async function unpinMessage(chatId, messageId){
const response = await fetch(`http://localhost:8000/api/chat/unpinn_message?chat_id=${chatId}&message_id=${messageId}`,{ let token = localStorage.getItem('BPChat')
const response = await fetch(`https://docs.black-phoenix.ru/api/chat/unpinn_message?chat_id=${chatId}&message_id=${messageId}`,{
method:"DELETE", method:"DELETE",
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(response.ok){ if(response.ok){
return await response.json(); return await response.json();
@ -136,13 +158,15 @@
export async function uploadImages(image) { export async function uploadImages(image) {
let token = localStorage.getItem('BPChat')
const formData = new FormData(); const formData = new FormData();
formData.append('file', image); formData.append('file', image);
const response = await fetch('http://localhost:8000/api/images/upload_image', { const response = await fetch('https://docs.black-phoenix.ru/api/images/upload_image', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
body: formData, body: formData,
headers: {'Authorization': token },
}); });
if (response.ok) { if (response.ok) {

12
src/lib/login.js
View file

@ -1,6 +1,6 @@
export async function handleLogin(username, password) { export async function handleLogin(username, password) {
const response = await fetch('http://localhost:8000/api/users/login', { const response = await fetch('https://docs.black-phoenix.ru/api/users/login', {
method: 'POST', method: 'POST',
credentials:'include', credentials:'include',
headers: { headers: {
@ -16,14 +16,20 @@ export async function handleLogin(username, password) {
if(response.status === 200) if(response.status === 200)
{ {
console.log("залогинен")
const data = await response.json()
const token = data.authorization
localStorage.setItem('BPChat', token)
window.location.href = '/chat' window.location.href = '/chat'
return "" return "" // чтобы ничего не выводилось в качестве ошибки
} }
else if(response.status === 401) else if(response.status === 401)
{ {
return "Неправильный логин или пароль" return "Неправильный логин или пароль"
} }
else{ else{
console.log(response.status) console.log(response)
} }
} }

10
src/lib/register.js
View file

@ -1,9 +1,9 @@
export async function checkName(username) { export async function checkName(username) {
const response = await fetch('http://localhost:8000/api/users/check_existing_username', { const response = await fetch('https://docs.black-phoenix.ru/api/users/check_existing_username', {
method:'POST', method:'POST',
credentials:"include", credentials:"include",
headers:{ headers:{
'Content-Type': 'application/json' 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
"username": username "username": username
@ -26,7 +26,7 @@ export async function checkName(username) {
} }
export async function checkMail(mail) { export async function checkMail(mail) {
const response = await fetch('http://localhost:8000/api/users/check_existing_email', { const response = await fetch('https://docs.black-phoenix.ru/api/users/check_existing_email', {
method:'POST', method:'POST',
credentials:"include", credentials:"include",
headers:{ headers:{
@ -50,7 +50,7 @@ export async function checkMail(mail) {
} }
export async function VerificationEmail(Code){ export async function VerificationEmail(Code){
const response = await fetch('http://localhost:8000/api/users/email_verification',{ const response = await fetch('https://docs.black-phoenix.ru/api/users/email_verification',{
method:'POST', method:'POST',
credentials:'include', credentials:'include',
headers:{ headers:{
@ -72,7 +72,7 @@ export async function VerificationEmail(Code){
export async function handleRegister(username,password,email,date_of_birth){ export async function handleRegister(username,password,email,date_of_birth){
const response = await fetch('http://localhost:8000/api/users/register',{ const response = await fetch('https://docs.black-phoenix.ru/api/users/register',{
method:'POST', method:'POST',
credentials:"include", credentials:"include",
headers:{ headers:{

31
src/lib/userFunction.js
View file

@ -1,13 +1,15 @@
export async function UserCheck(){ export async function UserCheck(){
const response = await fetch('http://localhost:8000/api/users/me', { let token = localStorage.getItem('BPChat')
const response = await fetch('https://docs.black-phoenix.ru/api/users/me', {
method: 'GET', method: 'GET',
credentials:'include' credentials:'include',
headers: {'Authorization': token },
}) })
if(!response.ok){ if(!response.ok){
window.location.href = '/login' console.log(response)
return(response.status) return(response.status)
} }
@ -18,23 +20,10 @@ export async function UserCheck(){
} }
export async function handleLogout() { export async function handleLogout() {
try{
const response = await fetch('http://localhost:8000/api/users/logout', localStorage.removeItem('BPChat')
{ location.assign('/login')
method:'POST',
credentials:'include'
})
if (response.ok)
{
console.log("ты вышел, лох");
window.location.href = '/login'
} else
{
console.error('Не вышел, лошара');
}
} catch (error)
{
console.error('Ошибка при выполнении выхода:', error.message);
}
} }

94
src/lib/websocket.js
View file

@ -1,5 +1,74 @@
export default function createWebSocket(url, onMessageCallback) { // import io from 'socket.io-client';
const socket = new WebSocket(url);
// export default function createWebSocket(url, token, onMessageCallback) {
// const socket = io(url, {
// auth: {
// token: "123"
// },
// //withCredentials: true,
// });
// socket.on('message', (message) => {
// console.log('Получено сообщение:', message);
// });
// function sendMessage(message) {
// socket.emit('message', message);
// }
// return socket;
// }
// export default function createWebSocket(url, token , onMessageCallback) {
// const socket = new WebSocket(url, {
// headers:{ Authorization: token }
// })
// socket.addEventListener('message', (event) => {
// const jsonData = JSON.parse(event.data);
// onMessageCallback(jsonData);
// //console.log(jsonData)
// });
// return socket;
// }
// import SockJS from 'sockjs-client';
// export default function createWebSocket(url,token , onMessageCallback) {
// const sock = new SockJS(url, null, {
// headers: {
// 'Authorization': token
// }
// });
// //socket.onmessage = (event) => {
// // const jsonData = JSON.parse(event.data);
// // onMessageCallback(jsonData);
// // //console.log(jsonData)
// //};
// sock.onopen = function() {
// console.log('open');
// sock.send('test');
// };
// sock.onmessage = function(e) {
// console.log('message', e.data);
// sock.close();
// };
// sock.onclose = function() {
// console.log('close');
// };
// return sock;
// }
export default function createWebSocket(url, token, onMessageCallback) {
token = token.split(" ")[1]
const socket = new WebSocket(url, [token])
socket.addEventListener('message', (event) => { socket.addEventListener('message', (event) => {
const jsonData = JSON.parse(event.data); const jsonData = JSON.parse(event.data);
@ -7,5 +76,26 @@ export default function createWebSocket(url, onMessageCallback) {
//console.log(jsonData) //console.log(jsonData)
}); });
socket.onopen = (event) => {
console.log('WebSocket is open now.');
};
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};
socket.addEventListener('close', (event) => {
if (event.code !== 1000) {
console.error(`WebSocket closed unexpectedly: ${event.reason} (Code: ${event.code})`);
} else {
console.log('WebSocket closed normally');
}
});
socket.addEventListener('close', (event) =>{
console.log(event)
})
return socket; return socket;
} }

100
src/routes/chat/+page.svelte
View file

@ -11,6 +11,7 @@
import {page} from '$app/stores'; import {page} from '$app/stores';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
dayjs.locale('ru'); dayjs.locale('ru');
console.clear(); console.clear();
@ -35,11 +36,9 @@
const userData = await UserCheck(); const userData = await UserCheck();
userId = userData.id; userId = userData.id;
if(userId === undefined)
window.location.href = '/login'
chats = await getAllChats() chats = await getAllChats()
console.log(chats) console.log(chats, " чаты")
async function handleChatUrlChange() { async function handleChatUrlChange() {
// Проверяем, что текущий хэш соответствует шаблону для чата // Проверяем, что текущий хэш соответствует шаблону для чата
@ -47,38 +46,42 @@
chatId = window.location.hash.slice(4); chatId = window.location.hash.slice(4);
console.log(chatId, " chatId") console.log(chatId, " chatId")
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`
console.log(messages)
messages = await getLastMessages(chatId,msgLoaded) messages = await getLastMessages(chatId,msgLoaded)
setTimeout(scrollDown,50) setTimeout(scrollDown,50)
msgLoaded += 15 msgLoaded += 15
pinnedMsg = await getPinnedMsg(chatId) pinnedMsg = await getPinnedMsg(chatId)
console.log(messages.length)
console.log(pinnedMsg, " pinned") console.log(pinnedMsg, " pinned")
console.log(messages, " сообщения") console.log(messages, " сообщения")
socket = createWebSocket(websocketUrl, async (message) => { let token = localStorage.getItem('BPChat')
const websocketUrl = `wss://docs.black-phoenix.ru/api/chat/ws/${chatId}`
// const socket = createWebSocket(websocketUrl, token, async (message) => {
// // Обработка сообщения
// console.log('Received message: ', message);
// });
socket = createWebSocket(websocketUrl, token, async (message) => {
//console.log(message, "сообщение!!!!!")
if(message.answer_id != null){ if(message.answer_id != null){
let answer = await getMessageById(chatId,message.answer_id) let answer = await getMessageById(chatId,message.answer_id)
message.answerMessage = answer.message message.answerMessage = answer.message
//console.log(answer.message) //console.log(answer.message)
} }
if(message.flag === "delete"){ if(message.flag === "delete"){
let messageToDelete = messages.findIndex(msg => msg.id === message.id) let messageToDelete = messages.findIndex(msg => msg.id === message.id)
console.log(messageToDelete, "индекс сообщения, которое нужно делитнуть") console.log(messageToDelete, "индекс сообщения, которое нужно делитнуть")
messages.splice(messageToDelete,1) messages.splice(messageToDelete,1)
messages = messages messages = messages
console.log(messages," сообщения после удаления") console.log(messages," сообщения после удаления")
} } else {
else{
messages = [...messages, message] messages = [...messages, message]
setTimeout(scrollDown,50) setTimeout(scrollDown,50)
} }
console.log(message, "пришло сообщение") messages = messages
}) })
} }
} }
@ -165,7 +168,7 @@ function helperDivShow(event, id) {
function hideHelperDiv(event){ function hideHelperDiv(event){
if (event.target !== helperDiv) { if ((event.target !== helperDiv) && (helperDiv)) {
helperDiv.style.opacity = "0"; helperDiv.style.opacity = "0";
} }
@ -298,7 +301,7 @@ function helperDivShow(event, id) {
<div class="chatDivLeft"> <div class="chatDivLeft">
<a class="aChatDivLeft" href={`/chat#id=${chat.chat_id}`}> <a class="aChatDivLeft" href={`/chat#id=${chat.chat_id}`}>
<img class="chatImage" src="{chat.avatar_image}" alt="аватарка"> <img class="chatImage" src="{chat.avatar_image}" alt="аватарка">
<h2>{chat.chat_name}</h2> <h2 class="chatName">{chat.chat_name}</h2>
</a> </a>
</div> </div>
{/each} {/each}
@ -342,7 +345,7 @@ function helperDivShow(event, id) {
</div> </div>
<div class="messageMessage"> <div class="messageMessage">
<p>{message.message}</p> <p class="messageMsg">{message.message}</p>
{#if message.image_url != null} {#if message.image_url != null}
<img src="{message.image_url}" alt="пикча" class="messageImage"> <img src="{message.image_url}" alt="пикча" class="messageImage">
{/if} {/if}
@ -416,19 +419,17 @@ function helperDivShow(event, id) {
<style lang="scss"> <style lang="scss">
::-webkit-scrollbar-thumb:hover {
background: white; /* Цвет ползунка при наведении */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Цвет трека */
border-radius: 6px; /* Радиус скругления */
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: transparent; /* Цвет ползунка */ background: linear-gradient(45deg, var(--blue), var(--purple));
border-radius: 6px; /* Радиус скругления */ background-repeat: no-repeat;
border: 3px solid #ffffff00; /* Цвет фона внутри ползунка */ background-attachment: fixed;
border-radius: 15px;
}
::-webkit-scrollbar {
width: 3px;
} }
.imageDiv{ .imageDiv{
@ -444,6 +445,7 @@ function helperDivShow(event, id) {
.textMsg{ .textMsg{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
} }
.imageFile{ .imageFile{
@ -493,7 +495,7 @@ function helperDivShow(event, id) {
} }
.nameAnswerDiv > p,img{ .nameAnswerDiv > p,img{
margin-left: 5px; //margin-left: 5px;
} }
.nameAnswerDiv > p{ .nameAnswerDiv > p{
@ -589,7 +591,22 @@ function helperDivShow(event, id) {
background: background:
linear-gradient(#101010, #101010) padding-box, linear-gradient(#101010, #101010) padding-box,
var(--gradient) border-box; var(--gradient) border-box;
transition: 0.5s;
z-index: 1;
&:hover{
z-index: 0;
box-shadow:
4px 4px 15px rgba($color: #5e2a83, $alpha: 1.58),
-4px -4px 15px rgba($color: #3d53fe, $alpha: 1.58);
& + .chatName{
//text-shadow: 0px 0px 115px white;
//TODO: не работает, починить подсветку текста
} }
}
}
.chatImage{ .chatImage{
height: 60px; height: 60px;
@ -609,20 +626,29 @@ function helperDivShow(event, id) {
} }
.messageImage{ .messageImage{
margin-top: 5px; padding-bottom: 0px;
border-radius: 10px; border-radius: 0 0 10px 10px;
max-width: calc(100% - 15px); max-width: 500px;
max-height: 500px;
} }
.messageMessage{ .messageMessage{
display: flex;
flex-direction: column;
max-width: 500px;
justify-content: space-between;
background-color: #7734AA; background-color: #7734AA;
border-radius: 15px; border-radius: 15px;
padding: 5px; //padding: 5px;
word-break: break-word; word-break: break-word;
} }
.messageMsg{
padding: 5px; //паддинг, чтобы текст нормально выглдяил
}
.messageAvatar{ .messageAvatar{
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 15px; border-radius: 15px;
@ -678,6 +704,16 @@ padding-bottom: 10px;
align-content: center; align-content: center;
} }
// .chatDiv::after{
// content: '';
// background-image: url('./BPytka.png');
// background-repeat:no-repeat;
// width: 1010px;
// height: 1010px;
// pointer-events: none;
// }
//TODO: сделать бекграунт картинку
.headerDiv{ .headerDiv{
grid-column: span 3; grid-column: span 3;
z-index: 69; z-index: 69;

5
src/routes/login/+page.svelte
View file

@ -42,6 +42,9 @@
document.getElementById('password').placeholder = ''; document.getElementById('password').placeholder = '';
document.getElementById('username').placeholder = ''; document.getElementById('username').placeholder = '';
enterError = await handleLogin(username, password); enterError = await handleLogin(username, password);
let token = localStorage.getItem('BPChat')
console.log(token)
break; break;
} }
} }
@ -65,6 +68,8 @@
onMount(() => { onMount(() => {
loadingPage = !loadingPage; loadingPage = !loadingPage;
}); });
</script> </script>
{#if loadingPage === true} {#if loadingPage === true}