Files
tripwithbonus/static/js/chat_sockets.js
2023-08-13 19:48:55 +03:00

137 lines
3.8 KiB
JavaScript

//
// let senderName = localStorage.getItem('senderName');
// if (!senderName) {
// localStorage.setItem('senderName', senderName);
// }
//
//
// }
// let form = document.getElementById('form')
// form.addEventListener('submit', (e) => {
// e.preventDefault()
// let message = e.target.message.value
// chatSocket.send(JSON.stringify({
// 'message': message,
// 'sender': senderName
// }))
// form.reset()
// })
// let url = `ws://localhost:8000/ws/socket-server/`;
//
// const chatSocket = new WebSocket(url);
// chatSocket.onmessage = function (e) {
// let data = JSON.parse(e.data)
// console.log('Data: ', data)
// }
// chatSocket.onopen = function () {
// console.log("open")
// }
// // function open_socket () {
// chatSocket.onopen = function(){
// console.log("open")
// // chatSocket
// }
// }
// var i = 0
url = `ws://localhost:8000/ws/socket-server/?user_id=${user_id}`;
const chatSocket = new WebSocket(url);
function sendMessageSocket (data) {
chatSocket.send(JSON.stringify(data));
let el_tab = document.querySelector(".tab_user_messanger.select")
el_tab.querySelector(".last-message-messenger-user-tab").innerHTML = data['text']
}
chatSocket.onmessage = function (e) {
let el_tab = document.querySelector(".tab_user_messanger.select")
let old_item_tab_user = null;
if (el_tab !== null){
let dataset = el_tab.dataset;
old_item_tab_user = dataset['curReceiverItem'];
}
let data = JSON.parse(e.data);
console.log('Data:', data);
console.log("return")
if (data.type === 'chat') {
document.querySelector(".container-messages").innerHTML = data.html;
document.querySelector(".enter-message-inp").focus()
} else if (data.type === "echo") {
console.log(data)
} else if (data.type === "update_chat") {
let msg_cont = document.querySelector(".container-messages")
if (msg_cont !== null){
if (msg_cont.dataset['curReceiver'] === data['sender'].toString() || msg_cont.dataset['curReceiver'] === data['receiver'].toString()) {
msg_cont.innerHTML = data.chat_html
}
}
let list_of_users = document.querySelector(".block-list-of-users")
if (list_of_users !== null){
if (data.users_list_html){
list_of_users.innerHTML = data.users_list_html
if (el_tab !== null){
document.querySelector(`[data-cur-receiver-item="${old_item_tab_user}"]` ).classList.add("select")
}
}
}
}
if (data.required_beep === true) {
const beep = new Audio('/static/sounds/beep_2.mp3')
beep.play()
}
}
// let url = `ws://localhost:8000/ws/socket-server/`;
//
// const chatSocket = new WebSocket(url);
//
// chatSocket.onmessage = function (e) {
// let data = JSON.parse(e.data)
// console.log('Data: ', data)
//
// if (data.type === 'chat') {
// // let messages = document.getElementById('messages')
// //
// // messages.insertAdjacentHTML('beforeend', `<div>
// // <p>${data.message}</p>
// // </div>`
// // )
// document.querySelector(".container-messages").innerHTML = data.html;
// document.querySelector(".enter-message-inp").focus()
// }
//
// }
// function send_ws_msg(data) {
// chatSocket.send(JSON.stringify(data));
// }
// window.onload = function () {
//
// let btn = document.querySelector(".send-message")
//
// btn.addEventListener('click', (e) => {
// e.preventDefault()
// // let message = e.target.message.value
// chatSocket.send(JSON.stringify({
// 'data':'data'
// }))
// // btn.reset()
// })
// }
// let form = document.getElementById('form')