fix: laravel-echo

#2
letsescape · May 29, 2024 · 074c981 · 074c981
1 parent 3c8f7e3
commit 074c981
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 70 deletions.
diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,10 @@ const nextConfig = {
   env: {
     APP_API_URL: process.env.APP_API_URL,
     PUSHER_APP_KEY: process.env.PUSHER_APP_KEY,
+    REVERB_APP_KEY: process.env.REVERB_APP_KEY,
+    REVERB_HOST: process.env.REVERB_HOST,
+    REVERB_PORT: process.env.REVERB_PORT,
+    REVERB_SCHEME: process.env.REVERB_SCHEME,
   },
   images: {
     remotePatterns: [

diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
+import Echo from 'laravel-echo';
 import { useParams, useSearchParams } from 'next/navigation';
 import Pusher from 'pusher-js';
 import { useEffect, useRef } from 'react';
@@ -12,7 +13,7 @@ import Simulation from '@/app/components/Simulation';
 Pusher.logToConsole = process.env.NODE_ENV === 'test';
 
 export default function BanPickSimulator() {
-  const pusher = useRef<Pusher>();
+  const echoRef = useRef<Echo | null>(null);
   const params = useParams<{ id: string }>();
   const searchParams = useSearchParams();
   const id = Number(params.id || 0);
@@ -24,35 +25,49 @@ export default function BanPickSimulator() {
   });
 
   const { data: participantCreateData } = useQuery({
-    queryKey: ['participantCreate', id, pusher.current, team],
+    queryKey: ['participantCreate', id, echoRef.current, team],
     queryFn: () =>
       fetchParticipantCreate({
         id,
-        socket_id: (pusher.current as Pusher).connection.socket_id,
+        socket_id: (echoRef.current as Echo).socketId(),
         team,
       }),
-    enabled: !!id && !!pusher.current,
+    enabled: !!id && !!echoRef.current,
   });
 
   useEffect(() => {
-    pusher.current = new Pusher(process.env.PUSHER_APP_KEY, {
-      cluster: 'ap3',
-      authEndpoint: `${process.env.APP_API_URL}/auth/pusher`,
+    window.Pusher = Pusher;
+
+    echoRef.current = new Echo({
+      broadcaster: 'reverb',
+      key: process.env.REVERB_APP_KEY,
+      wsHost: process.env.REVERB_HOST,
+      wsPort: process.env.REVERB_PORT ?? 80,
+      wssPort: process.env.REVERB_PORT ?? 443,
+      forceTLS: (process.env.REVERB_SCHEME ?? 'https') === 'https',
+      enabledTransports: ['ws', 'wss'],
+      auth: {
+        headers: {
+          Authorization: 'TOKEN',
+        },
+      },
     });
 
     return () => {
-      pusher.current?.disconnect();
+      window.Pusher = undefined;
+      echoRef.current?.disconnect();
+      echoRef.current = null;
     };
   }, []);
 
-  if (!pusher.current || isLoading) return null;
+  if (!echoRef.current || isLoading) return null;
 
   return (
     <Simulation
       data={simulationData}
       initialParticipants={participantCreateData?.participants || []}
-      socketId={pusher.current.connection.socket_id}
-      pusher={pusher.current}
+      socketId={echoRef.current.socketId()}
+      echo={echoRef.current}
     />
   );
 }
diff --git a/src/app/components/Simulation/ChampionSearch/index.tsx b/src/app/components/Simulation/ChampionSearch/index.tsx
@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import React, { useState } from 'react';
 
 import {
@@ -7,8 +6,6 @@ import {
 } from '@/app/components/Simulation/ChampionSearch/styled';
 import { InputSearchProp } from '@/app/components/Simulation/ChampionSearch/types';
 
-import searchIcon from '@/assets/icons/ico-search-bk.svg';
-
 export default function ChampionSearch({
   onSubmit,
   variant,
@@ -29,7 +26,7 @@ export default function ChampionSearch({
         onChange={e => setInput(e.target.value)}
       />
       <Button type="submit">
-        <Image src={searchIcon} alt="검색" width={11} height={11} />
+        {/*<Image src={searchIcon} alt="검색" width={11} height={11} />*/}
       </Button>
     </SearchWrap>
   );

diff --git a/src/app/components/Simulation/index.tsx b/src/app/components/Simulation/index.tsx
@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
+import Echo from 'laravel-echo';
 import { useParams, useRouter } from 'next/navigation';
-import Pusher from 'pusher-js';
 import { useEffect, useState } from 'react';
 
 import { fetchParticipantUpdate } from '@/app/api/participant';
@@ -19,14 +19,14 @@ interface SimulationProps {
   data: SimulationData;
   initialParticipants: ParticipantData[];
   socketId: string;
-  pusher: Pusher;
+  echo: Echo;
 }
 
 export default function Simulation({
   data,
   initialParticipants,
   socketId,
-  pusher,
+  echo,
 }: SimulationProps) {
   const router = useRouter();
   const params = useParams<{ id: string; password: string }>();
@@ -86,62 +86,56 @@ export default function Simulation({
       .find((u: any) => u.socket_id === socketId);
     setCurrentParticipant(participant || '');
 
-    const channel = pusher.subscribe(`presence-simulations.${id}`);
-
-    channel.bind('pusher:subscription_error', () => {
-      alert('오류');
-      router.push('/');
-    });
-
-    channel.bind('simulation.processed', (res: any) => {
-      if (res.is_shutdown) {
-        setStatus(SimulationStatus.ShutDown);
-        alert('방 삭제 됨');
-        router.push('/');
-      }
-    });
-
-    channel.bind('simulation.participant.processed', (data: any) => {
-      const participants = data.participants.filter(
-        (u: any) => u.team !== null
-      );
-      setParticipants(participants);
-
-      const spectates = data.participants.filter((u: any) => u.team === null);
-      setSpectateParticipants(spectates);
-
-      if (data.is_start && status === SimulationStatus.Ready) {
-        setStatus(SimulationStatus.InProgress);
-      }
-    });
-
-    channel.bind('simulation.ended', (res: any) => {
-      if (res.is_shutdown) {
-        setStatus(SimulationStatus.ShutDown);
-        alert('종료 됨');
+    echo.private(`presence-simulations.${id}`)
+      .error(() => {
+        alert('오류');
         router.push('/');
-      }
-
-      setStatus(SimulationStatus.Swap);
-    });
-
-    channel.bind('ban-pick.processed', (res: any) => {
-      setBanPickData({
-        ...res['ban-pick'],
-        turn: res.turn,
-        img_default: res.champion?.img_default || '',
-      });
-    });
-
-    channel.bind('ban-pick.updated', (data: any) => {
-      setSwapData({
-        ...data,
-        team: data.before.team,
+      })
+      .listen('simulation.processed', (res: any) => {
+        if (res.is_shutdown) {
+          setStatus(SimulationStatus.ShutDown);
+          alert('방 삭제 됨');
+          router.push('/');
+        }
+      })
+      .listen('simulation.participant.processed', (data: any) => {
+        const participants = data.participants.filter(
+          (u: any) => u.team !== null
+        );
+        setParticipants(participants);
+
+        const spectates = data.participants.filter((u: any) => u.team === null);
+        setSpectateParticipants(spectates);
+
+        if (data.is_start && status === SimulationStatus.Ready) {
+          setStatus(SimulationStatus.InProgress);
+        }
+      })
+      .listen('simulation.ended', (res: any) => {
+        if (res.is_shutdown) {
+          setStatus(SimulationStatus.ShutDown);
+          alert('종료 됨');
+          router.push('/');
+        }
+
+        setStatus(SimulationStatus.Swap);
+      })
+      .listen('ban-pick.processed', (res: any) => {
+        setBanPickData({
+          ...res['ban-pick'],
+          turn: res.turn,
+          img_default: res.champion?.img_default || '',
+        });
+      })
+      .listen('ban-pick.updated', (data: any) => {
+        setSwapData({
+          ...data,
+          team: data.before.team,
+        });
       });
-    });
 
     return () => {
-      channel.disconnect();
+      echo.leave(`presence-simulations.${id}`);
     };
   }, []);
 

diff --git a/src/app/types/env.d.ts b/src/app/types/env.d.ts
@@ -2,5 +2,9 @@ declare module NodeJS {
   interface ProcessEnv {
     APP_API_URL: string;
     PUSHER_APP_KEY: string;
+    REVERB_APP_KEY: string,
+    REVERB_HOST: string,
+    REVERB_PORT: string,
+    REVERB_SCHEME: string,
   }
 }
diff --git a/src/app/types/global.d.ts b/src/app/types/global.d.ts
@@ -0,0 +1,12 @@
+import Echo from 'laravel-echo';
+
+declare global {
+  interface Window {
+    Pusher: any;
+    Echo?: Echo;
+  }
+}
+
+declare module 'laravel-echo' {
+  interface Echo {}
+}