I’m using Socket.io to integrate a rasa chatbot in a Next JS website. But I am not able to get the bot_uttered messages.
I used the following code to get the bot up and running whilst following a blog article RASA - Socket.IO integration - DEV Community.
The script tag at the Head of my _app.js file
<Head>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"
integrity="sha512-PU5S6BA03fRv1Q5fpwXjg5nlRrgdoguZ74urFInkbABMCENyx5oP3hrDzYMMPh3qdLdknIvrGj3yqZ4JuU7Nag=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</Head>
This is the HTML that I have on the screen
<div id="messages"></div>
<form id="form">
<input id="message-input" autocomplete="off" autofocus/>
<button class="button">Send</button>
</form>
In an useEffect hook, given below is my logic for socket.io integration Note that socket.io is already added as an npm package and imported into the document
useEffect(() => {
if (typeof (window) != undefined) {
//Socket.io Custom Widget logic
const socket = io("https://website-demo.rasa.com/");
socket.on('connect', function () {
console.log("Connected to Socket.io server");
});
socket.on('connect_error', (error) => {
// Write any connection errors to the console
console.error(error);
});
const messages = document.getElementById('messages')
const form = document.getElementById('form')
const messageInput = document.getElementById('message-input');
form.addEventListener('submit', function (e) {
e.preventDefault();
const msg = messageInput.value;
if (msg) {
socket.emit('user_uttered', {
"message": msg,
});
messageInput.value = '';
appendMessage(msg, "sent");
}
});
socket.on('bot_uttered', function (response) {
console.log("Bot uttered:", response);
if (response.text) {
appendMessage(response.text, "received");
}
if (response.attachment) {
appendImage(response.attachment.payload.src, "received");
}
if (response.quick_replies) {
appendQuickReplies(response.quick_replies);
}
});
function appendMessage(msg, type) {
const item = document.createElement('div');
item.textContent = msg;
item.classList.add("message");
item.classList.add(`message_${type}`);
messages.appendChild(item);
scrollToBottom();
}
}
}, [])
Unfortunately, I do not get the bot_uttered messages listener to fire off upon successful submission of the form. Also I added the following to the credentials.yml file on the RasaX instance, but it still does not work
#credentials.yml
socketio:
user_message_evt: user_uttered
bot_message_evt: bot_uttered
session_persistence: false
