• General
  • Remote Internet access to IDE or GUI

Hello, I'm interested in accessing the GUI running on my BELA remotely over the internet. I'm using the device in a remote art installation and would like to use the GUI to check its status and control various aspects. The Bela is connected via ethernet to a WiFi router which has a 3G modem, so it should be accessible via the internet, but I'm unsure how to go about this. Accessing either the full IDE or just interacting with the GUI would work for my situation.

If there is a known method or a general approach I'd love to get some advice, thank you.

    brycebot Accessing either the full IDE or just interacting with the GUI would work for my situation.

    They are both served on port 80 by the on-board http server. This means that as long as you can reach that port on the board you should be fine. Normally, another device on the same wifi network should be able to access it with no problem. If you had a "regular" home ADSL router you could set up port forwarding on the router to access it from a remote place, knowing the IP address of the router on the internet. However I think with 3G routers things are not as easy because I don't think individual devices have a publicly accessible IP address. To circumvent this limitation one could set up some sort of proxy server I imagine, but that is beyond my knowledge. Good thing is that it is a generic application and not Bela-specific. So googling "access server 3g" should be a good starting point.

    However you end up doing this, do not forget to add some extra security to your system, as currently anyone who can access any of these boards has complete unrestricted access to your board. One option would be to only allow connections from a specific, safe IP.

      3 years later

      So I'm currently trying to remote access my Bela but not everything seems to work.

      I've been using cloudflared to set up a tunnel to the Bela accessing localhost:80 over a domainname. The IDE seems functional, no trouble compiling and starting patches but when I open the GUI it get stucks on the "In order to use the GUI functionality in Bela..." page.

      Opening the dev console (Firefox) gives me these errors:

      HTTPS-Only Mode: Upgrading insecure request “ws://bela.domain.net:5555/gui_data” to use “wss”.
      Firefox can’t establish a connection to the server at wss://bela.domain.net:5555/gui_data.

      After this I've edited BelaWebSocket.js to use wss instead of ws like this:

      this.url = "wss://" + this.ip + ":"+this.port+"/"+this.address;

      But this doesn't help either:

      Firefox can’t establish a connection to the server at wss://bela.domain.net:5555/gui_control. 
      Error: undefined
      error { target: WebSocket, isTrusted: true, srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }
      Socket closed
      Reconnecting(1)... 
      Object { port: 5555, address: "gui_control", ip: "bela.domain.net", ws: WebSocket, connectInterval: 1500, url: "wss://bela.domain.net:5555/gui_control", projectName: null, sliders: [], selectors: [], gui: null, … }
      Retrying connection in 1500 ms

      It says the socket is closed but:

      netstat -tuln | grep 5555
      tcp        0      0 0.0.0.0:5555            0.0.0.0:*               LISTEN    

      I have also tried this using another reverse proxy called boringproxy but results are the same.

        giuliomoro hey are both served on port 80 by the on-board http server.

        Well should add here that port 5555 is also needed, as shown above, so make sure you have a dedicated tunnel for 5555 as well as 80.

        remotely The IDE seems functional, no trouble compiling and starting patches but when I open the GUI it get stucks on the "In order to use the GUI functionality in Bela..." page

        That's good. The IDE uses a node websocket, which seems to work just fine. Can you check the console when loading the IDE page and check if you get a similar "Upgrading insecure request" message?

        The websocket used by the GUI is handled by libseasocks, which is less featured and doesn't support secure connections, hence the connection fail. In principle things should work over the unsecure connection, but it seems your browser may have been set up enabling an HTTPS-Only Mode. This might be helpful to disable HTTPS-Only Mode globally or for this specific site, at which point it may work.

        I'm not familiar with cloudflared, is there any authentication built in? I've previously done manual tunnelling of ports via ssh to achieve a similar result, so ssh authentication was requested. In your case you seem to have exposed your board at bela.domain.net. If there's not authentication, then that's pretty dangerous.

          giuliomoro I'm not familiar with cloudflared, is there any authentication built in?

          Yes, cloudflared makes it easy to configure 2FA/MFA authentication in quite a few ways

          giuliomoro Well should add here that port 5555 is also needed, as shown above, so make sure you have a dedicated tunnel for 5555 as well as 80.

          Yes, good point, I do have two tunnels pointed to the same domain name, one HTTP port for 80, and a TCP port for 5555.
          Turning of HTTPS-Only Mode does result in different behavior. This time the page is completely blank and the console throws:

          Uncaught DOMException: The operation is insecure.
              connect https://bela.domain.net/gui/js/BelaWebSocket.js:15
              BelaWebSocket https://bela.domain.net/gui/js/BelaWebSocket.js:11
              BelaData https://bela.domain.net/gui/js/BelaData.js:5
              Bela https://bela.domain.net/gui/js/Bela.js:12
              <anonymous> https://bela.domain.net/gui/:28
          BelaWebSocket.js:15

          giuliomoro Can you check the console when loading the IDE page and check if you get a similar "Upgrading insecure request" message?

          The IDE page still works and no messages about websockets whatsoever.

          I have to add that I reversed this.url = "wss://" + this.ip + ":"+this.port+"/"+this.address; back to use ws://

          It seems you are serving it from https, and so it doesn't want to connect to an insecure ws. Any chance you can serve it at http? I suspect that would work, but then it may affect cloudflared's security?

          Disabling https does indeed disable cloudflare's 2FA layer but also sadly doesn't fix the problem

          WebSocket connection to 'ws://bela.domain.net:5555/gui_data' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
          17 days later

          Just to update:

          Still didn't manage to make the GUI work. Decided to implement variables in the code instead as my usecase is a set-and-forget-it type of thing. IDE access is fortunately sufficient for this.

          If anyone ever finds out how to make the GUI work remotely, I'd love to hear from you 🙂

          I guess one could add a node proxy for forwarding the websocket in an "internet-friendly" way