Merge pull request #3 from activescott/feat/emitter-event-target

feat: Migrates to the more browser-familiar EventTarget rather than the node-like EventEmitter. Also misc minor fixes made throughout as it is used in production

Author: activescott

.github/workflows/build.yaml

@@ -1,7 +1,8 @@
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ["main", "beta"]
+  pull_request:
+    branches: ["main", "beta"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -44,6 +45,7 @@ jobs:
           npx semantic-release@24
 
   pages:
+    if: github.ref == 'refs/heads/main'
     needs: build
     runs-on: ubuntu-latest
     permissions:

apps/browser-example/src/App.tsx

@@ -4,6 +4,7 @@ import { useKeyManager } from "./hooks/key"
 import { OfficialSDKWebSocketExample } from "./pages/OfficialSDKWebSocketExample"
 import { WebRTCExample } from "./pages/WebRTCExample"
 import { PageProps } from "./pages/props"
+import { RealtimeServerEventEvent } from "@tsorta/browser/WebRTC/events"
 
 export function App() {
   const [events, setEvents] = useState<any[]>([])
@@ -18,8 +19,9 @@ export function App() {
     }
   }, [key])
 
-  const onServerEvent = (event: any) =>
-    setEvents((events) => [...events, event])
+  const onServerEvent = (event: RealtimeServerEventEvent) => {
+    setEvents((events) => [...events, event.event])
+  }
 
   const [routes] = useState({
     WebRTC: {

apps/browser-example/src/pages/WebRTCExample.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useRef, useState } from "react"
+import { ReactNode, useCallback, useRef, useState } from "react"
 import { RealtimeSessionView } from "../components/RealtimeSessionView"
 import { RealtimeClient } from "@tsorta/browser/WebRTC"
 import { PageProps } from "./props"
@@ -14,30 +14,40 @@ export function WebRTCExample({
 
   const [client, setClient] = useState<RealtimeClient | undefined>(undefined)
 
-  async function startSession(): Promise<void> {
-    if (!apiKey) {
-      throw new Error("API key is required")
-    }
-    if (!audioElementRef?.current) {
-      throw new Error("Audio element not found")
-    }
-
-    const client = new RealtimeClient(
-      navigator,
-      () => apiKey,
-      audioElementRef.current,
-      { model: "gpt-4o-realtime-preview-2024-12-17" }
-    )
-    client.on("event", onServerEvent)
-    setClient(client)
-    await client.start()
-    onSessionStatusChanged("recording")
-  }
-
-  async function stopSession(): Promise<void> {
-    await client?.stop()
-    onSessionStatusChanged("stopped")
-  }
+  const startSession = useCallback(
+    async function startSession(): Promise<void> {
+      if (!apiKey) {
+        throw new Error("API key is required")
+      }
+      if (!audioElementRef?.current) {
+        throw new Error("Audio element not found")
+      }
+
+      const client = new RealtimeClient(
+        navigator,
+        () => apiKey,
+        audioElementRef.current,
+        { model: "gpt-4o-realtime-preview-2024-12-17" }
+      )
+      setClient(client)
+
+      client.addEventListener("serverEvent", (event) => {
+        onServerEvent(event)
+      })
+      await client.start()
+
+      onSessionStatusChanged("recording")
+    },
+    [apiKey, audioElementRef, onServerEvent, onSessionStatusChanged, navigator]
+  )
+
+  const stopSession = useCallback(
+    async function stopSession(): Promise<void> {
+      await client?.stop()
+      onSessionStatusChanged("stopped")
+    },
+    [client, onSessionStatusChanged]
+  )
 
   return (
     <div className="container">
@@ -46,7 +56,7 @@ export function WebRTCExample({
         This example demonstrates how to use the OpenAI Realtime API directly.
         It is using the TypeScript client from the article{" "}
         <a href="https://scott.willeke.com/ai-typescript-client-for-openai-realtime-api">
-          AI Learns to Listen: TypeScript Client for OpenAI’s Realtime API
+          AI Learns to Listen: TypeScript Client for OpenAI's Realtime API
         </a>{" "}
         by Scott Willeke.
       </p>