WebSocket closes without opening, error 1006

Question

I'm working on a Django realtime chat app but for some reason I can not get my WebSocket to connect on chrome nor Firefox. I get the error message :

room.js:43 WebSocket connection to 'ws://127.0.0.1:8000/ws/chat/%22default%22/' failed: room.js:52 WebSocket ERROR room.js:57 connection closed. 1006 room.js:59 Reconnecting...

my websocket:

function connect(){
    chatSocket = new WebSocket("ws://" + window.location.host + "/ws/chat/" + roomName + "/");
    

    chatSocket.onopen = (event) => {
        console.log("SOCKET CONNECTED!!!!");
    }

    chatSocket.onerror = (err) => {
        console.log("WebSocket ERROR");
        //chatSocket.close();
    }

    chatSocket.onclose = (event) => {
        console.log(" connection closed.", event.reason, event.code);
        setTimeout(() => {
            console.log("Reconnecting...");
            connect();
        }, 2000);
    };

    chatSocket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log(data);

        if (data.type ===  "chat_message") {
            chatLog.value += data.message + "\n";
        }
        else{
            console.log("Wrong message type!");
        }
        // scroll 'chatLog' to the bottom
        chatLog.scrollTop = chatLog.scrollHeight;
    };

    
    console.log(chatSocket)

}

I had a similar problem with a different chat app earlier, script.js:

const chatSocket = new WebSocket("ws://" + window.location.host + "/");

chatSocket.onopen = (e) =>  console.log("user connected successfully",e)
chatSocket.onclose = (e) => console.log("user ejected from room", e)


document.querySelector("#id_message_send_input").focus()
document.querySelector("#id_message_send_input").onkeyup = (event) =>{
    if (event.keycode == "13"){
        document.querySelector("#id_message_send_button").click();
    }
}
document.querySelector("#id_message_send_button").onclick = (event) =>{
    const messageInput = document.querySelector("#id_message_send_input").value
    chatSocket.send(JSON.stringify({message: messageInput, username : request.user.username}))
}

chatSocket.onmessage = (event) => {
    const data = JSON.parse(event.data)
    let messageDiv = document.createElement('div')
    messageDiv.innerHTML = data.username +  ":->" + data.message
    document.querySelector("#id_message_send_inout").value = ""
    document.querySelector("#id_chat_item_container").appendChild(messageDiv)
}

chatSocket.onerror = (err) => {
    console.log("WebSocket error: " + err.message);
    //console.log("Closing the socket.");
    chatSocket.close();
}

According to this response error code 1006 is an issue with my WebSocket code but after looking at documentation and various examples, I can't seem to find the issue . I also get an empty string from 'event.reason' in the close event, so I'm stumped. Any help would be great :)

What I've tried:

• restarting Firefox in incognito/troubleshoot mode

• disabling my computer's firewall

• disabling all extensions/ad-blockers on chrome/firefox

• running my Django server on a different port other than 8000