Cant get Activities on start of conversation directlinejs

Question

I am using Azure Directlinejs to connect to my bot. I am able to establish a connection with my bot. I am unable to recieve activities when the connection is successfull. I am able to get the activities once I subscribe to PostActivity

  case ConnectionStatus.Online:           // successfully connected to the converstaion. Connection is healthy so far as we know.
                                            console.log('Online');
                                            debugger;
                                            // this.directLine.postActivity({
                                            //     from: { id: this.user.email, name: this.user.email }, // required (from.name is optional)
                                            //     type: 'message',
                                            //     text: 'home'
                                            // }).subscribe( );
                                            this.directLine.activity$
                                            .subscribe(
                                                activity => console.log("received activity ", activity),
                                                error => {
                                                    console.log(error);
                                                }
                                            );
                                            break;

Answer 1

It looks like you are the using the connectionStatus$ observable to determine whether or not Web Chat should subscribe to the activity$ observable. This is incorrect.

ConnectionStatus is used only to track the state of DirectLine as it changes. And, subsequently, to initiate certain actions within the client when different states are met ('online', for example).

Instead, your setup should be something like the below. This snippet is taken from a very simplified custom DirectLine client I run when testing. By subscribing to activity$, I post the messages to the page as they arrive from either the bot or the user. Subscribing to the connectionStatus$ allows me to log the state and the DirectLine object in the console for inspection.

const sendBox = document.querySelector( '#sendBox' );
const sendBtn = document.querySelector( '#sendButton' );
const transcriptWindow = document.querySelector( '.transcript_list' );

// DIRECTLINE SECRET SHOULD NOT BE USED IN A PRODUCTION ENVIRONMENT
const DirectLine = window.DirectLine;
const directLine = new DirectLine.DirectLine( {
  secret: <<SECRET>>
} );

directLine.activity$
  .subscribe(
    activity => {
      console.log( "received activity ", activity );

      if ( activity.from.id === '<<BOT ID>>' ) {
        const messageToSend = activity.text || JSON.stringify( activity.attachments[ 0 ].content?.speak );
        const el = `<li>Bot: ${ messageToSend }</li>`;
        transcriptWindow.innerHTML += el;
      } else {
        const messageToSend = sendBox.value;
        const el = `<li>User: ${ messageToSend }</li>`;
        transcriptWindow.innerHTML += el;
      }
    }
  );

directLine.connectionStatus$
  .subscribe( async connectionStatus => {
    switch ( connectionStatus ) {
      case ConnectionStatus.Uninitialized:
        console.log( 'CONNECTION_STATUS => UNINITIALIZED ', directLine );
        break;
      case ConnectionStatus.Connecting:
        console.log( 'CONNECTION_STATUS => CONNECTING ', directLine );
        break;
      case ConnectionStatus.Online:
        console.log( 'CONNECTION_STATUS => ONLINE ', directLine );
        break;
      case ConnectionStatus.ExpiredToken:
        console.log( 'CONNECTION_STATUS => EXPIRED TOKEN ', directLine );
        break;
      case ConnectionStatus.FailedToConnect:
        console.log( 'CONNECTION_STATUS => FAILED TO CONNECT ', directLine );
        break;
      case ConnectionStatus.Ended:
        console.log( 'CONNECTION_STATUS => ENDED ', directLine );
        break;
    }
  } );

Hope of help!