Ngrok doesn't show webchat

Rasa Open Source
1

Hi @nik202 , I’ve been using Rasa webchat using a custom connector on localhost. Rasa server runs on localhost:5005 and I’m also able to see it properly when I define localhost:5005 as the socketUrl in my frontend. Now, I want to use ngrok and so I copied the ngrok https Url and pasted it as the value for socketUrl properly in my frontend. However, the webchat widget doesn’t show up with ngrok while it was working perfectly fine with localhost. Please help

2

@webdev-rohit can you share some steps with screenshot and what you are currently doing in steps?

3

Steps 1: Created a custom channel file for socketio connection and named it in the format - filename.Inputclassname in credentials.yml: image

  1. Ran rasa server locally i.e. localhost:5005 and in my frontend gave the socketUrl as:
    image
    image784×342 38.7 KB

This gives proper output i.e. I’m able to see my webchat widget in browser and also communicate with it.

image
image2040×1152 177 KB

  1. Then, I forwarded port 5005 to ngrok using - ngrok http 5005 command. And changed the socketUrl as show in one of the above screenshots to the newly provided ngrok https Url. The widget doesn’t show up in the browser. This is my issue @nik202
4

@webdev-rohit Ok means whilst using ngrok and copying the ngrok https inside socketUrl you are not able to run the widget. If yes follow these steps:

  1. Create the ngrok account
  2. Download the ngrok for your machine
  3. Connect and authenticate the tokens
  4. Run the ngrok using command: ngrok http 5005
  5. paste the https generated link inside socketUrl
  6. Done

Ref: ngrok - secure introspectable tunnels to localhost

I hope this will help you.

5

Okay, thanks @nik202 , will try this and see if it works out or not

6

@webdev-rohit it should work, you doubt? do share the ngrok console output ok?

7

@webdev-rohit is this issue solved? if yes please close this thread as solution.

8

No, it is not. But, I’m not actually researching more about it now. I’ve switched anyway to deploying rasa x in kubernetes.

10

Hi @webdev-rohit,
when running rasa locally and forwarding with ngrok I had the same issue. By inspecting the page I found out, that it was an CORS error - did you check that?

Access to XMLHttpRequest at 'https://xxxx-xxx-xxx-xx.ngrok.io/socket.io/?EIO=4&transport=polling&t=N-85pBG' from origin 'https://xxx.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and:

 GET https://xxxx-xxx-xxx-xx.ngrok.io/socket.io/?EIO=4&transport=polling&t=N-85pBG net::ERR_FAILED 404

I my case (hosting the website on Siteground) the solution was -as explained here:

In cases where cross-domain scripting is needed, add the following rule in your website’s .htaccess file:

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

This header will instruct web browsers on how to use and manage the cross-domain content. The browser then allows access to the content based on its security configuration.

N.B. The above rules will only work if NGINX Direct Delivery is disabled. You can deactivate the service from Site Tools → Speed → Caching.

I also needed to clean the cache for the website and I need to redo it everytime I restart ngrok/rasa.

Maybe that helps you?

11

Okay, @vio_lovis will surely try doing this sometime and inform here if it works