Semua Tentang Belajar Teknologi Digital Dalam Kehidupan Sehari - Hari

  • IC Timer 555 yang Multifungsi

    IC timer 555 adalah sirkuit terpadu (chip) yang digunakan dalam berbagai pembangkit timer, pulsa dan aplikasi osilator. Komponen ini digunakan secara luas, berkat kemudahan dalam penggunaan, harga rendah dan stabilitas yang baik

  • Ayo Migrasi TV Digital

    Kami bantu anda untuk memahami lebih jelas mengenai migrasi tv digital, apa sebabnya dan bagaimana efek terhadap kehidupan. Jasa teknisi juga tersedia dan siap membantu instalasi - setting perangkat - pengaturan antena dan distribusi televisi digital ke kamar kos / hotel

  • Bermain DOT Matrix - LOVEHURT

    Project Sederhana dengan Dot Matrix dan Attiny2313. Bisa menjadi hadiah buat teman atau pacarmu yang ulang tahun dengan tulisan dan animasi yang dapat dibuat sendiri.

  • JAM DIGITAL 6 DIGIT TANPA MICRO FULL CMOS

    Jika anda pencinta IC TTL datau CMOS maka project jam digital ini akan menunjukkan bahwa tidak ada salahnya balik kembali ke dasar elektronika digital , sebab semuanya BISA dibuat dengan teknologi jadul

  • Node Red - Kontrol Industri 4.0

    Teknologi kontrol sudah melampaui ekspektasi semua orang dan dengan kemajuan dunia elektronika, kini semakin leluasa berkreasi melalui Node Red

Tampilkan postingan dengan label chatgpt. Tampilkan semua postingan
Tampilkan postingan dengan label chatgpt. Tampilkan semua postingan

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:

Cara Chat GPT Membantu Kodingan Kamu - Edisi Publish MQTT Web Socket

 



Perkenalan saya dengan fenomena Artificial Inteligent "Chat GPT" memasuki tahun ke dua dan terus menghasilkan rasa takjub di otak saya. Walau ada sedikit ke khawatiran yang selalu muncul sejak awal, yaitu mungkin akan mengakibatkan  'kemalasan' otak untuk berpikir. Namun atas saran seorang teman yang sangat membanggakan platform dari openAI apalagi si dia sudah mencoba versi 4 yang berbayar, saya makin gatel untuk mencobanya. Asalkan kamu bisa menggiring "prompt"  nya, maka semua pertanyaan yang kamu ajukan akan mendapatkan hasil yang memuaskan, begitu saran teman saya ini.

Seperti pada tulisan kali ini disaat suntuk kepanasan di siang bolong, saya membaca kembali tulisan saya sebelumnya tentang e-voting menggunakan MQTT dan python ( disini ), dan ketika melihat tampilan e-votingnya begitu 'rudimental' maka saya teringat dulu saya pernah juga membuat APK android  berbasis web saat bermain-main esp8266 dan kunci motor, bisa dibaca disini

Tapi permasalahannya saya gak paham apakah "plain" html dapat melakukan koding MQTT ? Seingat saya ada istilah di broker mqtt yang saya sering gunakan yaitu hivemq memiliki support terhadap protokol websocket di port 8000. Daripada pusing maka saya menggunakan fasilitas chat GPT untuk mencari jawaban bagaimana  cara coding htmlnya. Ayo saya share ke pembaca langkah2 saya menggunakan chat GPT.



Saya iseng aja membuka pembicaraan seperti gambar diatas dengan bertanya apakah chat gpt dapat mengirimkan pesan MQTT ? Ya tentu saja chat gpt namanya saja "chat" ya terbatas untuk mengirimkan jawaban dari pertanyaan. Selanjutnya saya menggiring chat gpt untuk menjawab pertanyaan seperti "kapan kira-kira bisanya kirim pesan mqtt?" , "apa kirim sms bisa lewat chat gpt?", "tolong dong kirimkan pesan mqtt", sangat iseng pokoknya.

Sampai saat saya waras kembali, saya mengajukan pertanyaan sederhana: " Can i send mqtt message via HTML ?" dan jawabannya mencerahkan saya.



Yes, you can send MQTT messages from a web page using HTML and JavaScript, but you would need to use a JavaScript library or framework that supports MQTT, such as the Eclipse Paho MQTT JavaScript library. Here are the general steps to send MQTT messages from a web page:

  1. Include the MQTT JavaScript library: You need to include the MQTT JavaScript library in your HTML page. You can do this by including the library's JavaScript file in your HTML, like this:
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>


Dan kemudian saya meminta untuk dituliskan contohnya, " show me complete html for mqtt publisher".

Creating a complete HTML page for an MQTT publisher requires more than just HTML; you'll need JavaScript and, optionally, CSS to create a user interface. Below is a basic example of an HTML page that includes JavaScript for an MQTT publisher. This example uses the Eclipse Paho MQTT JavaScript library to send messages to an MQTT broker. Remember to replace the MQTT broker and topic information with your own.

html
<!DOCTYPE html> 
<html> <head> <title>MQTT Publisher</title> </head> <body> <h1>MQTT Publisher</h1> <label for="message">Message:</label> <input type="text" id="message" placeholder="Enter your message"> <button id="publishButton">Publish Message</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script> <script> // Function to handle the button click function publishMessage() { var messageInput = document.getElementById("message"); var message = messageInput.value; // Create an MQTT client var client = new Paho.MQTT.Client("mqtt.eclipse.org", 80, "clientId"); // Set up the connection options var options = { onSuccess: onConnect, onFailure: onFailure, }; // Connect to the MQTT broker client.connect(options); // Called when the connection is successful function onConnect() { console.log("Connected to the MQTT broker"); // Send the MQTT message var message = new Paho.MQTT.Message(message); message.destinationName = "your/topic"; // Replace with your desired MQTT topic client.send(message); } // Called when the connection fails function onFailure(message) { console.log("Connection failed: " + message.errorMessage); } } // Attach the click event to the button var publishButton = document.getElementById("publishButton"); publishButton.addEventListener("click", publishMessage); </script> </body> </html>
*)Scriptnya agak kacau disini, namun di chat gpt dan editor notepad saya rapi kok !


Wihhh ayo kita coba langsung copy paste di notepad, sesuaikan parameter dan jalankan ! namun ada error yang muncul pada console html ( pencet click kanan lalu pilih  inspeksi  atau CTRL+SHIFT+I) dimana  library java nya error. Lalu saya bertanya begini :

mqttws31.min.js got error


dan dijawab :


I apologize for any confusion. The mqttws31.min.js script I mentioned earlier might not be the latest version, and it's possible that it may not work as expected. HiveMQ and the Paho MQTT library may have evolved since my last update.

To ensure that you are using an up-to-date version of the Paho MQTT JavaScript library that works with HiveMQ, it's best to include the latest version from a reliable source. You can get the latest version from the Eclipse Paho GitHub repository or their official website.

Here's how to include the latest version from the Eclipse Paho GitHub repository:

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/mqttws31.min.js"></script>

Alternatively, you can download the library directly from the Eclipse Paho GitHub repository and host it on your own server to ensure you are using the most recent version:

  1. Go to the Eclipse Paho GitHub repository for JavaScript: https://github.com/eclipse/paho.mqtt.javascript

  2. Download the latest release of the Paho JavaScript library.

  3. Host the downloaded JavaScript file on your server or include it directly in your HTML as needed.

Remember to replace "your-hivemq-broker-url" and other configuration settings with the correct values for your HiveMQ instance. Additionally, make sure that your HiveMQ instance is properly configured to support WebSocket connections.



Dan hasilnya untuk contoh (yang sudah saya sesuaikan) script pub yang benar ke broker seperti berikut 

<!DOCTYPE html>
<html>
<head>
    <title>MQTT WebSocket Publisher</title>
</head>
<body>
    <h1>MQTT WebSocket Publisher</h1>
    
    <label for="message">Message:</label>
    <input type="text" id="message" placeholder="Enter your message">
    
    <button id="publishButton">Publish Message</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>
	
    <script>
        // Function to handle the button click
        function publishMessage() {
            var messageInput = document.getElementById("message");
            var pesan = messageInput.value;

            // Create an MQTT client
            var client = new Paho.MQTT.Client("broker.hivemq.com", Number(8000), "clientId-yttggg");

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

            // Connect to the MQTT broker via WebSocket
            client.connect(options);

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

                // Send the MQTT message
                var message = new Paho.MQTT.Message(pesan);
                message.destinationName = "/ahocool/chatgpt"; // Replace with your desired MQTT topic
                client.send(message);

                // Disconnect after sending the message (optional)
                client.disconnect();
            }

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

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



Hasilnya ketika saya membuka client mqtt dan klik publish pada topik "/ahocool/chatgpt " seperti gambar berikut :




Selanjutnya pada tulisan berikut akan kita bahas mengenai proses subscribe dan masih dengan bantuan chatgpt.
Share:

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