CODEWITHSUNDEEP
botframework
Bill Software Engineer
Bill Software Engineer

Reputation: 7782

In Bot Framework Web Chat, how do I connect to my bot server?

All the tutorial are connecting to direct line, what about using my own bot server? How do I connect in javascript?

I already setup server side:

// Setup BotFramework
var connector = new Builder.ChatConnector({

    appId: "a8...",
    appPassword: "ko...",
    openIdMetadata: process.env.BotOpenIdMetadata

});

// Setup Bot
var bot = new Builder.UniversalBot(connector);
bot.set('storage', new Builder.MemoryBotStorage());
// Setup Server
var server = Restify.createServer();

server.listen(process.env.port || process.env.PORT || 4000, function () {
    console.log("Listening on port "+(process.env.port || process.env.PORT || 4000));
});
server.post('/api/messages', connector.listen());

On the client side, here is what I currently got using direct line:

<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>

<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>

<script>
    const params = BotChat.queryParams(location.search);

    const speechOptions = {
        speechRecognizer: new BotChat.Speech.BrowserSpeechRecognizer(),
        speechSynthesizer: new BotChat.Speech.BrowserSpeechSynthesizer()
    };


    BotChat.App({
        showUploadButton: false,
        directLine: { secret: '_bm...' },
        bot: { id: 'a8...' },
        locale: params['locale'],
        resize: 'detect',
        speechOptions: speechOptions,
        user: {
            id: 'WebChatDemoUser',
            name: 'You'
        },
    }, document.getElementById('ChatBot'));
    var header = document.getElementsByClassName("wc-header");
    header[0].innerHTML = "<span>Chat</span>"
</script>

So this work, but it connect directly to the bot framework, I need to connect to my server like this:

http://localhost:4000/api/messages

Or on production would be like this:

http://myserver.com:4000/api/messages

Basically, similar to how Bot Emulator connect:

enter image description here

Upvotes: 2

Views: 677

Answers (1)

Eric Dahlvang
Eric Dahlvang

Reputation: 8292

DirectLineJs will call the Direct Line Connector Service by default. The connector service then calls your bot, and the bot calls back to the connector service with responses (or proactive messages). DirectLineJs does provide a domain parameter you can supply to override the default:

const dl = new DirectLine({
    secret: /* put your Direct Line secret here */,
    token: /* or put your Direct Line token here (supply secret OR token, not both) */,
    domain: /* optional: if you are not using the default Direct Line endpoint, e.g. if you are using a region-specific endpoint, put its full URL here */
    webSocket: /* optional: false if you want to use polling GET to receive messages. Defaults to true (use WebSocket). */,
    pollingInterval: /* optional: set polling interval in milliseconds. Default to 1000 */,
});

However, there is a lot more involved in hosting your own Direct Line Connector Service. The SDK code will use the activity's serviceUrl property to send messages back to the connector service. The bot is expecting endpoints such as those in this MockChannelController: https://github.com/Microsoft/BotFramework-Samples/blob/master/blog-samples/CSharp/MockChannel/Controllers/MockChannelController.cs

More details are explained in this Load Testing blog post: https://blog.botframework.com/2017/06/19/load-testing-a-bot/

There's also this limited node example: offline-directline

Upvotes: 1

Related Questions