var chatBox; var chatBoxFocusFlg = 1; var chatBotSocket; function chatBoxInit(obj){ chatBox = new Chat(obj); } class Chat { constructor(obj) { this.chatSocketUrl = `wss://chat.bkk.poker`; this.chatWebUrl = `https://chat.bkk.poker`; this.chats = {}; this.chatUnreads = []; this.chatBoxTitle = obj.chatBoxTitle ?? 'Chat with us'; this.chatBoxTheme = obj.chatBoxTheme ?? 'gold'; this.token = obj.token; this.chatId = obj.chatId; this.chatKey = obj.chatKey; this.userKey = obj.userKey; this.userName = obj.userName; this.userType = "USER"; this.init(); } init() { document.head.innerHTML += ``; document.head.innerHTML += ``; document.body.innerHTML += `
`; var $chatbox = $('.chatbox'); var $chatboxTitle = $('.chatbox_title'); $chatboxTitle.on('click', function () { $chatbox.toggleClass('chatbox-tray'); if(!$chatbox.hasClass('connected')){ $chatbox.addClass('connected'); chatBox.connect(); } var messages = document.getElementById('chatbox_body'); messages.scrollTop = messages.scrollHeight; }); if(this.userKey.toString().search(/^MEMBER_/)>=0){ setTimeout(function(){ $chatbox.addClass('connected'); chatBox.connect(); },600); } } connect() { const chatWebUrl= this.chatWebUrl; document.getElementById('chatbox_body').innerHTML = ""; chatBotSocket = new WebSocket(`${this.chatSocketUrl}/chat/${this.chatId}/${this.chatKey}?token=${this.token}&userType=${this.userType}&userKey=${this.userKey}&userName=${this.userName}`); chatBotSocket.onopen = function () { console.log('WebSocket connection established'); }; chatBotSocket.onmessage = function (event) { var data = JSON.parse(event.data); if (data.cmd === "chat_receive") { chatBox.chatUpdate(data.data); if(data.data.userRead!="1"){ if(!chatBox.chatUnreads.includes(data.data.messageId)) chatBox.chatUnreads.push(data.data.messageId); $('#chat_notification_count').text(chatBox.chatUnreads.length) if(chatBox.chatUnreads.length>0){ $('#chat_notification_count').show(); }else{ $('#chat_notification_count').hide(); } if(chatBoxFocusFlg==1 && !$chatbox.hasClass('chatbox-tray')){ chatBox.chatRead() } } } }; chatBotSocket.onerror = function (error) { console.error('WebSocket error observed:', error); }; chatBotSocket.onclose = function (event) { if (!event.wasClean) { console.log(`WebSocket closed unexpectedly: code=${event.code}, reason=${event.reason}`); } setTimeout(connect, 1000); }; } chatRead(){ while(chatBox.chatUnreads.length>0){ var messageId = chatBox.chatUnreads.shift(); var message = JSON.stringify({ cmd: 'chat_read', messageId: messageId, }); chatBotSocket.send(message); } $('#chat_notification_count').text(chatBox.chatUnreads.length) if(chatBox.chatUnreads.length>0){ $('#chat_notification_count').show(); }else{ $('#chat_notification_count').hide(); } } chatUpdate(data){ chatBox.chats[data.messageId] = data; chatBox.chats = Object.keys(chatBox.chats).sort().reduce( (obj, key) => { obj[key] = chatBox.chats[key]; return obj; }, {} ); chatBox.renderChat(); } renderChat(){ var messages = document.getElementById('chatbox_body'); const chatWebUrl = chatBox.chatWebUrl; $('#chatbox_body').html(''); var userKeyPrev = ''; var datePrev = ''; for(var messageId in chatBox.chats){ var item = chatBox.chats[messageId]; var html = ""; var messageClass = item.userType === 'AGENT' ? 'chatbox_body_message_right' : 'chatbox_body_message_left'; var readHtml = item.userType === 'USER' && item.agentRead=="1" ? '' : ''; var createdDate = new Date(item.createdDate); var dateText = createdDate.getFullYear().toString()+"-"+ ("0"+(createdDate.getMonth()+1).toString()).substr(-2)+"-"+ ("0"+createdDate.getDate().toString()).substr(-2); var timeText = ("0"+createdDate.getHours().toString()).substr(-2)+":"+ ("0"+createdDate.getMinutes().toString()).substr(-2); if(datePrev!=dateText){ html += `