Cara Chat GPT Membantu Kodingan Kamu - Edisi Subscribe Topic MQTT Web Socket ~ CARA MUDAH BELAJAR ELEKTRONIKA DIGITAL

Kamis, 09 November 2023

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

ahocoolNovember 09, 2023 Tidak ada komentar

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.