Trying to access from React to my websocket which is Django channels but it raises error "No route found"

Question

My websocket works because i tested it from django side white simple chat app. The route also works which is http://localhost:8000/chat/room. But It doesnt work on react side. It says No route found for path 'chat/myroom'. I've been trying to solve this for 2 hours, as a last hope, I wanted to ask here.

My routing.py file


from django.urls import re_path

from api import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

My roomPage.js file

`import React from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import { useParams } from "react-router-dom";


export default function RoomPage() {
  
  const { readyState } = useWebSocket("ws://127.0.0.1:8000/chat/myroom", {
    onOpen: () => {
      console.log("Connected!");
    },
    onClose: () => {
      console.log("Disconnected!");
    }
  });

  const connectionStatus = {
    [ReadyState.CONNECTING]: "Connecting",
    [ReadyState.OPEN]: "Open",
    [ReadyState.CLOSING]: "Closing",
    [ReadyState.CLOSED]: "Closed",
    [ReadyState.UNINSTANTIATED]: "Uninstantiated"
  }[readyState];

  return (
    <div>
      <span>The WebSocket is currently {connectionStatus}</span>
    </div>
  );
}`

I tried on django side and it worked! But react side doesn't working

You may find this thread useful - stackoverflow.com/questions/58088218/… — Wesley LeMahieu
– Wesley LeMahieu, Commented Feb 12, 2023 at 0:14

codekedy · Accepted Answer · 2023-02-12 13:40:49Z

0

After +10 hours i finally found the solution and I want to kill myself! The only problem is calling websocket without "end slash"

Wrong!

useWebSocket("ws://127.0.0.1:8000/chat/myroom"

Works

useWebSocket("ws://127.0.0.1:8000/chat/myroom/"

answered Feb 12, 2023 at 13:40

codekedy

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to access from React to my websocket which is Django channels but it raises error "No route found"

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related