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