I have installed rasa x on a google compute engine:
- Rasa x version 0.33.0
- Rasa version 2.0.2
I am using docker, and I can talk to my chatbot via the conversations tab in rasa x.
Now I want to use rasa webchat as frontend. I got this to work locally, but on the server I keep getting the error “Failed to load resource: the server responded with a status of 404 (Not Found), :5005/socket.io/?EIO=3&transport=polling&t=NUBsNmS:1” when I try to access the website for the frontend.
My credentials file looks like this:
rasa:
url: ${RASA_X_HOST}/api
connectors.socketChannel.SocketIOInput:
user_message_evt: user_uttered
bot_message_evt: bot_uttered
session_persistence: true
I have also copied the socketChannel.py into /etc/rasa/connectors:
import logging
import uuid
from typing import Any, Awaitable, Callable, Dict, Iterable, List, Optional, Text
from rasa.core.channels.channel import InputChannel, OutputChannel, UserMessage
import rasa.shared.utils.io
from sanic import Blueprint, response
from sanic.request import Request
from sanic.response import HTTPResponse
from socketio import AsyncServer
logger = logging.getLogger(__name__)
class SocketBlueprint(Blueprint):
def __init__(self, sio: AsyncServer, socketio_path, *args, **kwargs):
self.sio = sio
self.socketio_path = socketio_path
super().__init__(*args, **kwargs)
def register(self, app, options) -> None:
self.sio.attach(app, self.socketio_path)
super().register(app, options)
class SocketIOOutput(OutputChannel):
@classmethod
def name(cls) -> Text:
return "socketio"
def __init__(self, sio: AsyncServer, bot_message_evt: Text) -> None:
self.sio = sio
self.bot_message_evt = bot_message_evt
async def _send_message(self, socket_id: Text, response: Any) -> None:
"""Sends a message to the recipient using the bot event."""
await self.sio.emit(self.bot_message_evt, response, room=socket_id)
async def send_text_message(
self, recipient_id: Text, text: Text, **kwargs: Any
) -> None:
"""Send a message through this channel."""
for message_part in text.strip().split("\n\n"):
await self._send_message(recipient_id, {"text": message_part})
async def send_image_url(
self, recipient_id: Text, image: Text, **kwargs: Any
) -> None:
"""Sends an image to the output"""
message = {"attachment": {"type": "image", "payload": {"src": image}}}
await self._send_message(recipient_id, message)
async def send_text_with_buttons(
self,
recipient_id: Text,
text: Text,
buttons: List[Dict[Text, Any]],
**kwargs: Any,
) -> None:
"""Sends buttons to the output."""
# split text and create a message for each text fragment
# the `or` makes sure there is at least one message we can attach the quick
# replies to
message_parts = text.strip().split("\n\n") or [text]
messages = [{"text": message, "quick_replies": []} for message in message_parts]
# attach all buttons to the last text fragment
for button in buttons:
messages[-1]["quick_replies"].append(
{
"content_type": "text",
"title": button["title"],
"payload": button["payload"],
}
)
for message in messages:
await self._send_message(recipient_id, message)
async def send_elements(
self, recipient_id: Text, elements: Iterable[Dict[Text, Any]], **kwargs: Any
) -> None:
"""Sends elements to the output."""
for element in elements:
message = {
"attachment": {
"type": "template",
"payload": {"template_type": "generic", "elements": element},
}
}
await self._send_message(recipient_id, message)
async def send_custom_json(
self, recipient_id: Text, json_message: Dict[Text, Any], **kwargs: Any
) -> None:
"""Sends custom json to the output"""
json_message.setdefault("room", recipient_id)
await self.sio.emit(self.bot_message_evt, **json_message)
async def send_attachment(
self, recipient_id: Text, attachment: Dict[Text, Any], **kwargs: Any
) -> None:
"""Sends an attachment to the user."""
await self._send_message(recipient_id, {"attachment": attachment})
class SocketIOInput(InputChannel):
"""A socket.io input channel."""
@classmethod
def name(cls) -> Text:
return "socketio"
@classmethod
def from_credentials(cls, credentials: Optional[Dict[Text, Any]]) -> InputChannel:
credentials = credentials or {}
return cls(
credentials.get("user_message_evt", "user_uttered"),
credentials.get("bot_message_evt", "bot_uttered"),
credentials.get("namespace"),
credentials.get("session_persistence", False),
credentials.get("socketio_path", "/socket.io"),
)
def __init__(
self,
user_message_evt: Text = "user_uttered",
bot_message_evt: Text = "bot_uttered",
namespace: Optional[Text] = None,
session_persistence: bool = False,
socketio_path: Optional[Text] = "/socket.io",
):
self.bot_message_evt = bot_message_evt
self.session_persistence = session_persistence
self.user_message_evt = user_message_evt
self.namespace = namespace
self.socketio_path = socketio_path
self.sio = None
def get_output_channel(self) -> Optional["OutputChannel"]:
if self.sio is None:
rasa.shared.utils.io.raise_warning(
"SocketIO output channel cannot be recreated. "
"This is expected behavior when using multiple Sanic "
"workers or multiple Rasa Open Source instances. "
"Please use a different channel for external events in these "
"scenarios."
)
return
return SocketIOOutput(self.sio, self.bot_message_evt)
def blueprint(
self, on_new_message: Callable[[UserMessage], Awaitable[Any]]
) -> Blueprint:
# Workaround so that socketio works with requests from other origins.
# https://github.com/miguelgrinberg/python-socketio/issues/205#issuecomment-493769183
sio = AsyncServer(async_mode="sanic", cors_allowed_origins = [])
socketio_webhook = SocketBlueprint(
sio, self.socketio_path, "socketio_webhook", __name__
)
# make sio object static to use in get_output_channel
self.sio = sio
@socketio_webhook.route("/", methods=["GET"])
async def health(_: Request) -> HTTPResponse:
return response.json({"status": "ok"})
@sio.on("connect", namespace=self.namespace)
async def connect(sid: Text, _) -> None:
logger.debug(f"User {sid} connected to socketIO endpoint.")
@sio.on("disconnect", namespace=self.namespace)
async def disconnect(sid: Text) -> None:
logger.debug(f"User {sid} disconnected from socketIO endpoint.")
@sio.on("session_request", namespace=self.namespace)
async def session_request(sid: Text, data: Optional[Dict]):
if data is None:
data = {}
if "session_id" not in data or data["session_id"] is None:
data["session_id"] = uuid.uuid4().hex
if self.session_persistence:
sio.enter_room(sid, data["session_id"])
await sio.emit("session_confirm", data["session_id"], room=sid)
logger.debug(f"User {sid} connected to socketIO endpoint.")
@sio.on(self.user_message_evt, namespace=self.namespace)
async def handle_message(sid: Text, data: Dict) -> Any:
output_channel = SocketIOOutput(sio, self.bot_message_evt)
if self.session_persistence:
if not data.get("session_id"):
rasa.shared.utils.io.raise_warning(
"A message without a valid session_id "
"was received. This message will be "
"ignored. Make sure to set a proper "
"session id using the "
"`session_request` socketIO event."
)
return
sender_id = data["session_id"]
else:
sender_id = sid
message = UserMessage(
data["message"], output_channel, sender_id, input_channel=self.name()
)
await on_new_message(message)
return socketio_webhook
And this is my docker-compose.override file:
version: '3.4'
x-rasa-services:
command:
--enable-api
services:
app:
image: myimage
volumes:
- ./actions:/app/actions
- ./db_scripts:/app/db_scripts
expose:
- '5055'
depends_on:
- rasa-production
rasa-production:
volumes:
- ./connectors:/app/connectors
rasa-worker:
volumes:
- ./connectors:/app/connectors
And this is the webchat part in my index.html file for the frontend:
<div id="webchat"></div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.5/lib/index.min.js"></script>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userid = urlParams.get('userid');
// const userid = "111"
WebChat.default.init({
selector: "#webchat",
initPayload: "/start_session1",
customData: {"language":"en", "userid": userid}, // arbitrary custom data. Stay minimal as this will be added to the socket
socketUrl: "http://myserver:5005",
socketPath: "/socket.io/",
fullScreenMode: true,
embedded: true,
title: "Sam",
subtitle: "",
params: {"storage": "session"} // can be set to "local" or "session". details in storage section.
})
</script>
I’ve been trying to get this to work for days now and I would greatly appreciate any help. Thanks a lot in advance!
