Websocket connection failing - reactjs

Question

The WebSocket connection to 'ws://localhost:3000/ws/api/stocks_prices/AAPL/' failed: WebSocket is closed before the connection is established.
React frontend
views.js
useEffect(() => {
const socket = new WebSocket(
`ws://${window.location.host}/ws/api/stocks_prices/${symbol}/`
);
console.log("socket", socket);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
setStockPrices((prevStockPrices) => ({
...prevStockPrices,
data: [data, ...prevStockPrices.data.slice(0, 4)],
}));
console.log("websocket data", data);
};
return () => {
socket.close();
console.log("WebSocket closed");
};
}, [symbol]);
Using Django for backend
routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/api/stocks_prices/(?P<symbol>\w+)/$', consumers.StockConsumer.as_asgi()),
]
consumer.py :
from channels.generic.websocket import AsyncWebsocketConsumer
import json
import yfinance as yf
class StockConsumer(AsyncWebsocketConsumer):
async def connect(self):
self.stock_name = self.scope['url_route']['kwargs']['stock_name']
self.stock_group_name = 'stocks_prices/%s' % self.stock_name
# Join room group
await self.channel_layer.group_add(
self.stock_group_name,
self.channel_name
)
await self.accept()
async def disconnect(self, close_code):
# Leave room group
await self.channel_layer.group_discard(
self.stock_group_name,
self.channel_name
)
async def receive(self, text_data):
text_data_json = json.loads(text_data)
stock_name = text_data_json['stock_name']
# Fetch real-time stock data
ticker = yf.Ticker(stock_name)
data = ticker.history(period='1d')
stock_price = {
'stock_name': stock_name,
'price': data['Close'].iloc[-1],
}
# Send real-time stock data to the client
await self.channel_layer.group_send(
self.stock_group_name,
{
'type': 'stock_price',
'price': stock_price
}
)
# Receive message from room group
async def stock_price(self, event):
stock_price = event['price']
# Send real-time stock data to the client
await self.send(text_data=json.dumps({
'stock_name': stock_price['stock_name'],
'price': stock_price['price']
}))
views.py :
#api_view(['GET'])
def get_stock(request, symbol):
ticker = yf.Ticker(symbol)
data = ticker.history(period='1d')
stocks_prices = {
'symbol': symbol,
'price': data['Close'].iloc[-1],
'volume': data['Volume'].iloc[-1],
'datetime': data.index[-1].isoformat(),
}
return Response(stocks_prices)
I am getting this in my console
WebSocket closed
View.js:127 socket WebSocket {url: 'ws://localhost:3000/ws/api/stocks_prices/AAPL/', readyState: 0, bufferedAmount: 0, onopen: null, onerror: null, …}binaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: nullonmessage: event => {…}onopen: nullprotocol: ""readyState: 0url: "ws://localhost:3000/ws/api/stocks_prices/AAPL/"[[Prototype]]: WebSocket
View.js:126
WebSocket connection to 'ws://localhost:3000/ws/api/stocks_prices/AAPL/' failed: WebSocket opening handshake timed out
I am trying to establish websocket connection and I have enabled CORS.