# The problem is caught here, error is occurred which I added above and after that page reloaded
# Whatever I added after the problem remains same.
chat.html: Only websocket part I added.
<!-- ********************************************************** -->
<script>
let messageBody = document.getElementById("message-box");
let contactProfile = document.getElementById('contact-profile');
let otherUserImage = document.getElementById('other_user_or_group_image');
let otherUserName = document.getElementById('chatroom-title');
let messageInputBox = document.getElementById('message-sent-box');
let chatLog = document.getElementById("chat_log");
let scrollPos = 0;
let previewBox = document.getElementById('previewBox');
let previewImage = document.getElementById('preview-image');
let activeStatus = document.getElementById('active-status');
let chatSocket = null;
let roomId = null;
let requestUserId = null;
let otherUserId = null;
// --------- setupWebSocket -----------------------------
function setupWebSocket(room_id, request_user_id, other_user_id){
roomId = room_id;
requestUserId = request_user_id;
otherUserId = other_user_id;
let isValidRoom = onSelectFriend(otherUserId);
console.log(isValidRoom);
if(isValidRoom){
chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/chat/'
+ roomId
+ '/'
);
activeStatus.textContent = '';
messageInputBox.classList.remove('d-none');
chatSocket.onmessage = function(message){
let data = JSON.parse(message.data);
console.log("on load message");
console.log(data);
if(data.msg_type == 'join'){
showActiveStatus(data);
}
if(data.msg_type == 'new_message'){
// console.log()
}
}
}
}
// --------- ./setupWebSocket -----------------------------
//-------------- Active Status ----------------------------
function showActiveStatus(message){
let userId = message.user_id;
console.log(userId);
if (userId !== requestUserId){
activeStatus.textContent = ' Active';
}
}
//-------------- Active Status ----------------------------
/* ------------- send Message ------------------- */
// click the submit button
document.getElementById('chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
send message to chatroom
document.querySelector('#chat-message-submit').onclick = function(e) {
var messageInputDom = document.getElementById('chat-message-input');
console.log("Input ");
var message = messageInputDom.value;
console.log(message);
// console.log("target value" + e.target.value)
console.log(chatSocket);
chatSocket.send(JSON.stringify({
'command': 'send_message',
'message': message,
'room_id': roomId,
'type': 'message',
}));
messageInputDom.value = '';
};
/* ------------- ./send Message ------------------- */
// getting or creating chat room
function onSelectFriend(otherUserId){
// need to uncomment later
// closePreviewBox();
const csrf = document.getElementsByName('csrfmiddlewaretoken');
payload = {
"csrfmiddlewaretoken": csrf[0].value,
"user_id": otherUserId,
}
$.ajax({
type: 'POST',
dataType: "json",
url: "/get_or_create_chat_room/",
data: payload,
success: function(response){
console.log(response);
if(response.status == 'success'){
contactProfile.classList.remove('d-none');
otherUserImage.src = response.other_user_image_url;
otherUserName.textContent = response.other_user_name;
}
},
error: function(error){
console.log(error);
alert("Something went wrong.")
},
})
if(otherUserImage.src != ''){
return true;
}
else{
return false;
}
}
// end of get or creating chat room
</script>
<!-- ********************************************************** -->
Thanks in advance.