Black screen only with no vtx client when using websocket support for browser

[minnixtx]

Describe the Bug
The vtx client does not appear in the browser

To Reproduce
Follow the installation guide for vtx client and websocket support

Expected Behavior
The vtx client should appear in the browser

Actual Behavior
Black screen

Screenshots
If applicable, add screenshots to help explain your problem.

Environment

• [ X] I am using Node.js v14.x LTS or higher
• [ X] npm install or yarn reports success
• Actual Node.js version (node --version): 14
• Operating system (uname -a on *nix systems): Debian 11 x86-64

enigma works fine when telnet via local host: telnet localhost 8888

Here are my config files:

websocket config within config.hjson:

webSocket: {
            //  
            //  Setting "proxied" to true allows non-secure (ws://) WebSockets
            //  to be considered secure when the X-Fowarded-Proto HTTP header
            //  is set to "https". This is helpful when ENiGMA is running behind
            //  another web server doing SSL/TLS termination.
            //
            proxied: true

            //  Non-secure WebSockets, or ws://
            ws: {
                port: 8810
                enabled: true
            }

            //  Secure WebSockets, or wss://
            wss: {
                port: 8811
                enabled: false

                //
                //  Certificate and Key in PEM format.
                //  Note that web browsers will not trust self-signed certs. Look
                //  into Let's Encrypt and perhaps running ENiGMA behind another
                //  web server such as Caddy.
                //
                certPem: /home/minnix/enigma-bbs/config/https_cert.pem
                keyPem: /home/minnix/enigma-bbs/config/https_cert_key.pem
            }

Web server is nginx installed on localhost. Folder structure is /var/www/html/assets/vtx/(everything from vtx www folder) and /var/www/html/vtx.html

vtxdata.js:

var vtxdata = {
     sysName: "Lugcast Land",
     wsConnect: "ws://localhost:8810",
     term: "ansi-bbs",
     codePage: "CP437",
     fontName: "UVGA16",
     fontSize: "24px",
     crtCols: 80,
     crtRows: 25,
     crtHistory: 500,
     xScale: 1,
     initStr: "",
     defPageAttr: 0x1010,
     defCrsrAttr: 0x0207,
     defCellAttr: 0x0007,
     telnet: 1,
     autoConnect: 0
 };

I will eventually run this behind nginx proxy manager but for now just testing within my network I only get a black screen called Lugcast Land and no vtx client when going to http://machineIP/vtx.html. If I go to http://machineIP:8810 I get a message "ENiGMAA1/2 BBS WebSocket Server!" so websockets are working. Going to to browser console I see the following error:

The link for the error goes here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default Unfortunately I don't know much about js so this is greek to me but line 4715 within the vtxclient that it is referencing is this:

Anymore info needed let me know.

[minnixtx]

Looking at the vtx_clientserver issues, someone else is having the same problem: codewar65/VTX_ClientServer#9 and it hasn't been addressed by dev.

[NuSkooler]

Looks like a piece of data expecting an array is not actually an array.

Try browsing to https://xibalba.l33t.codes, check out the VTX setup there. You can view source for all of it. May be a config problem.

[minnixtx]

Looks like a piece of data expecting an array is not actually an array.

Try browsing to https://xibalba.l33t.codes, check out the VTX setup there. You can view source for all of it. May be a config problem.

You are right. I'm use the config from here https://nuskooler.github.io/enigma-bbs/servers/loginservers/websocket.html

Looking at xibalba I changed the following to match: defCrsrAttr: [ 'thick', 'horizontal' ], and defCellAttr: [] and the VTX client appears.

I am running the webserver on the host itself (nginx) and am unable to have enigma appear within the client. Whenever I choose connect, the lightning bolt turns yellow but nothing happens. My vtxdata.js is as below:

var vtxdata = {
     sysName: "Lugcast Land",
     wsConnect: "ws://192.168.57.116:8810",
     term: "ansi-bbs",
     codePage: "CP437",
     fontName: "UVGA16",
     fontSize: "24px",
     crtCols: 80,
     crtRows: 25,
     crtHistory: 500,
     xScale: 1,
     initStr: "",
     defPageAttr: 0x1010,
     defCrsrAttr: [ 'thick', 'horizontal' ],
     defCellAttr: [],
     telnet: 1,
     autoConnect: 0
 };

I can get to the VTX client via local ip /vtx.html but that's it. I have a proxy server that I will expose this to the internet with but would like to at least get it running locally first.

[NuSkooler]

@minnixtx What does your nginx configuration for this look like? Also, just so you are aware, browsers won't let you connect insecurely, so you'll have to TLS aka wss://.

For my setup, it looks something like this:
Web wss:// -> [Firewall/NAT] -> nginx (TLS termination) -> enigma WebSocket (ws://). In this case, nginx maintains the trusted SSL/TLS certificate. I use Let's Encrypt for this personally.

With nginx in the mix, you need to allow it to do a WebSocket upgrade over the port (see nginx docs)

The alternative is direct:
Web wss:// -> [Firewall/NAT] -> enigma WebSocket wss://. In this case, you need to supply enigma with a trusted SSL/TSL certificate.

Hopefully that helped some

[minnixtx]

I don't have a config which is probably the problem. I don't believe it's a TLS problem or I wouldn't even be able to see the client. Of course I have to tell the browser to allow an insecure connection. As I mentioned before it will eventually pass through a reverse proxy to terminate ssl before I expose it to the internet. My proxy is nginx proxy manager which terminates about 25 other servers.

With nginx in the mix, you need to allow it to do a WebSocket upgrade over the port (see nginx docs)

I believe this is the issue. I'll have to create a small nginx conf for this purpose just to pass it off to NPM. Either that or I may be able to write it within NPM's advanced setting.

Do you mind sharing the snippet of your nginx conf that pertains to the websocket proxying?

[NuSkooler]

@minnixtx https://nginx.org/en/docs/http/websocket.html

I'm in a similar boat with a ton of routing via nginx, but this is exactly what I have for my Xibalba / WebSocket endpoint/backend.

[cognitivegears]

@minnixtx Just wanted to check in with you to see if the WebSocket upgrade was able to resolve your issue?

[minnixtx]

Hey guys, sorry for the long pause. I have been dealing with Covid. As soon as I have the energy again I will get back on this,

[cognitivegears]

Added an enhancement #517 for a documentation update to make some of this clearer for other users setting up VTX. Let us know what you find out @minnixtx