Rasa Webchat "server error" with ngrok on Rasa 3.6.21 – Socket.io Connection Issue

Rasa Open Source
1

I’m encountering a persistent “server error” from the Rasa Webchat client when trying to connect to my Rasa server via ngrok. Despite verifying that my Rasa server is running and accessible on port 5005, the Webchat widget reports a socket error.

Environment:

  • Rasa Version: 3.6.21
  • Rasa SDK Version: 3.6.2
  • Python Version: 3.8.13
  • Operating System: macOS
  • Webchat Client Version: Tried both 1.0.1 and 1.1.0
  • Ngrok URL: For example, https://aaf6-5-151-117-57.ngrok-free.app (actual URL may vary)

Configuration:

My credentials.yml includes the socketio channel (I’ve uncommented this section):

yaml

Copy

rest:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

# rasa:
#   url: "http://localhost:5002/api"

I start my Rasa server from the project root (which contains domain.yml, data/, and models/) with:

bash

Copy

rasa run --enable-api --cors="*" -h 0.0.0.0

I verified the server is running by executing:

bash

Copy

curl http://127.0.0.1:5005

which returns: Hello from Rasa: 3.6.21

Then I run ngrok with:

bash

Copy

ngrok http http://127.0.0.1:5005

Ngrok shows a forwarding URL like:

nginx

Copy

Forwarding  https://aaf6-5-151-117-57.ngrok-free.app -> http://127.0.0.1:5005

Webchat Widget Integration in WordPress:

I’ve added a Custom HTML block to my WordPress site with the following code:

html

Copy

<!-- Chat widget container -->
<div id="webchat" style="position: fixed; bottom: 20px; right: 20px; z-index: 10000;"></div>

<script>
  // Initialization function for Rasa Webchat
  function initRasaWebchat() {
    console.log("Rasa Webchat script loaded.");
    if (window.WebChat && typeof window.WebChat.default === "function") {
      window.WebChat.default({
        selector: "#webchat",
        initPayload: "/greet",
        customData: {"language": "en"},
        socketUrl: "https://aaf6-5-151-117-57.ngrok-free.app",  // update with your current ngrok URL
        socketPath: "/socket.io/",
        title: "Ask me anything!",
        subtitle: "Powered by Rasa",
        inputTextFieldHint: "Type your message...",
        showFullScreenButton: true
      });
    } else {
      console.error("Rasa Webchat default function not found.", window.WebChat);
    }
  }

  // Dynamically load the Rasa Webchat script
  function loadRasaWebchatScript() {
    var script = document.createElement("script");
    // Tried version 1.1.0; also tested 1.0.1 with similar results
    script.src = "https://cdn.jsdelivr.net/npm/rasa-webchat@1.1.0/lib/index.min.js";
    script.crossOrigin = "anonymous";
    script.onload = initRasaWebchat;
    script.onerror = function() {
      console.error("Error loading Rasa Webchat script.");
    };
    document.head.appendChild(script);
  }

  document.addEventListener("DOMContentLoaded", loadRasaWebchatScript);
</script>

Error Observed:

In the browser console, after the Webchat script loads, I see:

lua

Copy

Rasa Webchat script loaded.
index.min.js:129 Error: server error
    at u.onPacket (index.min.js:122:150063)
    at e.exports.<anonymous> (index.min.js:122:147754)
    at e.exports.emit (index.min.js:7:79158)
    at e.exports.onPacket (index.min.js:18:1539)
    at index.min.js:23:14916
    ... (stack trace continues)

The error indicates that the socket.io connection to the Rasa server is failing (“server error”).

What I’ve Tried:

  • Confirmed the Rasa server is running and responds on port 5005 locally.
  • Verified the ngrok tunnel forwards correctly.
  • Enabled the socketio channel in credentials.yml.
  • Tried different versions of the Rasa Webchat client (1.0.1 and 1.1.0).
  • Dynamically loaded the Webchat script to ensure my initialization function is defined before the script is loaded.
  • Ensured my socketUrl is set to the ngrok URL (which forwards to port 5005).

Expected Behavior:

The Webchat widget should establish a socket.io connection with the Rasa server (via ngrok) and allow for real-time messaging without errors.

Actual Behavior:

I consistently receive a “server error” in the Webchat client, indicating the socket connection is failing.

Question:

Has anyone encountered this “server error” with Rasa Webchat when connecting via ngrok on Rasa 3.6.21? Are there known issues with socket.io connections or configuration settings that might be causing this error? Any guidance on how to further debug or resolve the socket connection issue would be greatly appreciated.

Thank you in advance for any help!

Feel free to adjust any details to better match your situation before posting. Let me know if you need further adjustments!