How to effectively turn off the `app-message` event handler?

Options
zarally
zarally Member
in Q&A

Hi - I have a useEffect block like below, attempting to turn on/off the app-message event listener on the callObject depending on external variables:

const handleNewMessage = async (event) { … }


useEffect(() => {
    callObject?.off('app-message', handleNewMessage)
    if (
      transcriptionProperties?.isTranscribing &&
      isListening &&
      currentAIContext?.isConversation?.active
    ) {
      callObject?.on('app-message', handleNewMessage)
    }
  }, [callObject, transcriptionProperties, currentAIContext])

Unfortunately the callObject?.off('app-message', handleNewMessage) doesn't seem to be working because when I interrogate the callObject, I see events piling up:

image.png

I'm using these daily packages:

"@daily-co/daily-js": "^0.51.1",
"@daily-co/daily-react": "^0.12.0",

I haven't found a lot of documentation on the off method - am I using this correctly?

Best Answer

  • christian
    christian Dailynista
    Answer ✓
    Options

    You can also leverage useAppMessage, which registers an app-message event listener under the hood:

    useAppMessage({
  onAppMessage: useCallback((ev) ⇒ {
    if (
      transcriptionProperties?.isTranscribing &&
      isListening &&
      currentAIContext?.isConversation?.active
    ) {
      // …
    }
  }, [currentAIContext, isListening, transcriptionProperties]), // you might have to correct the dependencies
})

    The advantage over useDailyEvent is that it accepts a generic type for the app-message data. In case you pass structured data through app messages, you'd get full type support on ev.

Answers

  • christian
    christian Dailynista
    Options

    Hey @zarally,

    I think your best bet is utilizing useDailyEvent, so you don’t have to worry about this. You’d move your if check into the callback itself, so app messages are only handled, when you want it. Make sure to memoize the callback handler with useCallback to make it a stable reference across render cycles.

    Let us know how this goes!

    Christian

Categories