How can I achieve ws://mq.domain.com:8083/mqtt and wss://mq.domain.com:8084/mqtt in a web application? #965

willpan122 · 2023-10-20T05:40:42Z

willpan122
Oct 20, 2023

I'm using the EMQ X MQTT product with version 5.1.4. Here's my setup process:

I installed EMQ X 5.1.4 on Google Kubernetes Engine (GKE) using a Helm chart.

command:
helm repo add https://repos.emqx.io/charts
helm repo update
helm install emqx emqx/emqx -n emqx --set persistence.enabled=true --set persistence.storageClass=premium-rwo --set persistence.size=30Gi

And I used the Helm chart to install ingress-nginx version 4.7.1 to expose ports 80, 443, 1883, 8083, 8084, and 18083 for EMQ X.
I deployed an EMQ X Ingress to establish domain connections.
My issue is that I can't achieve ws://mq.domain.com:8083/mqtt and wss://mq.domain.com:8084/mqtt connections, and I couldn't find any relevant documentation.

Here are some logs from the developer tools:

MQTTX Client Operations:

Using the curl command:

curl -I -N
-H “Connection: Upgrade”
-H “Upgrade: websocket”
-H “Host: domain”
-H “Origin: http://mq.domain.com”
http://mq.domain.com:8083/mqtt

get
HTTP/1.1 400 Bad Request
content-length: 0
date: Thu, 12 Oct 2023 09:06:17 GMT
server: Cowboy

And use wireshark

curl -I -N
-H “Connection: Upgrade”
-H “Upgrade: websocket”
-H “Host: domain”
-H “Origin: http://mq.domain.com”
http://mq.domain.com:8083/mqtt

This is my emqx-ingress.yaml

apiVersion: [networking.k8s.io/v1](http://networking.k8s.io/v1)
kind: Ingress
metadata:
annotations:
[kubernetes.io/ingress.class](http://kubernetes.io/ingress.class): nginx
[nginx.ingress.kubernetes.io/proxy-read-timeout](http://nginx.ingress.kubernetes.io/proxy-read-timeout): “3600”
[nginx.ingress.kubernetes.io/proxy-send-timeout](http://nginx.ingress.kubernetes.io/proxy-send-timeout): “3600”
[nginx.ingress.kubernetes.io/websocket-services](http://nginx.ingress.kubernetes.io/websocket-services): emqx:8083
[nginx.ingress.kubernetes.io/server-snippets](http://nginx.ingress.kubernetes.io/server-snippets): |
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_set_header Connection “upgrade”;
proxy_cache_bypass $http_upgrade;
}

name: emqx-ingress
namespace: emqx
spec:
ingressClassName: nginx
rules:

host: [mq.domain.com](http://mq.domain.com/)
http:
paths:
backend:
service:
name: emqx
port:
number: 8083
path: /mqtt
pathType: Prefix
backend:
service:
name: emqx
port:
number: 18083
path: /
pathType: Prefix
tls:
secretName: letsencrypt-certificate-tls
status:
loadBalancer:
ingress:
ip: XX.XXX.XXX.XXX

Rory-Z · 2023-10-20T06:04:24Z

Rory-Z
Oct 20, 2023
Maintainer

Hi, I'm sorry I don't understand, Is your means can connect emqx by mqttx, but can't conect emqx by your code ?

PS: could you please format your YAML file in issue context ? you can use the code text by Markdown syntax

4 replies

willpan122 Oct 20, 2023
Author

Yes, I'm unable to establish a WebSocket connection to EMQX using code.

This is my code.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

  <script>

    const host = 'ws://mydomain:8083/mqtt'

    const options = {
      keepalive: 60,
      clientId: 'iphone1/!EhOiT3jUK!',
      protocolId: 'MQTT',
      protocolVersion: 4,
      clean: true,
      reconnectPeriod: 1000,
      connectTimeout: 30 * 1000,
      will: {
        topic: 'WillMsg',
        payload: 'Connection Closed abnormally..!',
        qos: 0,
        retain: false
      }
    }

    console.log('Connecting mqtt client')
    const client = mqtt.connect(host, options)

    //client.on('error', err => {
    //  console.log('Connection error: ', err)
    //  client.end()
    //})

    client.stream.on('error', (err) => {
        console.log('error', err);
        client.end()
    });

    client.on('reconnect', () => {
      console.log('Reconnecting...')
    })
    
    //const URL = "ws://mydomain:8000";

    //mqtt.connect(URL, {
    //  connectTimeout: 5000,
    //  hostname: "mydomain",
    //  port: 8000,
  //     path: "/mqtt",
  //   });
  // </script>

</body>

</html>

ysfscream Oct 20, 2023

Hi @willpan122,

Thank you for providing your code details. I ran your code and attempted connections to both my local EMQX instance and broker.emqx.io. I can confirm that I was able to successfully connect to both. To ensure the connection was established, I added the following listener:

client.on('connect', () => {
  console.log('Client connected:' + options.clientId);
  client.subscribe('testtopic', { qos: 0 });
  client.publish('testtopic', 'ws connection demo...!', { qos: 0, retain: false });
});

This produced the expected outputs in my console, and I could also observe the connection and messages within the EMQX dashboard.

I don't know how you're serving your HTML file. I noticed that you mentioned using Vite. The official mqtt.js does have a Vite example which you might find useful: vite-example for mqtt.js.

This example might provide some insights related to your setup. It would be beneficial if you could share more details regarding your setup and configuration so I might be better positioned to assist.

ysfscream Oct 20, 2023

Or let me see what's the error msgs in your console where I see:

willpan122 Oct 23, 2023
Author

okay,this is my error msgs.
https://emqx-test.pages.dev/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I achieve ws://mq.domain.com:8083/mqtt and wss://mq.domain.com:8084/mqtt in a web application? #965

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How can I achieve ws://mq.domain.com:8083/mqtt and wss://mq.domain.com:8084/mqtt in a web application? #965

willpan122 Oct 20, 2023

Replies: 1 comment · 4 replies

Rory-Z Oct 20, 2023 Maintainer

willpan122 Oct 20, 2023 Author

ysfscream Oct 20, 2023

ysfscream Oct 20, 2023

willpan122 Oct 23, 2023 Author

willpan122
Oct 20, 2023

Replies: 1 comment 4 replies

Rory-Z
Oct 20, 2023
Maintainer

willpan122 Oct 20, 2023
Author

willpan122 Oct 23, 2023
Author