Angular talking to Rasa 1.10.7 via WebSockets

Rasa Open Source
1

Asking here as I am having trouble finding concise information on the topic and it seems to vary a lot due to Rasa version changes.

Goal: Have a larger Angular application in the UI layer with ChatBot being just one component of that application. I would like to have that Angular component to talk to my Rasa Server using WebSocket Protocol.

Local Environment: Python Virtual Environment running the following:

  • Python 3.6.8
  • pip 20.1.1
  • Rasa 1.10.7

Rasa Server Details:

  • Rasa Server is adapted from the rasa init boilerplate.
  • credentials.yml has socket.io as the only communication protocol:
    socketio:
      user_message_evt: user_utterance
      bot_message_evt: bot_utterance
      session_persistence: false
  • Server has been trained with a single rasa train command and the model is a tar.gz located in the <root>/models/<timestamp>.tar.gz.

Questions:

  • Some documentation suggested that the I need an Agent to establish the connection between my Rasa Assistant and the UI (Juste’s Post). However, this seems to imply a separation between core model path and an NLU model path which is not the case for Rasa 1.10.7 (unless one unpacks tar.gz). Is this code snippet still relevant for Rasa 1.10.7? If not, how does one establish channels?

  • Based on the answer to the above, how does my Angular component connect to my Rasa Service? Do I need to have an additional middleware service between the two which facilitates passing messages (events) between the two or is it an overkill? If the middleware service is not needed, what is the right way for an Angular front end to emit a message so that WebSocket can deliver it correctly to Rasa Service?

  • To experiment I have spun up a basic index.html with the following WebChat snippet in it:

<div id="webchat">
	<script src="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script>
	<script>
      WebChat.default.init({
	      selector: "#webchat",
            initPayload: "/get_started",
            interval: 1000,
            customData: {"sender": "iam"},
            socketUrl: "http://localhost:5005",
            title: "Connect",
            subtitle: "Sample bot",
            profileAvatar: "https://rasa.com/assets/img/demo/rasa_avatar.png",
            showCloseButton: true,
            fullScreenMode: true
        })
    </script>
</div>

Rasa Server was started using rasa run -m models --enable-api --cors "*" --debug and is running on port 5005:

Screen Shot 2020-07-13 at 10.33.17 PM
Screen Shot 2020-07-13 at 10.33.17 PM2094×108 32.5 KB
Below are the screenshots from the Chrome console:
Screen Shot 2020-07-13 at 10.33.04 PM
Screen Shot 2020-07-13 at 10.33.04 PM1110×532 125 KB
No responses are being received form the bot. Occasionally I seem to also be getting CORS erros as if --cors "*" was working intermittently:
Screen Shot 2020-07-13 at 10.24.03 PM
Screen Shot 2020-07-13 at 10.24.03 PM1074×228 42.3 KB

Appreciate the insights.

2

Hi Yev,

The “agent” Juste is referring to is not a separate process or separation between the NLU & Core. She’s referring to rasa itself. Channels are part of the Rasa core process and they are enabled via the credentials.yml file. The source code for all of the channels including the websocket channel and be viewed here.

It looks like you are using the example webchat widget correctly but are running into a CORS issue. Are you hosting the widget on the same host as Rasa?

3

Yes, the two are currently colocated. Both are running on localhost but on different ports (4200 and 5005 respectively).