Not able to connect portfolio stream feed

Developer API
1

Hey,

I am not able to connect the Portfolio stream feed in react js, getting 101 switching protocol, below is my code

import { useEffect, useState } from 'react';

interface FeedDataItem {
  id: string;
  timestamp: string;
  price: number;
  quantity: number;
  // Add other fields based on your data structure
}

export default function useOrderDataFeed(update_types: string) {
  const [feedData, setFeedData] = useState<FeedDataItem[]>([]);
  const token = localStorage.getItem('upstox/access_token');

  useEffect(() => {
    const url = `https://api.upstox.com/v2/feed/portfolio-stream-feed/authorize?update_types=${update_types}`;
    const headers = {
      'Api-Version': '2.0',
      Accept: 'application/json',
      Authorization: 'Bearer ' + token
    };

    fetch(url, {
      method: 'GET',
      headers: headers
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Network response was not ok: ${response.statusText}`);
        }
        return response.json();
      })
      .then((data) => {
        // Initialize WebSocket with URL obtained from API
        const ws = new WebSocket(data.data.authorized_redirect_uri);

        ws.onopen = () => {
          console.log('WebSocket connection established');
        };

        ws.onmessage = (event) => {
          const parsedData: FeedDataItem = JSON.parse(event.data);
          console.log('Received data:', parsedData);
        };

        ws.onclose = () => {
          console.log('Disconnected');
        };

        ws.onerror = (error) => {
          console.log('WebSocket error:', error);
        };

        // Cleanup function to close WebSocket connection when component unmounts
        return () => {
          ws.close();
        };
      })
      .catch((error) => {
        console.error(error.message);
      });
  }, [token, update_types]); // Include update_types in dependency array

  return {
    feedData
  };
}
2

@Akshay_Rana, please review our sample implementation of the Portfolio Streamer feed in React.js: React | Portfolio Streamer. Additionally, be sure to follow the steps outlined in React Websocket to get started. If you have any questions regarding the implementation, feel free to ask here.

Thank you.

3

Hey,
Applied the same code as sample implementation, still not worked, can you check the code and let me know what needs to be fixed