Created
June 13, 2025 18:18
-
-
Save JonathanConn/f1d0eb9fd206f60078e80383cf268a1a to your computer and use it in GitHub Desktop.
Channel Messaging Pseudo Code
This file contains hidden or 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
| // Parent Component (app/test/canvas/page.tsx) | |
| // 1. Setup State and Refs | |
| const iframeRef = useRef<HTMLIFrameElement>(null); | |
| const [messagePort, setMessagePort] = useState<MessagePort | null>(null); | |
| // 2. Message Sending Function | |
| function sendMessageToChild() { | |
| if (!messagePort) return; | |
| messagePort.postMessage("Hello from parent"); | |
| } | |
| // 3. MessageChannel Setup (in useEffect) | |
| useEffect(() => { | |
| // Create new MessageChannel | |
| const channel = new MessageChannel(); | |
| setMessagePort(channel.port1); | |
| // Setup message handler for port1 | |
| channel.port1.onmessage = (event) => { | |
| // Handle incoming messages from child | |
| if (event.data === "triggerScreenshot") { | |
| // Handle screenshot logic | |
| } | |
| // Handle other messages | |
| }; | |
| // Setup iframe load handler | |
| function handleIframeLoad() { | |
| // When iframe loads, send port2 to child | |
| iframeRef.current?.contentWindow?.postMessage( | |
| { type: "init-port" }, | |
| "*", | |
| [channel.port2] // Transfer port2 ownership to child | |
| ); | |
| } | |
| // Add load listener | |
| iframeRef.current?.addEventListener("load", handleIframeLoad); | |
| // Cleanup | |
| return () => { | |
| channel.port1.onmessage = null; | |
| iframeRef.current?.removeEventListener("load", handleIframeLoad); | |
| }; | |
| }, []); | |
| // Child Component (app/test/canvas/child/page.tsx) | |
| // 1. Setup Ref | |
| const portRef = useRef<MessagePort | null>(null); | |
| // 2. Message Sending Function | |
| function sendMessageToParent(msg?: string) { | |
| if (!portRef.current) return; | |
| portRef.current.postMessage(msg || "Message from child"); | |
| } | |
| // 3. MessageChannel Setup (in useEffect) | |
| useEffect(() => { | |
| // Listen for port initialization | |
| function handleInitPort(event: MessageEvent) { | |
| if ( | |
| event.data?.type === "init-port" && | |
| event.ports?.[0] | |
| ) { | |
| // Store port2 | |
| const port = event.ports[0]; | |
| portRef.current = port; | |
| // Setup message handler | |
| port.onmessage = (e: MessageEvent) => { | |
| // Handle incoming messages from parent | |
| const message = typeof e.data === "string" | |
| ? e.data | |
| : JSON.stringify(e.data); | |
| // Process message... | |
| }; | |
| } | |
| } | |
| // Add message listener | |
| window.addEventListener("message", handleInitPort); | |
| // Cleanup | |
| return () => { | |
| window.removeEventListener("message", handleInitPort); | |
| if (portRef.current) { | |
| portRef.current.onmessage = null; | |
| } | |
| }; | |
| }, []); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment