Facing a SSL error while using Rasa-Webchat on https websites

@Suyog-23 well, I personally deploy my chatbot using rasa open source and rasa-webchat (docker and docker-compose) but excluding nginx and its working fine, may be your website IP address SSL is not secure ? Is that can be posibilty ? On which platform your website is build?

@Suyog-23 ok do one thing, install Ngrok , create the account on ngrok and authenticate the token inside the ngrok folder (check the documentation) and run the command

ngrok http 443 → you will get the generated link https → replace with your sockerurl address and tell me its then showing the secure ssl or not?

It has been deployed on DigitalOcean and certbot for SSL.

Do you have any guide on deployment using rasa open-source and webchat?

Sure I’ll try this out and follow up with you :smiley:

@Suyog-23 means, on Digital ocean?

Yup on the digital ocean droplet.

Are you sure the web socket channel is starting up? The indentation on your credentials.yml is in correct. See the example in the docs.

When you start rasa with the --debug option it will list all of the endpoints that are exposed and you should confirm that the socket endpoint is started.

This is how I get it working. I run Rasa in containers but Apache and Nginx “directly” (in next phase will dockertize them too).
Anyway, here is architecture: Rasa 2.2 are running in docker containers and exposed different ports, Apache is serving web pages where I use Botfron webchat widget. Then I have configured Ngingx reverse proxy with SSL. This is also handy if you have multiple chatbots in different ports.

My environment

Server version: Apache/2.4.41 (Ubuntu)  
nginx version: nginx/1.18.0 (Ubuntu  
Botfront Webchat 0.11.12  
Ubuntu 18.04  
Docker version 20.10.9, build c2ea9bc  
docker-compose version 1.29.2, build 5becea4c  

Here are my testbed config files
Nginx reverse proxy /etc/nginx/sites-available

server {


   server_name testibot1.omnia.fi;
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibot1;

# here starts proxy settings
   location / {

   proxy_pass http://testibot1.omnia.fi:444;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;

   }
# here starts socket.io settings
   location /socket.io/ {
   proxy_pass http://testibot1.omnia.fi:5006/socket.io/;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
   }

   access_log      /var/log/nginx/testibot1.fi_access.log;
   error_log       /var/log/nginx/testibot1.fi_error.log;

# rest is coming automatically when installing certbot
   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

# and here secon bot with similar settings but different locations, of course
server {


   server_name testibotti2.omnia.fi;
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibotti2;

   location / {

   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;
   proxy_pass http://testibotti2.omnia.fi:444;
   }


   location /socket.io/ {
   proxy_pass http://testibotti2.omnia.fi:5007/socket.io/;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
   }


   access_log      /var/log/nginx/testibotti2.fi_access.log;
   error_log       /var/log/nginx/testibotti2.fi_error.log;


   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = testibot1.omnia.fi) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


   listen 80;

   server_name testibot1.omnia.fi;
    return 404; # managed by Certbot


}

server {
    if ($host = testibotti2.omnia.fi) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


   listen 80;

   server_name testibotti2.omnia.fi;
   return 404; # managed by Certbot


}

Then you need to modify index page
/var/www/public_html/testibot1

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.12/lib/index.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Testisaitti 1
<div id="webchat"></div>
<script>
  WebChat.default.init({
    showFullScreenButton: true,
    selector: "#webchat",
    initPayload: "/tervetuloa",
    customData: {"language": "fi"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    //Here is without SSL so HTTP
    //socketUrl: "http://testibot1.omnia.fi:5006",
   // and with SSL youn need to change to shown below
    socketUrl: "https://testibot1.omnia.fi",
    socketPath: "/socket.io/",
    embedded: false,
    title: "AsPa botti",
    subtitle: "Testibotti 1",
    inputTextFieldHint: "Vastaa kysymyksiin",
    profileAvatar:"robot_icon.png",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>

</body>
</html>

Lastly, you can test if your socket is working with following procedure

curl --output testibotti2_socket_test "http://testibotti2.omnia.fi:5007/socket.io/?EIO=4&transport=polling"
cat testibotti2_socket_test
You should see
{"sid":"a3bb9e2baf6445d5a20514fb14448059","upgrades":["websocket"],"pingTimeout":60000,"pingInterval":25000}

Hope this helps, and just ask anything if in doupt.