MS Bot Framework pass the values from server code (C# ) to front end code (JavaScript)

Question

I've been using MS bot framework - Chat bot in my project and I'm using QnAMaker in the back end for my chat bot, which is running in direct line bot channel.

On page load using JavaScript front end code, i'm sending some values say ABC to the bot (c# code - server hosted) via createStore method, after asking the question the bot will start querying it in the qnamaker using ABC as strict filters.

After sometime, In one some scenario, i will give input to BOT and change the values as XYZ. up to this everything is fine.

Now, I want to get the values XYZ and update that in my front end JavaScript Code.

In other words, i want to reverse the createstore method. or creating a communication from server side to client side

Is there any way to achieve my requirement.

Answer 1

You could leverage the same store in order to receive any activity from the bot (previously named the backchannel approach). For example, you could send an activity from your bot of the event type combined with a name and a value.

Bot (JavaScript)

await context.sendActivity({
    type: ActivityTypes.Event,
    name: 'sample:backchannel',
    value: 'XYZ'
});

Bot (C#)

await turnContext.SendActivityAsync(
    new Activity { 
        Type = ActivityTypes.Event, 
        Name = "sample:backchannel",
        Value = "XYZ"
    }
);

WebChat

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            const { activity } = action.payload;

            if (activity.type === 'event' && activity.name === 'sample:backchannel') {
                alert(activity.value); // Do whatever you want in your front-end
            }
        }

        return next(action);
    }
);

View full sample in BotFramework-Webchat documentation