You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
|
|
const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
|
|
const domain = "192.168.1.106:8000";
|
|
const sessionId = document.getElementById('session_id').textContent.trim();
|
|
const osichatSocketUrl = `${chat_ws_scheme}://${domain}/ws/osichat/${sessionId}/`;
|
|
const osichatSocket = new WebSocket(osichatSocketUrl);
|
|
|
|
|
|
osichatSocket.onopen = () => {
|
|
console.log('WebSocket connection to osichat established');
|
|
};
|
|
|
|
osichatSocket.onmessage = function(e) {
|
|
const data = JSON.parse(e.data);
|
|
if (data.event_type === 'load_chat') {
|
|
const chatDiv = document.getElementById('osichat');
|
|
const html = data.html;
|
|
chatDiv.innerHTML = html;
|
|
|
|
// Append the toggle tag
|
|
const script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = `http://${domain}/static/js/osichat/chat-toggle.js`;
|
|
chatDiv.appendChild(script);
|
|
|
|
const startChatContainer = document.getElementById('startChat');
|
|
// If this container exists then the template returned was start-conversation.html, no conversation yet.
|
|
if (startChatContainer) {
|
|
startChatContainer.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
const guestName = event.target.elements.guest_name.value;
|
|
const guestMobileNumber = event.target.elements.guest_mobile_number.value;
|
|
|
|
const eventMessage = {
|
|
'event_type': 'start_conversation',
|
|
'guest_name': guestName,
|
|
'guest_mobile_number': guestMobileNumber,
|
|
};
|
|
|
|
osichatSocket.send(JSON.stringify(eventMessage));
|
|
|
|
event.target.reset();
|
|
});
|
|
}
|
|
|
|
const sendMessageContainer = document.getElementById('sendMessage');
|
|
if (sendMessageContainer) {
|
|
sendMessageContainer.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
const message = event.target.elements.message.value;
|
|
|
|
const eventMessage = {
|
|
'event_type': 'send_message',
|
|
'message': message,
|
|
|
|
};
|
|
|
|
osichatSocket.send(JSON.stringify(eventMessage));
|
|
|
|
event.target.reset();
|
|
});
|
|
}
|
|
|
|
} else if (data.event_type === 'start_conversation') {
|
|
const chatDiv = document.getElementById('startChatContainer');
|
|
const html = data.html;
|
|
chatDiv.innerHTML = html;
|
|
|
|
} else if (data.event_type === 'send_message') {
|
|
const messagesDiv = document.getElementById('messages');
|
|
const html = data.html;
|
|
messagesDiv.insertAdjacentHTML('beforeend', html);
|
|
|
|
}
|
|
};
|
|
|
|
osichatSocket.onclose = () => {
|
|
console.log('WebSocket connection to osichat closed');
|
|
};
|
|
|
|
osichatSocket.onerror = (error) => {
|
|
console.log('WebSocket error:', error);
|
|
};
|
|
|