Django Channels Websocket

I want to deploy an django channels on production using railway deployment platform.
I have successfully deployed application but websocket connection failed showing this log :

" mixed content: the page at ‘’ was loaded over https, but attempted to connect to the insecure websocket endpoint ‘ws://’. this request has been blocked; this endpoint must be available over wss."

I have no idea how to connect websocket with https .

How to solve this error :

My GitHub Repo : GitHub - datamind321/chat-application

Anyone help out me to connect websocket using https on deployment servers.

It’s answered in the message you quoted above:

Your connection string must use wss://... and not ws://...

I have already used wss check my repo

Please see here

Side note: Please do not post images of code here. Copy/paste the code into the body of your message, surrounded 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.

Look at the network tab of your browser’s developer tools to see what connection is actually being issued.

Also, what is the complete error message you are receiving? Where is it coming from? (What log?)

Okay Sorry for posting images I have no repeat any post

messages.js:14 Mixed Content: The page at ‘’ was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint ‘ws://’. This request has been blocked; this endpoint must be available over WSS.

This logs showing on my console

Which console?

Again, look at your browser’s network tab to see how this request is being issued.

  1. Mixed content: load all resources via HTTPS to improve the security of your site

  2. Even though the initial HTML page is loaded over a secure HTTPS connection, some resources like images, stylesheets or scripts are being accessed over an insecure HTTP connection. Usage of insecure resources is restricted to strengthen the security of your entire site.

To resolve this issue, load all resources over a secure HTTPS connection.

1. 1 resource

  1. |Name|Restriction Status|

| — | — |

THis logs on network tab issues

Ok, so then you are issuing the request as ws:// instead of wss://. You need to find where in your code you’re doing this.

// messages.js

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 = ‘ws://’

if(loc.protocol === ‘https’) {
wsStart = ‘wss://’

let endpoint = wsStart + + loc.pathname

var socket = new WebSocket(endpoint)

socket.onopen = async function(e){
console.log(‘open’, e)
send_message_form.on(‘submit’, function (e){
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.onmessage = async function(e){
console.log(‘message’, e)
let data = JSON.parse(
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>
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')
    scrollTop: $(document).height()
}, 100);


$(‘.contact-li’).on(‘click’, function (){
$(‘.contacts .active’).removeClass(‘active’)

// message wrappers
let chat_id = $(this).attr('chat-id')
$('.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

So what would be the condition that would cause your browser to issue the request as ws:// instead of wss://?

let loc = window.location

let wsStart = ‘ws://’

if(loc.protocol == ‘https’) {
wsStart = ‘wss://’

let endpoint = wsStart + + loc.pathname

var socket = new WebSocket(endpoint)

This coindition used then

But what condition? What can you say would cause wsStart to be ws://

let wsStart = ‘wss://’

let endpoint = wsStart + + loc.pathname

var socket = new WebSocket(endpoint)

But, WHen I am used this code error log are same at previous

I think I have unable to use correct way to websocket over https on deployment servers . Can you tell me what’s step I am follow to run websocket over https on production

I think used some ssl certificate on production right ?
But I have no idea how to used them

If this code is failing:

then there’s something else wrong.

Please ensure that this is the JavaScript that is running in the browser.

Can I send an some images of my browser network issues tabs