Online MQTT Web Client: Herhangi Bir Broker'ı Tarayıcınızdan Test Edin

Online bir MQTT web client, hiçbir şey kurmadan doğrudan bir tarayıcı sekmesinden bir broker'a bağlanmanızı, topic'lere abone olmanızı ve test mesajları yayınlamanızı sağlar. Bu rehberde tarayıcı client'larının bir broker'a gerçekte nasıl ulaştığını öğrenecek, ConnectMQ portalına yerleşik client ile eksiksiz bir test oturumu yürütecek ve barındırılan bir aracın karşılayamadığı durumlar için kendinize ait küçük bir tarayıcı client'ı oluşturacaksınız.

Neden Online Bir MQTT Web Client Kullanmalı?

mosquitto_sub gibi komut satırı araçları mükemmeldir, ancak her zaman erişilebilir değildir. Kısıtlamalı bir kurumsal dizüstü bilgisayarda olabilir, bir görüntülü görüşmede bir iş arkadaşınıza yardım ediyor ya da sahadaki bir kurulumu bir tabletten kontrol ediyor olabilirsiniz. Tarayıcı tabanlı bir client kurulum adımını ortadan kaldırır: bir sayfa açın, host'u ve kimlik bilgilerini girin ve canlı trafiğe bakmaya başlayın.

Bir web client'ın tipik işleri:

• Yeni bir cihazın gerçekten yayın yaptığını ve beklediğiniz topic'te yaptığını doğrulamak.
• Test altındaki bir cihaza yapılandırma güncellemesi veya röle açma kapama gibi tek seferlik bir komut göndermek.
• Bir dağıtımdan sonra retained message'ları kontrol etmek.
• Teknik olmayan bir paydaşa, terminal açıklamaya gerek kalmadan verinin aktığını göstermek.
• Bir müşterinin gönderdiği payload'un aynısıyla bir hata raporunu yeniden üretmek.

Web client bir test ve hata ayıklama aracıdır, canlı ortam tüketicisi değildir. Uzun süre çalışan entegrasyonları uygun bir serviste tutun ve tarayıcıyı etkileşimli işler için kullanın.

Tarayıcı MQTT Client'ları Nasıl Bağlanır?

Tarayıcılar ham TCP soketleri açamaz; bu nedenle bir tarayıcı client'ı klasik MQTT portları 1883 veya 8883'ü kullanamaz. Bunun yerine MQTT'yi bir WebSocket bağlantısı içinde tüneller. Broker'ın bir WebSocket dinleyicisi sunması, client'ın da hem portu hem de yolu bilmesi gerekir. Konunun tüm arka planını öğrenmek isterseniz WebSocket üzerinden MQTT rehberimizi okuyun.

ConnectMQ her broker'da şu dinleyicileri sunar:

İki tarayıcı kuralı başarısız bağlantıların çoğunu açıklar. Birincisi, HTTPS üzerinden yüklenen bir sayfa şifrelenmemiş bir ws:// soketi açamaz; tarayıcı bunu karışık içerik (mixed content) olarak engeller. İkincisi, yol önemlidir: /mqtt olmadan wss://broker.connectmq.com:8084 adresine bağlanmak sunucuya ulaşır ama MQTT el sıkışmasını asla tamamlamaz. Tam yolla birlikte güvenli WebSocket kullanın; iki sorun da ortadan kalkar. Broker bir Let's Encrypt sertifikası sunar; bu yüzden tarayıcılar ek bir yapılandırma olmadan ona güvenir.

Adım Adım: ConnectMQ Web Client ile Bir Broker'ı Test Edin

En hızlı yol portala yerleşik MQTT client'ıdır; çünkü broker'ınızın uç noktalarını ve kimlik bilgilerini zaten bilir.

1. app.connectmq.com adresinde kaydolun, ücretsiz Serverless planını seçin ve bir broker oluşturun. Portal sizin için bir kullanıcı adı, parola ve client ID oluşturur.
2. Portaldan tarayıcı içi MQTT client'ını açın. Broker bağlantı bilgileriniz hemen yanında yer alır.
3. Bağlanın. Başarılı bir CONNACK, kimlik bilgilerinin ve client ID'nin kabul edildiği anlamına gelir. Client ID'lerin verilen kimlik bilgilerine bağlı olduğunu unutmayın; bu yüzden kendiniz bir tane uydurmak yerine portalın size verdiği client ID'yi kullanın.
4. Projeniz için joker karakterli bir filtreye, örneğin factory1/#'e abone olun; böylece o kökün altındaki her şeyi görürsünüz.
5. {"temperature": 21.7} gibi bir test payload'unu QoS 1 ile factory1/line1/sensor1/telemetry topic'ine yayınlayın. Abonelik panelinde hemen görünmelidir.
6. Retain bayrağı açık şekilde bir kez daha yayınlayın, bağlantıyı kesin, yeniden bağlanın ve tekrar abone olun. Retained değer anında gelmelidir; bu, broker'ın o topic için son değeri sakladığını kanıtlar.
7. Başka bir sekmede canlı topic gezginini açın. Aynı topic artık ağaçta görünür; bu da mesajın gerçekten broker'dan geçtiğini çapraz kontrol etmenin kullanışlı bir yoludur.

Yalnızca deneme yapmak istiyorsanız, herhangi bir web client'ı wss://broker.connectmq.com:8084/mqtt adresindeki herkese açık MQTT test broker'ına da yönlendirebilirsiniz. Boş olmayan benzersiz herhangi bir client ID ile anonim bağlantıları kabul eder. connectmq/demo/k3x9/... gibi benzersiz bir topic öneki kullanın; çünkü herkese açık alandaki her şey herkes tarafından okunabilir.

MQTT.js ile Minimal Bir Tarayıcı Client'ı Oluşturun

Bazen genel bir aracın sunmadığı davranışa ihtiyaç duyarsınız: özel bir payload üreteci, belirli bir komuta bağlı bir buton ya da bir saha teknisyenine verebileceğiniz bir sayfa. MQTT.js tarayıcıda çalışır ve WebSocket'leri yerel olarak konuşur. Bundler tabanlı herhangi bir projeye (Vite, webpack veya benzeri) npm install mqtt ile kurun, ardından aşağıdaki modülü kullanın:

import mqtt from "mqtt";

const prefix = `connectmq/demo/${Math.random().toString(16).slice(2, 8)}`;
const clientId = `web-${Math.random().toString(16).slice(2, 10)}`;

const client = mqtt.connect("wss://broker.connectmq.com:8084/mqtt", {
  clientId,
  protocolVersion: 5,
  clean: true,
  connectTimeout: 10_000,
  reconnectPeriod: 3_000,
  // Özel broker'ınız için portaldaki kimlik bilgilerini ekleyin:
  // username: "YOUR_USERNAME",
  // password: "YOUR_PASSWORD",
  // ve clientId: "YOUR_CLIENT_ID" kullanın
});

client.on("connect", (connack) => {
  console.log("Connected, reason code:", connack.reasonCode ?? 0);
  client.subscribe(`${prefix}/#`, { qos: 1 }, (err, granted) => {
    if (err) return console.error("Subscribe failed:", err);
    console.log("Granted:", granted);
    client.publish(
      `${prefix}/sensor1/telemetry`,
      JSON.stringify({ temperature: 21.7, ts: Date.now() }),
      { qos: 1 }
    );
  });
});

client.on("message", (topic, payload) => {
  console.log(`${topic} -> ${payload.toString()}`);
});

client.on("error", (err) => console.error("MQTT error:", err.message));
client.on("close", () => console.log("Connection closed"));

Tarayıcı konsolunu açtığınızda bağlantı mesajını, verilen QoS'u ve kendi payload'unuzun size geri döndüğünü görmelisiniz. Kod MQTT 5 kullandığı için connack.reasonCode değeri kullanılabilir ve reddedilen bir bağlantı genel bir hata yerine anlamlı bir neden bildirir.

Canlı Ortam Gizli Bilgilerini Asla Tarayıcıya Göndermeyin

Ön yüz JavaScript'ine koyduğunuz her şey kullanıcı tarafından görülebilir. Dahili bir hata ayıklama sayfası için bu kabul edilebilir; herkese açık bir pano için değildir. Çok sayıda kişinin okuma erişimine ihtiyacı varsa pano için ayrı bir kimlik bilgisi verin ve cihaz kimlik bilgilerini ayrı tutun ya da tarayıcı ile broker arasına küçük bir arka uç koyun. MQTT güvenliği en iyi uygulamaları yazımız kimlik bilgisi ayrımını daha ayrıntılı ele alır.

Online MQTT Client Bağlantı Sorunlarını Giderme

Sorunların çoğu taşıma ayrıntılarına dayanır. Bu kontrol listesini sırayla uygulayın:

1. Yanlış port. 1883 ve 8883 tarayıcıdan çalışmaz. wss:// için 8084 kullanın.
2. Eksik yol. URL /mqtt ile bitmelidir.
3. Karışık içerik. Bir HTTPS sayfası ws:// açamaz. wss://'e geçin.
4. Boş client ID. Herkese açık broker boş olmayan bir client ID gerektirir; özel broker'ınız ise size verileni gerektirir.
5. Yinelenen client ID. İki sekme aynı client ID'yi kullanırsa broker, diğeri her bağlandığında eski oturumu düşürür ve iki sekme de sürekli bağlanıp kopar. Herkese açık broker'da her sekmeye benzersiz bir ID verin.
6. Yanlış kimlik bilgileri. Kullanıcı adını ve parolayı doğrudan portaldan kopyalayın. Tekrarlanan başarısız oturum açma denemeleri, broker'ın kaba kuvvet korumasının bir parçası olarak IP engellemeyi tetikleyebilir; bu yüzden bir döngüde yeniden denemeden önce kimlik bilgilerini düzeltin.
7. Kurumsal proxy. Bazı proxy'ler WebSocket upgrade başlıklarını kaldırır. Doğrulamak için başka bir ağdan test edin.
8. Kotaya ulaşıldı. Ücretsiz Serverless planı 25 bağlantıya kadar izin verir. MQTT 5 ile broker 0x97 (quota exceeded) reason code'unu döndürebilir; MQTT.js client'ı bunu hatasında gösterir.

Belirtileri Okumak

Tarayıcının Ötesine Ne Zaman Geçmeli?

Bir web client etkileşimli kontroller için idealdir, ancak sekmeyle sınırlıdır. Trafiği saatlerce loglamanız, mesajları yeniden oynatmanız veya testleri betiklemeniz gerektiğinde tarayıcı dışında çalışan araçlara geçin. mosquitto_pub ve mosquitto_sub örnekleri betikli testleri ele alır; ConnectMQ VS Code eklentisi CONNACK, SUBACK ve PUBACK reason code'larını editörünüzün içinde gösterir; ConnectMQ Desktop MQTT explorer ise uzun oturumlar için daha uygundur. Büyük bir topic hiyerarşisini görsel olarak incelemek için MQTT topic tarayıcısı anlatımımıza bakın.

Canlı ortam trafiğinin kendisi için önemli karar client değil, broker'dır. Yönetilen bir MQTT broker size güvenli WebSocket uç noktalarını, verilen kimlik bilgilerini ve kutudan çıktığı gibi bir web client ile topic gezgini içeren bir portalı sunar; böylece az önce öğrendiğiniz tarayıcı kontrolleri ilk günden çalışır.

ConnectMQ ile Başlayın

app.connectmq.com adresinde Serverless planında ücretsiz bir broker oluşturun; kredi kartı gerekmez. Kimlik bilgilerini, güvenli WebSocket dahil dört taşımanın tamamını ve bu rehberde kullanılan tarayıcı içi client'ı alırsınız. ConnectMQ'nun kendi sunucunuzu çalıştırmaya kıyasla nasıl olduğunu öğrenmek için bulut MQTT broker seçimi rehberimizi okuyun.

Sık Sorulan Sorular

Bir tarayıcı MQTT 1883 veya 8883 portuna bağlanabilir mi?

Hayır. Tarayıcılar ham TCP soketleri açamaz; bu yüzden WebSocket üzerinden MQTT kullanmaları gerekir. ConnectMQ'da bu, şifreli bağlantılar için wss://<host>:8084/mqtt anlamına gelir.

Online bir MQTT web client'ı gerçek kimlik bilgileriyle kullanmak güvenli mi?

Client, kendi broker'ınızın portalı gibi güvenilir bir sayfada wss:// üzerinden çalışıyorsa güvenlidir. Canlı ortam kimlik bilgilerini bilinmeyen üçüncü taraf web sitelerine yazmaktan kaçının ve cihaz kimlik bilgilerini asla herkese açık ön yüz koduna gömmeyin.

Web client'ımın bağlantısı neden sürekli kopuyor?

En yaygın neden, aynı client ID'yi kullanan iki oturumdur; bu da broker'ın her seferinde eskisini düşürmesine yol açar. Her sekmeye ve araca benzersiz bir client ID verin.

Ücretsiz plan web client'ı içeriyor mu?

Evet. Ücretsiz Serverless planı, tarayıcı içi MQTT client'ı ve canlı topic gezginiyle birlikte portalı içerir.

MQTT 5 özelliklerini tarayıcıdan kullanabilir miyim?

Evet. MQTT.js, protocolVersion: 5 ile MQTT 5'i destekler; böylece tarayıcıdan reason code'ları okuyabilir ve mesaj süresi dolumu ile kullanıcı özellikleri (user properties) gibi özellikleri kullanabilirsiniz.