Semua Tentang Belajar Teknologi Digital Dalam Kehidupan Sehari - Hari

Kamis, 09 November 2023

Cara Chat GPT Membantu Kodingan Kamu - Edisi Subscribe Topic MQTT Web Socket

 



Chat GPT versi gratis 3.5 memang memiliki keterbatasan, "coba bandingkan dengan versi 4 yang berbayar", kata teman saya. Tidak langsung bisa dipakai dan akan memungkinkan sekali terjadi kesalahan konsep maupun koding dari jawaban yang  diberikan. Namun setidaknya sudah membuka pikiran lah kata teman saya yang ahli coding sejak kuliah. Lhaa ada teman lain yang kapok mecoba chatgpt karena malah membikin  tambah pusing karena jawabannya gak pernah sesuai. Ingat chatGPT itu memperoleh jawaban dari hasil training berulang-ulang dari konteks yang diberikan oleh coder nya maupun hasil interaksi dengan pengguna. Jadi tunggu beberapa tahun lagi maka sepertinya semakin menjadi benar apa yang dijawab oleh chatGPT.


Baca dulu : ChatGPT dan Publish MQTT melalui websocket


Seperti pada response chatGPT atas  pertanyaan saya tentang coding subscribe MQTT dibawah ini, dan perhatikan muncul error pada console di web browser.


<!DOCTYPE html>
<html>
<head>
    <title>MQTT WebSocket Subscriber</title>
</head>
<body>
    <h1>MQTT WebSocket Subscriber</h1>

    <label for="topic">Topic:</label>
    <input type="text" id="topic" placeholder="Enter the topic to subscribe to">
    
    <button id="subscribeButton">Subscribe to Topic</button>

    <div id="messageDisplay">
        <!-- Received messages will be displayed here -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
    <script>
        var client = null; // MQTT client
        
        // Function to handle the button click
        function subscribeToTopic() {
            var topicInput = document.getElementById("topic");
            var topic = topicInput.value;

            if (!client) {
                client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId");

                // Set up the connection options
                var options = {
                    useSSL: false, // Set to true if your broker supports secure WebSocket connections
                    onSuccess: onConnect,
                    onFailure: onFailure,
                };

                // Set up the message handler
                client.onMessageArrived = onMessageArrived;
                
                // Connect to the MQTT broker via WebSocket
                client.connect(options);
            }

            // Subscribe to the specified MQTT topic
            client.subscribe(topic);
        }

        // Called when the connection is successful
        function onConnect() {
            console.log("Connected to the MQTT broker");
        }

        // Called when the connection fails
        function onFailure(message) {
            console.log("Connection failed: " + message.errorMessage);
        }

        // Called when a message is received
        function onMessageArrived(message) {
            var messageDisplay = document.getElementById("messageDisplay");
            messageDisplay.innerHTML += "Received message: " + message.payloadString + "<br>";
        }

        // Attach the click event to the button
        var subscribeButton = document.getElementById("subscribeButton");
        subscribeButton.addEventListener("click", subscribeToTopic);
    </script>
</body>
</html>

Console menampilkan hasil error berikut :


Ternyata subscribe ke topik gagal karena terjadi kesalahan berupa koneksi ke broker belum terjadi. Bagaimana bisa subscribe kalau konek aja belum ? Jadi saya harus memperbaiki dengan mengeluarkan proses connect ke luar dari function " subscribeToTopic() " dan menempatkan diawal <script>.


        if (!client) {
            client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId-12323");

                // Set up the connection options
           var options = {
                    useSSL: false, // Set to true if your broker supports secure WebSocket connections
                    onSuccess: onConnect,
                    onFailure: onFailure,
                };
		        // Set up the message handler
                client.onMessageArrived = onMessageArrived;
                
                // Connect to the MQTT broker via WebSocket
                client.connect(options);
            }



Dan benar saja pesan dapat dikirimkan dari client mqtt explorer dari PC saya menuju web browser melalui websocket port 8000.




Selanjutnya saya tinggal mengabungkan script sub dan pub sebelumnya untuk membuat aplikasi "e-voting" yang lebih menarik "UI" nya dan siap didemokan.




Chat GPT memang keren broooo....asal bisa menggiringnya saja ya...
Share:

0 komentar:

Posting Komentar

Kontak Penulis



12179018.png (60×60)
+628155737755

Mail : ahocool@gmail.com

Site View

Categories

555 (8) 7 segmen (3) adc (4) amplifier (2) analog (19) android (12) antares (10) arduino (26) artikel (11) attiny (3) attiny2313 (19) audio (5) baterai (5) blog (1) bluetooth (1) chatgpt (2) cmos (2) crypto (2) dasar (46) digital (11) dimmer (5) display (3) esp8266 (26) euro2020 (13) gcc (1) iklan (1) infrared (2) Input Output (3) iot (61) jam (7) jualan (12) kereta api (1) keyboard (1) keypad (3) kios pulsa (2) kit (6) komponen (17) komputer (3) komunikasi (1) kontrol (8) lain-lain (8) lcd (2) led (14) led matrix (6) line tracer (1) lm35 (1) lora (9) MATV (1) memory (1) metal detector (4) microcontroller (70) micropython (6) mikrokontroler (1) mikrokontroller (14) mikrotik (5) modbus (9) mqtt (3) ninmedia (5) ntp (1) paket belajar (19) palang pintu otomatis (1) parabola (88) pcb (2) power (1) praktek (2) project (33) proyek (1) python (7) radio (28) raspberry pi (4) remote (1) revisi (1) rfid (1) robot (1) rpm (2) rs232 (1) script break down (3) sdcard (3) sensor (2) sharing (3) signage (1) sinyal (1) sms (6) software (18) solar (1) solusi (1) tachometer (2) technology (1) teknologi (2) telegram (2) telepon (9) televisi (167) television (28) transistor (2) troubleshoot (3) tulisan (93) tutorial (108) tv digital (6) tvri (2) vu meter (2) vumeter (2) wav player (3) wayang (1) wifi (3)

Arsip Blog

Diskusi


kaskus
Forum Hobby Elektronika