Using laravel-echo in reactjs

OrdersComponent.tsx

import React, { FC } from 'react';
import { useSocket } from '@myapp/hooks';
import {Order} from '@myapp/models';


export const OrdersComponent: FC = () => {

  const [orders,setOrders] = useState<Order[]>();
  
  function addNewOrder(neworder:Order) {
    setOrders(prevState => [neworder].concat(prevState));
  }
  
  useSocket({
    type: "ORDER_UPDATED",
    callBack: (payload: Order) => {
     addNewOrder(payload)
    }
  });
  
  }

socketHook.ts

import { useEffect } from 'react';

import { createSocketConnection } from '@myapp/services';
import { useAppContext } from '@myapp/app-context';

function listen(callBack: (payload: any) => void, channel: string, event: string) {
  window.Echo.private(channel).listen(event, (payload: any) => {
    callBack(payload);
  });

  return function cleanUp() {
    window.Echo.leaveChannel(`private-${channel}`);
  };
}

type Options = {
  type: 'ORDER_UPDATED' | 'ORDER_UPDATED_NOTICE' | 'NEW_ORDER';
  callBack: (payload: any) => void;
};

export const useSocket = ({ type, callBack }: Options) => {
  const [appState] = useAppContext();
  useEffect(() => {
    createSocketConnection(appState.authentication.accessToken);
    switch (type) {
      case 'NEW_ORDER': {
        return listen(callBack, `customer.${appState.user.id}.orders`, '.new_order');
      }
      case 'ORDER_UPDATED': {
        return listen(callBack, `customer.${appState.user.id}.orders`, '.order_updated');
      }
      case 'ORDER_UPDATED_NOTICE': {
        return listen(callBack, `customer.${appState.user.id}.notice`, '.order_update_notice');
      }
    }
  });
};

socketService.ts

import Echo from "laravel-echo";
import io from "socket.io-client";

import configs from "@myapp/configs";

declare global {
  interface Window {
    io: SocketIOClientStatic;
    Echo: Echo;
  }
}

window.io = io;

export function createSocketConnection(token: string) {
  if (!window.Echo) {
    window.Echo = new Echo({
      broadcaster: "socket.io",
      host: configs.app.host,
      transports: ["websocket", "polling", "flashsocket"],
      auth: {
        headers: {
          Authorization: `Bearer ${token}`
        }
      }
    });
  }
}

so useful! thanks 👍 💯

so useful! thanks

it's my pleasure

could be more awesome if we had the whole codebase😂
but anyway, it was a huge help,thanks man❤😍👍

could be more awesome if we had the whole codebase
but anyway, it was a huge help,thanks man
Excuse me but i cant share whole base code (because of NDA ) and your welcome, helping you is my pleasure 😘😘😘😘

Hello, I need to create a React project that will work with a laravel api that needs to have real time running.
From what I understand from your code it is possible to install laravel echo and laravel socket.io in react, correct?!
Could you give me the install commands please?

Thanks a lot for the solution! Saved me a lot of time))
Just need to add to useEffect depends [] (in useSocket).
Thanks man!

Awesome. Thank you.