Django channels and react error: WebSocket connection to 'ws://localhost:8000/myURL' failed: WebSocket is closed before the connection is established

Question

First-of-all, I still don't know whether the issue is on front-end or back-end side, but it seems like back-end is more likely.

I have built a Django application using django-channels to send packets of data to a front-end react.js SPA via websocket connection; I've also built a simple vanilla-javascript client previously (served by Django), and it doesn't have this issue.

The issue is, I get this error in firefox console upon open (they switch places at random times, indicating they happen at the same time):

Firefox can't establish a connection to the server at ws://localhost:8000/ws/XY_Broadcast/. App.jsx:32
The connection to ws://localhost:8000/ws/XY_Broadcast/ was interrupted while the page was loading. App.jsx:32

using Brave browser (chromium-based), I get this:

(warning) App.jsx:69 WebSocket connection to 'ws://localhost:8000/ws/XY_Broadcast' failed: WebSocket is closed before the connection is established.
(error)App.jsx:38 WebSocket connection to 'ws://localhost:8000/ws/XY_Broadcast' failed: 

The odd thing is, though, that my page seems to open and work - it prints messages both upon open and upon receiving data after some time. The websocket error code is 1006.

What I have tried:

• A few browser extensions for testing websocket connection - none of them would connect (which is why I think it's a back-end issue).
• I also don't think the issue is with CORS - I've had issues with it before (my front-end apps display wouldn't display an image they get from an HTTP URL at backend) and I have an extension to turn it ON/OFF in browser - it doesn't affect anything.
• I tried switching ASGI_APPLICATION Django setting to myproject.asgi.application as mentioned in django-channels docs, but it didn't help, so I set it back to myApp.routing.application
• I tried running the project with daphne instead of runserver, in my docker-compose file, I have daphne -b 0.0.0.0 -p 8000 some_demo_django.asgi:application. The React pages open up and display the image fetched from back-end, but the errors persist. Additionally, though, old (vanilla JS pages) won't load, I get 500 Internal Server Error Daphne HTTP processing error, with the following traceback from the backend:

  File "/usr/local/lib/python3.10/site-packages/daphne/http_protocol.py", line 163, in process
    self.application_queue = yield maybeDeferred(
TypeError: ASGIHandler.__call__() missing 2 required positional arguments: 'receive' and 'send'

172.19.0.1:41728 - - [13/Oct/2022:00:06:48] "GET /dev_td/" 500 452
172.19.0.1:41718 - - [13/Oct/2022:00:06:49] "WSDISCONNECT /ws/XY_Broadcast" - -
2022-10-13 00:06:49,429 ERROR    Traceback (most recent call last):
  File "/usr/local/lib/python3.10/site-packages/daphne/http_protocol.py", line 163, in process
    self.application_queue = yield maybeDeferred(
TypeError: ASGIHandler.__call__() missing 2 required positional arguments: 'receive' and 'send'
172.19.0.1:41728 - - [13/Oct/2022:00:06:49] "GET /dev_td/" 500 452
2022-10-13 00:06:55,721 ERROR    Traceback (most recent call last):
  File "/usr/local/lib/python3.10/site-packages/daphne/http_protocol.py", line 163, in process
    self.application_queue = yield maybeDeferred(
TypeError: ASGIHandler.__call__() missing 2 required positional arguments: 'receive' and 'send'

The React code is:

export default function App() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8000/ws/XY_Broadcast/');
    ws.onopen = (event) => {
      console.log(event.data)
      console.log('ws opened')
    };
    ws.onmessage = function (event) {
        console.log(event.data)
    };
    ws.onclose = function(event){
      console.log("closed, code is:",event.code)
    };
    return () => ws.close();
  }, []);

The previously-built vanilla JavaScript client code is:

  var XY_Broadcast = new WebSocket(
    'ws://' + window.location.host + '/ws/XY_Broadcast/');

  XY_Broadcast.onmessage = function(e) {
    let loc_data = JSON.parse(e.data);

  ... (my logic) 

  XY_Broadcast.onclose = function (e) {
    console.error('XY_Broadcast socket connection closed');
    for(var i=0; i<e.length; i++) {
      console.log(e)
    }
  };

I've browsed through all the answers I could find all over the internet and had discussed the issue with the senior developers in my company, but no success.

Answer 1

it happens when you attempts to close the WebSocket connection ws.close() before it's had a chance to actually connect.

Try changing useEffect cleanup function :

return () => ws.close();

to :

return () => {
            if (socket.readyState === 1) { 
                socket.close();
            }