@ -1,14 +1,18 @@
const chat _ws _scheme = window . location . protocol === "https:" ? "wss" : "ws" ; const chat _ws _scheme = window . location . protocol === "https:" ? "wss" : "ws" ;
const domain = "192.168.1.1 11 :8000"; const domain = "192.168.1.1 06 :8000";
let osichatSocket ; let osichatSocket ;
let isOpen = false ; let isOpen = false ;
let chatLoaded = false ;
// FUNCTION TO FETCH THE SESSION ID
// FUNCTION TO FETCH THE SESSION ID
async function fetchSessionID ( ) { async function fetchSessionID ( ) {
let session _id = 'Unknown' ;
let session _id = 'Unknown' ;
while ( session _id === 'Unknown' ) {
while ( session _id === 'Unknown' ) {
try {
try {
const response = await fetch ( 'http://192.168.1.1 11 :3000/get-client-session/') ;
const response = await fetch ( 'http://192.168.1.1 06 :3000/get-client-session/') ;
const data = await response . json ( ) ;
const data = await response . json ( ) ;
if ( data . session _id ) {
if ( data . session _id ) {
session _id = data . session _id ;
session _id = data . session _id ;
@ -20,6 +24,20 @@ async function fetchSessionID() {
return session _id ;
return session _id ;
} }
// FUNCTIONS TO SHOW & HIDE THE LOADER
function showLoader ( ) {
const osichatLoader = document . getElementById ( 'osichatLoader' ) ;
if ( osichatLoader ) {
osichatLoader . classList . remove ( 'hidden' ) ;
}
}
function hideLoader ( ) {
const osichatLoader = document . getElementById ( 'osichatLoader' ) ;
if ( osichatLoader ) {
osichatLoader . classList . add ( 'hidden' ) ;
}
}
// FUNCTION TO APPEND THE TEXTAREA SCRIPT
// FUNCTION TO APPEND THE TEXTAREA SCRIPT
function appendTextAreaScript ( domain , chatDiv ) { function appendTextAreaScript ( domain , chatDiv ) {
@ -29,7 +47,6 @@ function appendTextAreaScript(domain, chatDiv) {
chatDiv . appendChild ( textareaScript ) ;
chatDiv . appendChild ( textareaScript ) ;
} }
// FUNCTION TO HANDLE FORM SUBMISSION
// FUNCTION TO HANDLE FORM SUBMISSION
function handleFormSubmission ( form , eventType , osichatSocket ) { function handleFormSubmission ( form , eventType , osichatSocket ) {
form . addEventListener ( 'submit' , function ( event ) {
form . addEventListener ( 'submit' , function ( event ) {
@ -41,23 +58,23 @@ function handleFormSubmission(form, eventType, osichatSocket) {
formData . forEach ( ( value , key ) => {
formData . forEach ( ( value , key ) => {
eventMessage [ key ] = value ;
eventMessage [ key ] = value ;
} ) ;
} ) ;
osichatSocket . send ( JSON . stringify ( eventMessage ) ) ;
osichatSocket . send ( JSON . stringify ( eventMessage ) ) ;
form . reset ( ) ;
form . reset ( ) ;
} ) ;
} ) ;
} }
// FUNCTION TO HANDLE LOAD CHAT EVENT
// FUNCTION TO HANDLE LOAD CHAT EVENT
function handleLoadChatEvent ( data , osichatSocket ) { function handleLoadChatEvent ( data , osichatSocket ) {
const osichatLoader = document . getElementById ( 'osichatLoader' ) ;
chatLoaded = true ;
hideLoader ( ) ;
let chatDiv = document . getElementById ( 'roomContainer' ) ; // CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER
let chatDiv = document . getElementById ( 'roomContainer' ) ; // CASE WHERE WIDGET IS ALREADY LOADED, DISPLAY THE CHAT PAGES(START/CONVERSATION) IN ROOM CONTAINER
if ( ! chatDiv ) {
if ( ! chatDiv ) {
chatDiv = document . getElementById ( 'osichat' ) ; // CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT
chatDiv = document . getElementById ( 'osichat' ) ; // CASE WHERE WIDGET IS NOT LOADED, DISPLAY THE WHOLE CHATWIDGET IN OSICHAT
}
}
chatDiv . innerHTML = data . html ;
chatDiv . innerHTML = data . html ;
if ( ! document . querySelector ( 'script[src="http://' + domain + '/static/js/osichat/chat-toggle.js"]' ) ) {
if ( ! document . querySelector ( 'script[src="http://' + domain + '/static/js/osichat/chat-toggle.js"]' ) ) {
const script = document . createElement ( 'script' ) ;
const script = document . createElement ( 'script' ) ;
script . type = 'text/javascript' ;
script . type = 'text/javascript' ;
@ -90,12 +107,16 @@ async function initializeChatWebSocket() {
osichatSocket = new WebSocket ( osichatSocketUrl ) ;
osichatSocket = new WebSocket ( osichatSocketUrl ) ;
osichatSocket . onopen = ( ) => {
osichatSocket . onopen = ( ) => {
console . log ( 'WebSocket connection to osichat established' ) ;
if ( ! chatLoaded ) {
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'load_chat' , 'client_type' : 'website_guest' } ) ) ;
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'load_chat' , 'client_type' : 'website_guest' , 'reconnecting' : 'False' } ) ) ;
} else {
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'load_chat' , 'client_type' : 'website_guest' , 'reconnecting' : 'True' } ) ) ;
}
} ;
} ;
osichatSocket . onmessage = function ( e ) {
osichatSocket . onmessage = function ( e ) {
const data = JSON . parse ( e . data ) ;
const data = JSON . parse ( e . data ) ;
const typingDiv = document . getElementById ( 'typing' ) ;
switch ( data . event _type ) {
switch ( data . event _type ) {
case 'load_chat' :
case 'load_chat' :
handleLoadChatEvent ( data , osichatSocket ) ;
handleLoadChatEvent ( data , osichatSocket ) ;
@ -103,20 +124,23 @@ async function initializeChatWebSocket() {
case 'start_conversation' :
case 'start_conversation' :
handleLoadChatEvent ( data , osichatSocket ) ;
handleLoadChatEvent ( data , osichatSocket ) ;
break ;
break ;
case 'typing' :
typingDiv . classList . remove ( 'hidden' ) ;
typingDiv . innerHTML = data . html ;
break ;
case 'stopped_typing' :
typingDiv . classList . add ( 'hidden' ) ;
break ;
case 'send_message' :
case 'send_message' :
console . log ( 'h' )
if ( isOpen ) { // If chat widget isOpen (declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages
console . log ( isOpen )
if ( isOpen ) { // Id chat widget isOpen(declared in chat-toggle.js) mark all messages as read by guest else just return number of unread messages
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'update_read_messages' , 'chat_state' : 'open' } ) ) ;
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'update_read_messages' , 'chat_state' : 'open' } ) ) ;
console . log ( isOpen )
} else {
} else {
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'update_read_messages' , 'chat_state' : 'closed' } ) ) ;
osichatSocket . send ( JSON . stringify ( { 'event_type' : 'update_read_messages' , 'chat_state' : 'closed' } ) ) ;
}
}
const messagesDiv = document . getElementById ( 'messages' ) ;
const messagesDiv = document . getElementById ( 'messages' ) ;
messagesDiv . insertAdjacentHTML ( 'beforeend' , data . html ) ;
messagesDiv . insertAdjacentHTML ( 'beforeend' , data . html ) ;
if ( data . user ) { // If it is sent by an Osina user play a notification sound for the guest
if ( data . user ) { // If it is sent by an Osina user play a notification sound for the guest
const notificationSound = document . getElementById ( 'notification-sound' ) ;
const notificationSound = document . getElementById ( 'notification-sound' ) ;
console . log ( notificationSound )
notificationSound . play ( ) ;
notificationSound . play ( ) ;
}
}
break ;
break ;
@ -128,15 +152,14 @@ async function initializeChatWebSocket() {
break ;
break ;
case 'update_read_messages' :
case 'update_read_messages' :
const unreadMessages = document . getElementById ( ` unreadMessages ` ) ;
const unreadMessages = document . getElementById ( ` unreadMessages ` ) ;
if ( ! isOpen ) {
if ( ! isOpen ) {
unreadMessages . classList . remove ( 'hidden' )
unreadMessages . classList . remove ( 'hidden' ) ;
console . log ( unreadMessages )
unreadMessages . innerHTML = data . html ;
unreadMessages . innerHTML = data . html ;
const script = document . createElement ( 'script' ) ;
const script = document . createElement ( 'script' ) ;
script . src = ` http:// ${ domain } /static/js/osichat/chat-toggle.js ` ;
script . src = ` http:// ${ domain } /static/js/osichat/chat-toggle.js ` ;
document . body . appendChild ( script ) ;
document . body . appendChild ( script ) ;
} else {
} else {
unreadMessages . classList . add ( 'hidden' )
unreadMessages . classList . add ( 'hidden' ) ;
}
}
break ;
break ;
default :
default :
@ -146,13 +169,29 @@ async function initializeChatWebSocket() {
osichatSocket . onclose = ( ) => {
osichatSocket . onclose = ( ) => {
console . log ( 'WebSocket connection to osichat closed' ) ;
console . log ( 'WebSocket connection to osichat closed' ) ;
// osichatLoader.classList.remove('hidden');
showLoader ( ) ;
setTimeout ( ( ) => {
console . log ( 'Attempting to reconnect to WebSocket...' ) ;
initializeChatWebSocket ( ) ;
} , 2000 ) ;
} ;
} ;
osichatSocket . onerror = ( error ) => {
osichatSocket . onerror = ( error ) => {
console . log ( 'WebSocket error:' , error ) ;
console . log ( 'WebSocket error:' , error ) ;
// osichatLoader.classList.remove('hidden');
showLoader ( ) ;
} ;
} ;
} }
initializeChatWebSocket ( ) ;
window . addEventListener ( 'offline' , ( ) => {
showLoader ( ) ;
if ( osichatSocket ) {
osichatSocket . close ( ) ;
}
} ) ;
// INITIALIZE CHAT WEB SOCKET
initializeChatWebSocket ( ) ;
emile
9 months ago
