​
Adding Event Listeners

After initializing the Anam client, you can register event listeners using the addListener method:

anamClient.addListener(AnamEvent.CONNECTION_ESTABLISHED, () => {
  console.log('Connection Established');
});

anamClient.addListener(AnamEvent.MESSAGE_HISTORY_UPDATED, (messages) => {
  console.log('Updated Messages:', messages);
});

​
Available Events

Event NameDescription
CONNECTION_ESTABLISHEDCalled when the direct connection between the browser and the Anam Engine has been established
CONNECTION_CLOSEDCalled when the direct connection between the browser and the Anam Engine has been closed
VIDEO_PLAY_STARTEDFired when the first frames start playing during video streaming. Useful for removing loading indicators
MESSAGE_HISTORY_UPDATEDCalled with the message history transcription each time the user or persona finishes speaking
MESSAGE_STREAM_EVENT_RECEIVEDFor persona speech: Updated with each transcribed chunk as the persona speaks
For user speech: Updated with complete transcription once they finish speaking
INPUT_AUDIO_STREAM_STARTEDCalled with the user’s input audio stream when microphone input has been initialized
TALK_STREAM_INTERRUPTEDCalled when the user interrupts a TalkMessageStream by speaking. Includes the interrupted stream’s correlationId

​
Example Usage

​
Loading States

Use connection events to manage loading states:

anamClient.addListener(AnamEvent.CONNECTION_ESTABLISHED, () => {
  setIsConnecting(false);
});

anamClient.addListener(AnamEvent.VIDEO_PLAY_STARTED, () => {
  setIsLoading(false);
});

​
Message History

Track conversation history:

anamClient.addListener(AnamEvent.MESSAGE_HISTORY_UPDATED, (messages) => {
  setConversationHistory(messages);
});

​
Real-time Transcription

Monitor speech in real-time:

anamClient.addListener(AnamEvent.MESSAGE_STREAM_EVENT_RECEIVED, (event) => {
  if (event.type === 'persona') {
    updatePersonaSpeech(event.text);
  } else {
    updateUserSpeech(event.text);
  }
});

Was this page helpful?

Session Configuration