Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. for webrtc

Question

I created a script for the conference using WebSocket. But after the execution, it gives the same error. All ports and addresses are correct. The error code in the console is as follows.

Error :

Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. at sendData (https:Domain./sender/sender.js:26:15) at sendUsername (https://Domain./sender/sender.js:20:5) at HTMLButtonElement.onclick (https://Domain/sender/sender.html:12:38) sendData @ sender.js:26 sendUsername @ sender.js:20 onclick @ sender.html:12

The code I ran. The camera also turns on, but no room is built, and I think the main problem is because of the data.

const webSocket = new WebSocket("wss://domain:443")

webSocket.onmessage = (event) => {
    handleSignallingData(JSON.parse(event.data))
}

function handleSignallingData(data) {
    switch (data.type) {
        case "answer":
            peerConn.setRemoteDescription(data.answer)
            break
        case "candidate":
            peerConn.addIceCandidate(data.candidate)
    }
}

let username
function sendUsername() {
    username = document.getElementById("username-input").value
    sendData({
        type: "store_user"
    })
}
function sendData(data) {
    data.username = username
    webSocket.send(JSON.stringify(data))
}


let localStream
let peerConn
function startCall() {
    document.getElementById("video-call-div")
        .style.display = "inline"

    navigator.getUserMedia({
        video: {
            frameRate: 24,
            width: {
                min: 480, ideal: 720, max: 1280
            },
            aspectRatio: 1.33333
        },
        audio: true
    }, (stream) => {
        localStream = stream
        document.getElementById("local-video").srcObject = localStream

        let configuration = {
            iceServers: [
                {
                    "urls": ["stun:stun.l.google.com:19302",
                        "stun:stun1.l.google.com:19302",
                        "stun:stun2.l.google.com:19302"]
                }
            ]
        }

        peerConn = new RTCPeerConnection(configuration)
        peerConn.addStream(localStream)

        peerConn.onaddstream = (e) => {
            document.getElementById("remote-video")
                .srcObject = e.stream
        }

        peerConn.onicecandidate = ((e) => {
            if (e.candidate == null)
                return
            sendData({
                type: "store_candidate",
                candidate: e.candidate
            })
        })

        createAndSendOffer()
    }, (error) => {
        console.log(error)
    })
}

function createAndSendOffer() {
    peerConn.createOffer((offer) => {
        sendData({
            type: "store_offer",
            offer: offer
        })

        peerConn.setLocalDescription(offer)
    }, (error) => {
        console.log(error)
    })
}

let isVideo = true
function muteVideo() {
    isVideo = !isVideo
    localStream.getVideoTracks()[0].enabled = isVideo
}

Answer 1

As the error says, you trying to send a message via websocket before it's connected. You should wait until it's open, it could be done with webSocket.onopen callback, see this post.