Connecting to Crossbar server with JavaScript gives `Connection to the other side was lost in a non-clean fashion` error

I’ve been trying to make a simple WAMP RPC based application using Autobahn(JavaScript) and Crossbar. The script doesn’t work in both secured and unsecured connections.

Crossbar config.json:-

{
    "$schema": "https://raw.githubusercontent.com/crossbario/crossbar/master/crossbar.json",
    "version": 2,
    "controller": {
    },
    "workers": [
        {
            "type": "router",
            "realms": [
                {
                    "name": "name_1",
                    "roles": [
                        {
                            "name": "anonymous",
                            "permissions": [
                                {
                                    "uri": "",
                                    "match": "prefix",
                                    "allow": {
                                        "call": true,
                                        "register": true,
                                        "publish": true,
                                        "subscribe": true
                                    },
                                    "disclose": {
                                        "caller": false,
                                        "publisher": false
                                    },
                                    "cache": false
                                }
                            ]
                        }
                    ]
                }
            ],
            "transports": [
                {
                    "type": "websocket",
                    "endpoint": {
                        "type": "tcp",
                        "port": 8080,
                        "tls": {
                            "key": "path/to/letsencrypt/keys/privkey.pem",
                            "certificate": "path/to/letsencrypt/keys/cert.pem",
                            "chain_certificates": ["path/to/letsencrypt/keys/chain.pem"],
                            "ca_certificates": [
                                "isrgrootx1.pem",
                                "letsencryptauthorityx1.pem",
                                "letsencryptauthorityx2.pem"
                            ],
                            "ciphers": "ECDH+AESGCM:DH+AESGCM:ECDH+AES256:DH+AES256:ECDH+AES128:DH+AES:ECDH+3DES:DH+3DES:RSA+AES:RSA+3DES:!ADH:!AECDH:!MD5:!DSS"
                        }
                    },
                    "url": "wss://[domain]",
                    "serializers": ["json"],
                    "auth": {
                        "ticket": {
                            "type": "static",
                            "principals": {
                                "user_1": {
                                    "ticket": "ticket_1",
                                    "role": "anonymous"
                                }
                            }
                        }
                    },
                    "options": {
                        "allowed_origins": ["*"],
                        "allow_null_origin": true,
                        "enable_webstatus": true,
                        "max_frame_size": 1048576,
                        "max_message_size": 1048576,
                        "auto_fragment_size": 65536,
                        "fail_by_drop": true,
                        "open_handshake_timeout": 2500,
                        "close_handshake_timeout": 1000,
                        "auto_ping_interval": 10000,
                        "auto_ping_timeout": 5000,
                        "auto_ping_size": 4,
                        "compression": {
                            "deflate": {
                                "request_no_context_takeover": false,
                                "request_max_window_bits": 13,
                                "no_context_takeover": false,
                                "max_window_bits": 13,
                                "memory_level": 5
                            }
                        }
                    }
                },
                {
                    "type": "websocket",
                    "endpoint": {
                        "type": "tcp",
                        "port": 8081
                    },
                    "url": "ws://[domain]",
                    "serializers": ["json"],
                    "options": {
                        "allowed_origins": ["*"],
                        "allow_null_origin": true,
                        "enable_webstatus": false,
                        "max_frame_size": 1048576,
                        "max_message_size": 1048576,
                        "auto_fragment_size": 65536,
                        "fail_by_drop": true,
                        "open_handshake_timeout": 2500,
                        "close_handshake_timeout": 1000,
                        "auto_ping_interval": 10000,
                        "auto_ping_timeout": 5000,
                        "auto_ping_size": 4,
                        "compression": {
                            "deflate": {
                                "request_no_context_takeover": false,
                                "request_max_window_bits": 13,
                                "no_context_takeover": false,
                                "max_window_bits": 13,
                                "memory_level": 5
                            }
                        }
                    }
                }
            ]
        }
    ]
}

JavaScript:-

var connection=null;
AUTOBAHN_DEBUG = true;

require.config({
  baseUrl: ".",
  paths: {
      "autobahn":
         "https://[domain]/path/to/autobahn.min.js",
      "when": "https://cdnjs.cloudflare.com/ajax/libs/when/2.7.1/when"
  },
  shim: {
      "autobahn": {
          deps: ["when"]
      }
  }
});
    
require(["autobahn"], function(autobahn) {
  console.log("Ok, Autobahn loaded", autobahn.version);

  var connection = new autobahn.Connection({
    transports: [{
       type: 'websocket',
       port: '8080',
       host: '[domain]',
       url: "wss://[domain]:8080",
    }],
    realm: "name_1",
    max_retries: "0"
  });

  connection.onopen = function (session, details) {
     // Publish, Subscribe, Call and Register
      // session.register('com.myapp.add2', add2);
      // session.call('com.myapp.add2', [2, 3]).then(function showSum(res) {
      //    console.log('sum is', res);
      // }, session.log);
      console.log("Connection opened.");
  };


  connection.onclose = function (reason, details) {
     console.log("Connection closed.");
  }

  connection.open();
});

Crossbar trace for Secure Connection:-

[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] connection accepted from peer tcp4:[ip_address]:6589
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] Connection made to tcp4:[ip_address]:6589
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] Connection to/from tcp4:[ip_address]:6589 was lost in a non-clean fashion: Connection to the other side was lost in a non-clean fashion: Connection lost.
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] _connectionLost: [Failure instance: Traceback (failure with no frames): <class 'twisted.internet.error.ConnectionLost'>: Connection to the other side was lost in a non-clean fashion: Connection lost.

JavaScript Console Log for Secure Connection:-

autobahn.min.js:90 trying to create WAMP transport of type: websocket
autobahn.min.js:90 using WAMP transport type: websocket
autobahn.min.js:181 WebSocket connection to 'wss://[domain]:8080/' failed: WebSocket opening handshake was canceled
autobahn.min.js:87 connection closed unreachable {reason: null, message: null, retry_delay: null, retry_count: null, will_retry: false}
main.js:43 Connection closed.

Crossbar and Javascript codes for Un-Secure connection are the same except the port being 8081 and changing wss to ws.

Crossbar trace for Un-Secure Connection:-

[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] connection accepted from peer tcp4:[ip_address]:7110
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] Connection made to tcp4:[ip_address]:7110
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] dropping connection to peer tcp4:[ip_address]:7110 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] Connection to/from tcp4:[ip_address]:7110 was aborted locally
[Router      32589 crossbar.router.protocol.WampWebSocketServerProtocol] _connectionLost: [Failure instance: Traceback (failure with no frames): <class 'twisted.internet.error.ConnectionAborted'>: Connection was aborted locally using ITCPTransport.abortConnection.

JavaScript Console Log for Un-Secure Connection:-

autobahn.min.js:90 using WAMP transport type: websocket
autobahn.min.js:181 WebSocket connection to 'ws://[domain]:8081/' failed: Error in connection establishment: net::ERR_CONNECTION_RESET
autobahn.min.js:87 connection closed unreachable {reason: null, message: null, retry_delay: null, retry_count: null, will_retry: false}
main.js:43 Connection closed.

Initially, I did not have CA certificates in the Crossbar config (no changes in the errors). I figured that I should add them because it may have something to do with this so I got them from https://letsencrypt.org/2015/06/04/isrg-ca-certs.html (not sure if this is correct). Also tried from https://letsencrypt.org/certificates/, but this went over my head (wth do I even need?).

I’m not sure what is causing these issues in either of the cases now or if I am missing something. The docs are lame at best.

Help, please?