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

Rasa Open Source
1

Screenshot from 2021-10-25 00-13-00
Screenshot from 2021-10-25 00-13-00553×784 84.5 KB

I am getting this error while using Rasa Webchat over HTTPS websites. It works very well on the local machines. Here is my Nginx.conf file

events { }
http{
server {
  listen 5005;
  root /app;

  location / {
    resolver 127.0.0.11 valid=30s;
    set $chatbot_ui chatbot_ui;
    proxy_http_version          1.1;
    proxy_cache_bypass          $http_upgrade;
    proxy_set_header            Upgrade $http_upgrade;
    proxy_set_header            Connection "Upgrade";
    proxy_pass http://$chatbot_ui:3000;
    proxy_read_timeout 300;
  }
  location ~ ^/rasa(/?)(.*) {

    resolver 127.0.0.11 valid=30s;
    set $rasa_server rasa;
    proxy_http_version          1.1;
    proxy_cache_bypass          $http_upgrade;
    proxy_set_header            Upgrade $http_upgrade;
    proxy_set_header            Connection "Upgrade";
    proxy_pass http://$rasa_server:5005/$2;
    proxy_read_timeout 300;
  }

  location /socket.io/ {
        proxy_pass http://$rasa_server:5005;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
  }

}
}

And this the docker-compose.yml file:

version: '3'
services:
    nginx:
      container_name: "nginx"
      image: nginx
      volumes:
        - ./nginx.conf:/etc/nginx/nginx.conf
      ports:
        - 5000:5000
      depends_on: 
        - rasa
        - action_server
        - chatbot_ui
    rasa:
      container_name: "rasa_server"
      build: 
        context: backend
      ports: 
        - "443:443"
    action_server:
      container_name: "action_server"
      build: 
        context: actions
      volumes:
        - ./actions:/app/actions
      ports:
        - "5055:5055"  
    chatbot_ui:
      container_name: "chatbot_ui"
      build: 
        context: frontend
      ports: 
        - "3000:3000"

I have an ssl installed using certbot. How to solve the socket.io error?

2

@Suyog-23 pleases share credential file?

3 
# This file contains the credentials for the voice & chat platforms

# which your bot is using.

# https://rasa.com/docs/rasa/messaging-and-voice-channels

rest:

# # you don't need to provide anything here - this channel doesn't

# # require any credentials

#facebook:

# verify: "<verify>"

# secret: "<your secret>"

# page-access-token: "<your page access token>"

#slack:

# slack_token: "<your slack token>"

# slack_channel: "<the slack channel>"

# slack_signing_secret: "<your slack signing secret>"

socketio:

user_message_evt: user_uttered

bot_message_evt: bot_uttered

session_persistence: true

#mattermost:

# url: "https://<mattermost instance>/api/v4"

# token: "<bot token>"

# webhook_url: "<callback URL>"

# This entry is needed if you are using Rasa X. The entry represents credentials

# for the Rasa X "channel", i.e. Talk to your bot and Share with guest testers.

rasa:

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

This is the file :slight_smile:

4

@Suyog-23 code snippet for rasa Webchat?

5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <script>!(function () {
        let e = document.createElement("script"),
          t = document.head || document.getElementsByTagName("head")[0];
        (e.src =
          "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),
          // Replace 1.x.x with the version that you want
          (e.async = !0),
          (e.onload = () => {
            window.WebChat.default(
              {
                customData: { language: "en" },
                socketUrl: "http://ip_add:443/",
                title:"BoticFox",
                subtitle:"A smarter way of customer support",
                // add other props here
                initPayload:"/greet",
              },
              null
            );
          }),
          t.insertBefore(e, t.firstChild);
      })();
      </script>
       <link rel="stylesheet" href="./home.css">
</body>
</html>

The webchat code. It doesn’t work even when I add https there instead of http

6

can you add https: and try? just want to check what it will show. hope you rasa server is up and running.

7

Screenshot from 2021-10-25 15-23-50
Screenshot from 2021-10-25 15-23-50551×554 64.6 KB

The error looks similar :confused:

8

@Suyog-23 please show me error log, which you get in on terminal or docker desktop?

9

@Suyog-23 Even add this in the snippet code please.

socketPath={"/socket.io/"}

and build the image again and run.

@Suyog-23 try delete the older image and build the fresh one please.

10

Sure I’ll try this and get back :slight_smile:

11

Is this in the nginx file or the rasa webchat snippet? :confused:

12

@Suyog-23 rasa webchat snippet code.

13

It shows the same error. The screenshot looks similar

Screenshot from 2021-10-25 23-14-03
Screenshot from 2021-10-25 23-14-03553×539 65.7 KB

14

@Suyog-23 can you please share some logs rather then inspect of webpage?

@Suyog-23 can you ping the IP address from your system and check you getting response back?

15

Can I please know which logs you wanna see?

16

@nik202 yes the ping works :smiley:

17

@Suyog-23

docker-compose logs --follow <container name> or <image>

18

@Suyog-23 check rasa server in up and running in web browser or please check docker-compose ps and check the port is open for 443? or change the port number to default 5005:5005

@Suyog-23 if you are using Window or Mac please install docker desktop, there you easily see the logs of every container and images you had created.

@Suyog-23 this is basically, related to port issue, as per my knowledge or can be possible with nginx

19

Yeah everything is working fine on http. Including images, action server as well as the server on 443. Here is the code that works completely fine. If you want you can have a small convo with the bot.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <script>!(function () {
        let e = document.createElement("script"),
          t = document.head || document.getElementsByTagName("head")[0];
        (e.src =
          "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),
          // Replace 1.x.x with the version that you want
          (e.async = !0),
          (e.onload = () => {
            window.WebChat.default(
              {
                customData: { language: "en" },
                socketUrl: "http://noteme.tk:443/",
                title:"BoticFox",
                subtitle:"A smarter way of customer support",
                // add other props here
                initPayload:"/greet",
              },
              null
            );
          }),
          t.insertBefore(e, t.firstChild);
      })();
      </script>
       <link rel="stylesheet" href="home.css">
</body>
</html>
20

Looks like :confused: is there any template I can follow? Or some repo who has already done similar deployment? If you coulf mention any, it would mean the world to me :slight_smile: