django channel set up routing - django

Question

I'm learning how to setup a websocket connection with django-channel, i've got this setup in routing.py
from channels import route
from gallery import socket as sock
channel_routing = [
# Wire up websocket channels to our consumers:
route("websocket.connect", sock.ws_connect, path=r"^/render-status/$"),
route("websocket.receive", sock.ws_receive, , path=r"^/render-status/$"),
]
and the following javascript
// When we're using HTTPS, use WSS too.
var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
var ws_path = ws_scheme + '://' + window.location.host + '/render-status/';
console.log("Connecting to " + ws_path)
var socket = new ReconnectingWebSocket(ws_path);
socket.onmessage = function(message) {
console.log("Got message: " + message.data);
var data = JSON.parse(message.data);
// if action is started, add new item to table
if (data.action == "started") {
}
// if action is completed, just update the status
else if (data.action == "completed"){
}
};
var message = {
action: "incomplete",
job_name: "10",
};
socket.send(JSON.stringify(message));
tried it out and there's a failure in connecting (from the console)
colorpicker2.js:565 Connecting to ws://127.0.0.1:8000/render-status/
reconnecting-websocket.min.js:1 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
at a.send (http://127.0.0.1:8000/static/js/reconnecting-websocket.min.js:1:2611)
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/static/js/colorpicker2.js:584:11)
at k (http://127.0.0.1:8000/static/js/jquery.js:15:16962)
at Object.fireWith [as resolveWith] (http://127.0.0.1:8000/static/js/jquery.js:15:17720)
at Function.ready (http://127.0.0.1:8000/static/js/jquery.js:15:12435)
at HTMLDocument.D (http://127.0.0.1:8000/static/js/jquery.js:15:9840)
send # reconnecting-websocket.min.js:1
(anonymous) # colorpicker2.js:584
k # jquery.js:15
fireWith # jquery.js:15
ready # jquery.js:15
D # jquery.js:15
reconnecting-websocket.min.js:1 WebSocket connection to 'ws://127.0.0.1:8000/render-status/' failed: Error during WebSocket handshake: Unexpected response code: 404
open # reconnecting-websocket.min.js:1
a # reconnecting-websocket.min.js:1
(anonymous) # colorpicker2.js:566
k # jquery.js:15
fireWith # jquery.js:15
ready # jquery.js:15
D # jquery.js:15
22reconnecting-websocket.min.js:1 WebSocket connection to 'ws://127.0.0.1:8000/render-status/' failed: Error during WebSocket handshake: Unexpected response code: 404
open # reconnecting-websocket.min.js:1
(anonymous) # reconnecting-websocket.min.js:1
I've also checked the documentation https://channels.readthedocs.io/en/stable/routing.html just to be sure this is how you set a path.

Answer 1

Your routing is correct, but you are sending the message too soon, while the socket is still trying to connect. Use the onopen callback to ensure the message is sent only after the connection was established:
socket.onopen = function() {
var message = {
action: "incomplete",
job_name: "10",
};
socket.send(JSON.stringify(message));
}