Fail to load webchat bot on webpage using ngrok

Hello there I hosted a HTML page on Google Sites to try run my chatbot. The HTML page used the code from this webchat code here . I just changed the localhost part with the ngrok url. My ngrok url forwarded http://localhost:5005.

If i opened the webpage on computer in the same network, the chatbot is loaded. (Notice the blue balloon there)

But when I open the webpage on another computer outside the network, the blue balloon chat is not there.

To what I understand, ngrok secure a tunnel to expose your localhost to the web but please correct me if I’m wrong. Below is the code that I use on my HTML file. Feel free to help!

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test Lisa</title>
 
  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>
<body>
<div id="webchat"></div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js"></script>
<script>
  WebChat.default.init({
    selector: "#webchat",
    initPayload: "/greet",
    customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    socketUrl: "https://ngrokurl.ngrok.io",
    socketPath: "/socket.io/",
    title: "Lisa",
    subtitle: "Chat with the new Edaran Bot!",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>
</body>
</html>

Hi,
I am facing the same issue! Can anyone help? I use ngrok as in the example above. However, I am still the only one seeing the bot on the website.

Help is appreciated :blush:

Greetings from Germany, Vio

@vio_lovis can you please share your snippet code (if not allowed share the screenshot please) and your rasa --version.

Hi @nik202,
of course! Thanks for replying. :slightly_smiling_face:

My rasa-version:

Rasa Version      :         3.0.4
Minimum Compatible Version: 3.0.0
Rasa SDK Version  :         3.0.2
Rasa X Version    :         None
Python Version    :         3.8.0
Operating System  :         Windows-10-10.0.19041-SP0

I have these versions:
node v 17.4.0
npm 8.3.1
socket.io 4.4.1

My credentials.yml-file contains:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: false

This is a snippet of what I insert this in the Insert Header & Footer-Plug-In for Wordpress:

I hope I provided all the information needed to help.

Thanks, ciao :wave:

Thanks for sharing @vio_lovis what error message are you getting in the terminal?

Hi @nik202,
as long as I am logged in the Wordpress-Website it is running fine. However, just on my laptop. Neither of my colleagues can see the bot. The error I get in the terminal ist the following:

2022-02-10 08:12:14 DEBUG    rasa.core.channels.socketio  - User r-0kmLhEAzBYr4nqAAAB connected to socketIO endpoint.
[2022-02-10 08:12:15 +0100] [16340] [ERROR] Exception occurred while handling uri: 'ws://63ff-85-16-187-26.ngrok.io/socket.io/?EIO=4&transport=websocket&sid=eogKVKnzIgPGb2HiAAAA'
Traceback (most recent call last):
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\site-packages\sanic\server\protocols\websocket_protocol.py", line 119, in websocket_handshake
    subprotocols = list(subprotocols)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 261, in inner
    return func(*args, **kwds)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 682, in __getitem__
    params = tuple(_type_check(p, msg) for p in params)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 682, in <genexpr>
    params = tuple(_type_check(p, msg) for p in params)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 149, in _type_check
    raise TypeError(f"{msg} Got {arg!r:.100}.")
TypeError: Parameters to generic types must be types. Got 0.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "handle_request", line 83, in handle_request
    class Sanic(BaseSanic, metaclass=TouchUpMeta):
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_server.py", line 271, in handle_request
    packets = await socket.handle_get_request(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_socket.py", line 89, in handle_get_request
    return await getattr(self, '_upgrade_' + transport)(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_socket.py", line 142, in _upgrade_websocket
    return await ws(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\async_drivers\sanic.py", line 118, in __call__
    self._sock = await protocol.websocket_handshake(request)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\site-packages\sanic\server\protocols\websocket_protocol.py", line 132, in websocket_handshake
    raise ServerError(msg, status_code=500)
sanic.exceptions.ServerError: Failed to open a WebSocket connection.
See server log for more information.

2022-02-10 08:12:15 DEBUG    rasa.core.channels.socketio  - User r-0kmLhEAzBYr4nqAAAB connected to socketIO endpoint.

The ngrok tells me:

POST /socket.io/               200 OK                                                                                   
GET  /socket.io/               200 OK        

As soon as I am loged out of the Wordpress-Site the bot disappears and I get

2022-02-10 08:18:44 DEBUG    rasa.core.channels.socketio  - User r-0kmLhEAzBYr4nqAAAB disconnected from socketIO endpoint.

Shouldn’t I be able to still see the bot?

Thanks for helping me :pray:
Ciao :wave: Vio

@vio_lovis Not get this? Can you tell me more in detail?

@vio_lovis share me ngrok terminal screen please (Screenshot of port running i.e ngrok http 5005)

Hi @nik202, so I do the following:

  1. rasa run actions --port 5056
  2. rasa run -m models --enable-api --cors “*” --debug
  3. ngrok http 5005
  4. I log in to the Wordpress-Website, open the Insert Header and Footer-Plugin and within the html-code I change the socketUrl to whatever ngrok gives me:
    socketUrl: “https://xxxx-xxx-xxx.ngrok.io”
  5. I load the the website, see the bot and can chat to the bot. However, anyone else visiting the website can not see the bot. Why? Shouldn’t they see bot since I use ngrok? What am I missing?
  6. In the terminal I see the error message postet above (earlier post).
  7. ngrok gives me the following:
ngrok by @inconshreveable                                                                               (Ctrl+C to quit)                                                                                                                        Session Status                online                                                                                    
Session Expires               1 hour, 58 minutes                                                                        Version                       2.3.40                                                                                   
Region                        United States (us)                                                                        
Web Interface                 http://127.0.0.1:4040                                                                     
Forwarding                    http://5509-85-16-187-26.ngrok.io -> http://localhost:5005                                
Forwarding                    https://5509-85-16-187-26.ngrok.io -> http://localhost:5005                                                                                                                                                       
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                
                              2       1       0.03    0.01    4.21    8.08                                                                                                                                                                      

HTTP Requests                                                                                                           -------------                                                                                                                                                                                                                                   GET  /socket.io/                                                                                                       
GET  /socket.io/               200 OK                                                                                   
POST /socket.io/               200 OK                                                                                   
GET  /socket.io/               200 OK                                                                                  
POST /socket.io/               200 OK                                                                                   
GET  /socket.io/               200 OK                 
  1. As soon as I log out from wordpress, the bot disappears from the website. I cannot see the chat-window on the website anymore.
    Shouldn’t at least I still see the chat window?

I hope I was able to provide the information you need. :blush:
Thank you, Vio

@vio_lovis Thanks for the share, as expected :upside_down_face: I guess you need to authenticate the ngrok token.

It will remove the Session-Expires and make it (Free) 24/7

So, create an account and authenticate, and do let me know it’s a matter of 5 mins.

1 Like

@nik202 :star_struck: :partying_face:
It works!
Thank you so much

@vio_lovis No worries, happy to help you, and good luck!

Hi,
I am sorry, :expressionless: but I am still having some troubles when trying to make the bot available to colleagues:
So, I do the following steps:

  1. I start the rasa action sever rasa run actions --port 5056
  2. I start rasa rasa run -m models --enable-api --cors “*” --debug
  3. I authentificate ngrok
  4. when rasa is up and running I, then I start ngrok http 5005
  5. I log in to the Wordpress-Website, open the Insert Header and Footer-Plugin and within the html-code I change the socketUrl to whatever ngrok gives me: socketUrl: “https://xxxx-xxx-xxx.ngrok.io”
  6. save the changes and visit the website

However, usually it does not work immediately, meaning that only I can see the bot, but neither of my colleagues can. So I either restart rasa rasa or ngrok or both several times until then suddeny it works. :woman_shrugging: basically, I just try to restart without a plan… :confused:

Did I miss something here? Do you have an idea where the problem might come from and what I could do about it?

I see the following error in the terminal:

2022-02-28 11:27:09 DEBUG    rasa.core.channels.socketio  - User dCa-QI5Y_wypWq40AAAB connected to socketIO endpoint.
[2022-02-28 11:27:09 +0100] [8140] [ERROR] Exception occurred while handling uri: 'ws://1899-85-16-177-56.ngrok.io/socket.io/?EIO=4&transport=websocket&sid=eO6NznrVqsYUJgfSAAAA'
Traceback (most recent call last):
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\site-packages\sanic\server\protocols\websocket_protocol.py", line 119, in websocket_handshake
    subprotocols = list(subprotocols)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 261, in inner
    return func(*args, **kwds)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 682, in __getitem__
    params = tuple(_type_check(p, msg) for p in params)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 682, in <genexpr>
    params = tuple(_type_check(p, msg) for p in params)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\typing.py", line 149, in _type_check
    raise TypeError(f"{msg} Got {arg!r:.100}.")
TypeError: Parameters to generic types must be types. Got 0.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "handle_request", line 83, in handle_request
    class Sanic(BaseSanic, metaclass=TouchUpMeta):
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_server.py", line 271, in handle_request
    packets = await socket.handle_get_request(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_socket.py", line 89, in handle_get_request
    return await getattr(self, '_upgrade_' + transport)(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\asyncio_socket.py", line 142, in _upgrade_websocket
    return await ws(environ)
  File "C:\Users\viowa\AppData\Roaming\Python\Python38\site-packages\engineio\async_drivers\sanic.py", line 118, in __call__
    self._sock = await protocol.websocket_handshake(request)
  File "C:\Users\viowa\anaconda3\envs\lovis\lib\site-packages\sanic\server\protocols\websocket_protocol.py", line 132, in websocket_handshake
    raise ServerError(msg, status_code=500)
sanic.exceptions.ServerError: Failed to open a WebSocket connection.
See server log for more information.

2022-02-28 11:27:10 DEBUG    rasa.core.lock_store  - Issuing ticket for conversation 'dCa-QI5Y_wypWq40AAAB'.
2022-02-28 11:27:10 DEBUG    rasa.core.lock_store  - Acquiring lock for conversation 'dCa-QI5Y_wypWq40AAAB'.
2022-02-28 11:27:10 DEBUG    rasa.core.lock_store  - Acquired lock for conversation 'dCa-QI5Y_wypWq40AAAB'.
2022-02-28 11:27:10 DEBUG    rasa.core.tracker_store  - Can't retrieve tracker matching sender id 'dCa-QI5Y_wypWq40AAAB' from SQL storage. Returning `None` instead.
2022-02-28 11:27:10 DEBUG    rasa.core.tracker_store  - Can't retrieve tracker matching sender id 'dCa-QI5Y_wypWq40AAAB' from SQL storage. Returning `None` instead.

When it finally is up and running, then it works like a charm… for days and days :slightly_smiling_face:

Thanks for helping me out over and over again, :blush: ciao

@vio_lovis hello no worries, can you share rasa version please rasa --version?

Hi,
of course:

Rasa Version      :         3.0.4
Minimum Compatible Version: 3.0.0
Rasa SDK Version  :         3.0.2
Rasa X Version    :         None
Python Version    :         3.8.0
Operating System  :         Windows-10-10.0.19041-SP0

I have these versions:
node v 17.4.0
npm 8.3.1
socket.io 4.4.1

The last time it worked was on Tuesday evening… but also only after I restarted RASA and ngrok a couples of times…

@vio_lovis do you have a website?

Yes, we are still under construction, but we have a Wordpress-Website: https://fraglovis.de/ That’s where I implement the webchat window.

@vio_lovis and you are using webchat snippet in insert header and footer is that also right?

Yes, that’s correct. I can see the bot, I mean the webchat window, myself. Looks great. But anyone else accessing the website can’t.

@vio_lovis currently your bot is running and you were able to see the bot?

@vio_lovis

Also, confirm with me what you have mentioned in this field in botfront snippet code?

socketUrl: "http://????",

Yes, I see it. It works fine for me.


But if I try to access the website from my mobile phone or my tablet, I do not see the bot. I used to, for example when you helped my with the ngrok token → worked immediately, the bot was accessible to others. And an thursday evening, after a couples of restarts of rasa and ngrok it was also working… i just don’t understand where the sanic error comes from and what I can do about it… :confused: