how to use without using webchat?

[satishAarbor]

You are using webchat for UI right! I want to use this without webchat ui which means how to create our own HTML, javascript and channels to connect with rasa. can you tell me about this..

[Alexmhack]

Well it won't be that complicated. We can try out something with Bot UI or anything else that supports websockets. Will try and let you know.

[satishAarbor]

Are you tried? @Alexmhack

[Alexmhack]

No I haven't tried it, and not planning on doing it anytime soon.

[satishAarbor]

okay, can you explain the method to do it i will try. @Alexmhack

[Alexmhack]

I tried doing it and will soon create a repo with the complete code but for now, it took a lot of JavaScript to talk with the Rasa Core sockets back-end, here is a sample

Follow the steps and if stuck ask me

You need to have node installed which provides npm for the below steps, if not install it using its official site, a very simple process

In a separate folder create package.json file and in it add

{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": { } }

Install the socket.io module using npm by

npm install socket.io --save

Then create a javascript file with any name and in that you can require the sockets.io-client like this,

var socket = require('socket.io-client')('http://localhost:5500');

Then using npm live-server module open any index.html file in the browser by locating to the folder in cmd and running

live-server

This will start a local server and open the index.html file in the browser automatically. (You need to have npm installed for this)

Now using simple javascript code and sockets call the rasa core server by adding the below code in the javascript file

// console log when socket connects to port 5500

socket.on('connect', function() { console.log('connection established...') });

// utter message from user to bot
socket.emit('user_uttered', {'message': 'hey there', 'sender': 'django'});

// event when bot utters message
socket.on('bot_uttered', function(data){ console.log(data); });

// do something when connection closes

socket.on('disconnect', function(){});

Now if you have npm installed then using npm install the browserify module

npm install -g browserify

Locate to the folder where all the above made files exists and in there create another file named bundle.js and run this command from cmd

browserify <your_javascript_file.js> -o bundle.js

Now using script tags add the bundle.js file in index.html file just above the ending body tag -> </body>

Go to the browser and open the console, live-server module has already refreshed the browser and you will find connection established... and the bot reply logged over there.

If you are wondering why we needed browserify, that is because we cannot simply use the require in the frontend that needs a backend like nodejs so we converted it into a bundle using browserify for the frontend. Google it to learn more...

Also refer to the rasa docs for socket setup

[satishAarbor]

Thanks for for your reply!
Is this you mentioned above method is work in django framework or it will separately run on node npm? @Alexmhack

[Alexmhack]

Yeah about that, you need to simply put the bundle.js file in django static folder and load static in django templates and it will do the rest, npm and node are only for local development needs.

[satishAarbor]

I will try and let you know.

[satishAarbor]

It will log the bot reply in console and i developed one simple web bot user interface but i cant pass the variable inside the socket function how to do that.

[Alexmhack]

What is that you are trying ? Please send some code or file or image.

[Alexmhack]

Checkout Django-Rasa-Sockets