-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cdb025c
commit c4e535c
Showing
9 changed files
with
132 additions
and
344 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,83 @@ | ||
| 'use client' | ||
| import { useEffect, useState } from "react" | ||
| import { z } from "zod" | ||
| import { rickAstleySchema } from "./stream/types" | ||
| import { | ||
| useEffect, | ||
| useState, | ||
| createContext, | ||
| ReactNode, | ||
| useContext, | ||
| useCallback, | ||
| } from 'react' | ||
| import { rickAstleySchema } from './stream/types' | ||
|
|
||
| // Create a context | ||
| const EventSourceContext = createContext<null | EventSource>(null) | ||
|
|
||
| export const EventSourceProvider = ({ children }: { children: ReactNode }) => { | ||
| const [eventSource, setEventSource] = useState<null | EventSource>(null) | ||
|
|
||
| export const StreamClient = () => { | ||
| const [lyric, setLyric] = useState<string>("") | ||
| const source = new EventSource("http://localhost:3000/stream") | ||
| useEffect(() => { | ||
| source.addEventListener('update', (event) => { | ||
| const parsed = rickAstleySchema.safeParse(event.data) | ||
| if (parsed.success) { | ||
| setLyric(parsed.data) | ||
| } | ||
| const source = new EventSource('http://localhost:3000/stream', { | ||
| withCredentials: true, | ||
| }) | ||
| setEventSource(source) | ||
|
|
||
| return () => { | ||
| source.close() | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <EventSourceContext.Provider value={eventSource}> | ||
| {children} | ||
| </EventSourceContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| const StreamClient = () => { | ||
| const [lyric, setLyric] = useState<string>('') | ||
|
|
||
| const eventSource = useContext(EventSourceContext) | ||
| const updateLyric = useCallback((event: MessageEvent) => { | ||
| const parsed = rickAstleySchema.safeParse(event.data) | ||
| if (parsed.success) { | ||
| setLyric(parsed.data) | ||
| if (parsed.data === 'fin') { | ||
| eventSource?.close() | ||
| } | ||
| } | ||
| }, []) | ||
|
|
||
| useEffect(() => { | ||
| if (eventSource) { | ||
| eventSource.onerror = (error) => { | ||
| console.error('EventSource failed:', error) | ||
| } | ||
| eventSource.addEventListener('update', updateLyric) | ||
|
|
||
| return () => { | ||
| eventSource.removeEventListener('update', updateLyric) | ||
| } | ||
| } | ||
| }, [eventSource]) | ||
|
|
||
| return lyric | ||
| } | ||
| } | ||
|
|
||
| const StreamClientComponent = () => { | ||
| const lyric = StreamClient() | ||
| return ( | ||
| <div className="flex flex-col items-center justify-center w-full min-h-[50vh]"> | ||
| <h1 className="text-6xl font-bold text-center">{lyric}</h1> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const StreamClientComponentWithProvider = () => { | ||
| return ( | ||
| <EventSourceProvider> | ||
| <StreamClientComponent /> | ||
| </EventSourceProvider> | ||
| ) | ||
| } | ||
|
|
||
| export default StreamClientComponentWithProvider |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.