Django Channels Auto Reconnect Not Working

Using Django Async/Channels
1

Hello,
I am testing a simple websocket functionality and wanted to know if channels support the auto reconnect feature? Below is my JS file which has websocket connection. When I stop the development server, I immediately see the message “You are disconnected” on the webpage. However when I start the development server back, I don’t see the message “You are connected” on webpage until I refresh the page.

        <script>
      var socket = new WebSocket('ws://' + window.location.host + '/ws/myapp/');

      socket.onopen = function(event) {
              console.log("Connected");
              document.querySelector('#display').innerText = "You are connected";
      };

      socket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        console.log(event.data);
        document.querySelector('#mydisplay').value = data.message;
      };

      socket.onclose = function(event) {
              console.log("disconnected");
              document.querySelector('#display').innerText = "You are disconnected";
        };
2

That’s entirely up to your JavaScript client. Django/Channels has nothing to do with it.

The server cannot initiate any websocket connections to the browser, the browser is always responsible for opening the connection.

That means you need to write your JavaScript client to detect when the connection has been lost and then attempt to reconnect.

3

Hi @KenWhitesell ,
Thanks for your reply. I have used socket.io earlier with Flask and it has builtin feature to detect auto reconnect without need to write any additonal JS. I was wondering if similar is built into Channels?

Thanks.

4

Channels has nothing to do with this. It is entirely and solely up to the JavaScript in the browser to handle reconnects.

In the situation you’re referencing above, the client side of socket.io would be what handles it there.

This is something that cannot be initiated by the server.

5

Thanks for the information. Are there any third party extensions(if any)for it or do we need to roll down our own JS code for this?

6

That would depend upon what (if any) JavaScript framework you’re using for your websocket. (Side note: I use the websocket extension in HTMX, it handles this for me.)

If you’re writing your own “bare-metal” websocket interface, then yes, you’re probably best off adding it yourself. It’s going to be as little as 3 lines of JavaScript in the trivial case, and maybe 10 if you get really sophisticated.

It’s handled by handling the websocket “close” event. If that event is fired, you could turn right around and try to reestablish the connection, perhaps with a pause.

If you’re looking for something more sophisticated, there are a number of libraries out there that enhance the basic functionality of a WebSocket in the browser.

7

Ok, for now I just wrote a simple JS code as below to reconnect to websocket after the socket.onclose event by creating a new socket and setting timeout of say 5 seconds.

socket.onclose = function(event) {
              console.log("disconnected");
              document.querySelector('#display').innerText = "You are disconnected";
              socket = null;
              setTimeout(connect, 5000)
        };