## This my JS File for my chat application
let input_message = $('#input-message')
let message_body = $('.msg_card_body')
let send_message_form = $('#send-message-form')
const USER_ID = $('#logged-in-user').val()
let loc = window.location
// let wsStart = 'wss://'
// let endpoint = wsStart + loc.host + loc.pathname
var socket = new WebSocket('wss://127.0.0.1:8000/accounts/home/');
socket.onopen = async function(e){
console.log('open', e)
send_message_form.on('submit', function (e){
e.preventDefault()
let message = input_message.val()
let send_to = get_active_other_user_id()
let thread_id = get_active_thread_id()
let data = {
'message': message,
'sent_by': USER_ID,
'send_to': send_to,
'thread_id': thread_id
}
data = JSON.stringify(data)
socket.send(data)
$(this)[0].reset()
})
}
socket.onmessage = async function(e){
console.log('message', e)
let data = JSON.parse(e.data)
let message = data['message']
let sent_by_id = data['sent_by']
let thread_id = data['thread_id']
newMessage(message, sent_by_id, thread_id)
}
socket.onerror = async function(e){
console.log('error', e)
}
socket.onclose = async function(e){
console.log('close', e)
}
function newMessage(message, sent_by_id, thread_id) {
if ($.trim(message) === '') {
return false;
}
let message_element;
let chat_id = 'chat_' + thread_id
if(sent_by_id == USER_ID){
message_element = `
<div class="d-flex mb-4 replied">
<div class="msg_cotainer_send">
${message}
<span class="msg_time_send"></span>
</div>
<div class="img_cont_msg">
<img src="{{thread.first_person.profile.profile_picture.url}}">
</div>
</div>
`
}
else{
message_element = `
<div class="d-flex mb-4 received">
<div class="img_cont_msg">
<img src="{{thread.second_person.profile.profile_picture.url}}" class="rounded-circle user_img_msg">
</div>
<div class="msg_cotainer">
${message}
<span class="msg_time"></span>
</div>
</div>
`
}
let message_body = $('.messages-wrapper[chat-id="' + chat_id + '"] .msg_card_body')
message_body.append($(message_element))
message_body.animate({
scrollTop: $(document).height()
}, 100);
input_message.val(null);
}
$('.contact-li').on('click', function (){
$('.contacts .active').removeClass('active')
$(this).addClass('active')
// message wrappers
let chat_id = $(this).attr('chat-id')
$('.messages-wrapper.is_active').removeClass('is_active')
$('.messages-wrapper[chat-id="' + chat_id +'"]').addClass('is_active')
})
function get_active_other_user_id(){
let other_user_id = $('.messages-wrapper.is_active').attr('other-user-id')
other_user_id = $.trim(other_user_id)
return other_user_id
}
function get_active_thread_id(){
let chat_id = $('.messages-wrapper.is_active').attr('chat-id')
let thread_id = chat_id.replace('chat_', '')
return thread_id
}
This my routing.py file
from django.urls import path
from . import consumers
websocket_urlpatterns = [
path('accounts/home/',consumers.ChatConsumer.as_asgi()),
]
# This is my error logs when i am trying to connect websocket on productions
Anyone Can tell me what i mistake ???
When posting code here, please remember to enclose the code between lines of three backtick characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted. (I’ve taken the liberty of editing your post for this.)
We’re going to need to see the appropriate server logs for this.
We’ll need to see the request and error logs for your asgi container (Daphne or uvicorn), along with the command line being used to run it.
If you’re using either nginx or apache as a websocket proxy, we’ll need to see the log entries showing the connection attempts and any corresponding error log entries, along with the appropriate section of the server’s configuration files.
Also, I’ll assume that you have had this working in your test environment. If not, we’d want to see the consumer, too.