MQTT, Public URL and React

Project help
1

Hi all,
I am facing a problem that I am not sure how to solve.
I want to add remote configuration for my apps. I am doing this using React and Typescript where I open a webpage over port 80.
One of the catches is that I do not have access to the local file system this way. I therefore would like to publish this config.json over MQTT.
I have a mosquitto container configured to listen socket on port 9001, but when I try connect my mqtt client to the URL wss:localhost:9001 I get the following errors.
bundle.js:125597 WebSocket connection to ‘wss://localhost:9001/’ failed:
WebSocket connection to ‘wss://f2d2fe3110830500d6d35e536afb4ecf.balena-devices.com:80/ws’ failed:
I’m really hoping there is a simple solution to this problem, but yeah. Any advice would be greatly appreciated

2

Hello @jamiear first of all welcome to the balena community!

Could you please share more details of the docker-compose and see how we can help you more?

Thanks!

3

Hey @mpous and thanks for the speedy reply!

My docker-compose looks like this

version: '2'
volumes:
  dbus:
  minimalx:
services:
  configuration_manager:
    build: ./configuration_manager
    network_mode: "host"
    volumes:
      - 'minimalx:/minimalx'
    ports:
      - 80:80
      - 3000:3000
      - 1883:1883
  mqtt:
    build: ./mqtt
    network_mode: "host"
    ports:
      - 1883:1883
      - 9001:9001

and the mqtt app is basically just eclipse-mosquitto:latest with some config that looks like this

persistence false

listener 9001
protocol websockets

listener 1883
protocol mqtt

which allows the broker to listen to websocket 9001 (as far as I understand)

The flow that I would like is as follows:
Open a react based webpage via the public URL, edit/create a config JSON, publish this config JSON via MQTT, preferably just using the local broker.

4

@jamiear instead of using localhost did you try mqtt or the local ip address of the device?

5

Yeah just tried both of those and I still get the same:

WebSocket connection to 'wss://f2d2fe3110830500d6d35e536afb4ecf.balena-devices.com:80/ws' failed: 

mqtt.esm.js:5 WebSocket connection to 'wss://192.168.128.48:9001/' failed:

(for the case of device IP)

6

Hello @jamiear apologizes to do not mention that but the Public URL only give access to the port 80 or 8080!

You can read more here Communicate outside the container - Balena Documentation

7

Okay… are you saying that I should specify the websocket port as 8080? I am already opening the webpage on port 80 in this case and I can view it via the public URL link on the dashboard.
The issue I am having is with communicating data from the webpage to the device

8

@jamiear if you want to publicly use the Public device URL for the websockets, yes you might need to use the port 8080. Having said that, the Public device URL shouldn’t be a production solution.