CODEWITHSUNDEEP
djangodjango-channels
Samuel M.
Samuel M.

Reputation: 127

django channel set up routing

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.

Upvotes: 0

Views: 673

Answers (1)

hoefling
hoefling

Reputation: 66261

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));
}

Upvotes: 1

Related Questions