WWW.USBINOV.COMPiranti USB untuk PC, Laptop dan Raspberry Pi.

Contoh Program Monitoring GPIO Raspberry Pi Via Web Menggunakan websocketd

Memantau kondisi atau monitoring GPIO Raspberry Pi melalui web browser dapat dengan mudah kita lakukan dengan teknologi WebSocket. WebSocket adalah protokol komunikasi yang memungkinkan diadakannya komunikasi full-duplex melalui koneksi TCP tunggal. WebSocket dirancang untuk digunakan dalam Web Browser dan Web Server. Dengan WebSocket transfer data secara real-time dari server maupun ke dalam server dapat dilakukan. Dengan WebSocket, server dapat mengirim pesan kepada browser secara langsung dan tanpa diminta oleh browser. Server juga dapat menerima pesan dari browser melalui koneksi TCP yang telah terbuka.

WebSocket mirip CGI, tapi memiliki kelebihan dibanding CGI karena transfer data dapat dilakukan dengan lebih cepat. WebSocket ditujukan untuk memudahkan komunikasi antara web browser dan web server, namun demikian, WebSocket dapat diaplikasikan pada aplikasi client-server pada umumnya.

Pada catatan eksperimen kali ini, saya akan memberikan contoh sederhana tentang bagaimana kita bisa memonitor kondisi GPIO Raspberry Pi melalui web browser dengan menggunakan teknologi WebSocket. Rangkaian sistemnya sederhana saja, yakni terdiri dari sebuah LED dan sebuah TOMBOL. LED terhubung ke GPIO-2 dan TOMBOL terhubung ke GPIO-3 seperti gambar rangkaian berikut ini.

LED KEY RASPI WEBSOCKET

Pin GPIO-2 difungsikan sebagai OUPUT (mengontrol LED) dan pin GPIO-3 difungsikan sebagai INPUT (membaca kondisi TOMBOL).

LED akan menyala jika pin GPIO-2 berlogika rendah (LOW) dan padam jika pin GPIO-2 berlogika tinggi (HIGH).

Pin GPIO-3 akan berlogika tinggi selama TOMBOl tidak ditekan dan akan berlogika rendah selama TOMBOL ditekan.

Jadi, baik LED dan TOMBOL, keduanya sama-sama menggunakan rangkaian AKTIF-RENDAH.

websocketd

websocketd adalah program websocket daemon yang dengan program ini kita dapat mengirim data ke dan menerima data dari web browser dengan sangat mudah. Untuk mengirim data ke browser yang perlu dilakukan program adalah menulis teks ke STDOUT. Dan untuk menerima data dari browser yang perlu dilakukan program adalah membaca teks dari buffer STDIN.

Dengan konsep yang sederhana ini, kita dapat membuat aplikasi berbasis WebSocket menggunakan bahasa pemrograman apapun. Kita bisa menggunakan BASH, BASIC, C/C++, Java, Perl, PHP, Python, REBOL dan lain sebagainya. Asalkan memiliki fungsi untuk menulis output ke STDOUT dan membaca input dari STDIN, maka bahasa pemrograman tersebut dapat digunakan.

websocketd dapat Anda download secara gratis dari situsnya – tersedia berbagai versi untuk Linux, Linux-ARM, OS-X, Windows, FreeBSD, OpenBSD dan Solaris.

Program gpio-webmon

Program gpio-webmon ini saya buat menggunakan interpreter REBOL. Program secara kontinyu melakukan pengecekan terhadap status pin GPIO-3 dan secara periodik menyalakan dan mematikan lampu LED pada GPIO-2. Berikut adalah listing programnya.

#!r3

REBOL [
	Title: "Contoh web monitoring dengan websocketd"
	File: %gpio-webmon
        Programmer: "Chandra MDE"
        Website: http://raspi.teknikelektrolinks.com
]

gpio-setup: func [num [integer!] /OUTPUT /INPUT][
	if not exists? to file! ajoin ["/sys/class/gpio/gpio" num][
		write %/sys/class/gpio/export ajoin [num newline]
	]
	if OUTPUT [write to file! ajoin ["/sys/class/gpio/gpio" num "/direction"] "out^/"]
	if INPUT [write to file! ajoin ["/sys/class/gpio/gpio" num "/direction"] "in^/"]
]

gpio-out: func [num [integer!] /HIGH /LOW][
	if LOW [
		write to file! ajoin ["/sys/class/gpio/gpio" num "/value"] "0^/"
	]
	if HIGH [
		write to file! ajoin ["/sys/class/gpio/gpio" num "/value"] "1^/"
	]
]

gpio-in: func [num [integer!] /local status][
	status: read to file! ajoin ["/sys/class/gpio/gpio" num "/value"]
	return either status == #{310A} [false] [true]
]

gpio-clean: func [num [integer!]][
	write %/sys/class/gpio/unexport ajoin [num newline]
]

;program utama
gpio-setup/OUTPUT 2
gpio-setup/INPUT 3
jumlah-loop: 0
forever [
	either gpio-in 3 [print "TOMBOL"][print "tombol"]
	jumlah-loop: jumlah-loop + 1
	if jumlah-loop == 10 [
		gpio-out/LOW 2
		print "LED"
	]
	if jumlah-loop == 20 [
		gpio-out/HIGH 2
		print "led"
		jumlah-loop: 0
	]
	wait .1
]

Setelah file program gpio-webmon selesai dibuat, ubah atributnya menjadi executable dengan perintah:

$ chmod +x gpio-webmon

Penjelasan Singkat Program gpio-webmon

Seperti telah disampaikan sebelumnya bahwa program REBOL gpio-webmon ini bertugas untuk menyalakan dan mematikan LED pada GPIO-2 dengan periode tertentu (kisaran 1 detik) dan mendeteksi penekanan TOMBOL pada GPIO-3.

Ketika LED menyala, program mengirimkan data kepada browser sebuah pesan dalam format teks yakni “LED“. Dan ketika LED padam, program mengirimkan data pesan “led” kepada browser.

Ketika TOMBOL ditekan, program akan mengirimkan data “TOMBOL” kepada browser. Dan ketika TOMBOL dilepas, program akan mengirimkan data “tombol” kepada browser.

Karena monitoring dilakukan via web dengan menggunakan web browser, maka diperlukan file website. File halaman website adalah file html statik dengan nama yang sama dengan nama program yakni gpio-webmon (nama file websitenya menjadi gpio-webmon.html).

Nah, berikut ini adalah listing program file gpio-webmon.html.

Listing Program gpio-webmon.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>GPIO Monitoring - websocketd</title>
    <h1>Demo Monitoring GPIO Raspberry Pi</h1>
    <hr><br>
    <style>
      #led {
        font: bold 60px arial;
        color: black;
        text-align: center;
      }
      #tombol {
        font: bold 60px arial;
        color: black;
        text-align: center;
      }
    </style>
    <script>
      var ws = new WebSocket('ws://192.168.1.102/');
      ws.onmessage = function(event) {
        var s = event.data
        if (s=='LED') {
          document.getElementById('led').style.color = 'red';
        } else if (s=='led') {
          document.getElementById('led').style.color = 'black';
        } else if (s=='TOMBOL') {
          document.getElementById('tombol').style.color = 'blue';
        } else if (s=='tombol') {
          document.getElementById('tombol').style.color = 'black';
        }
      }
    </script>
  </head>
  <body>
    <div id="led">[--(LED)--]</div>
    <br>
    <div id="tombol">[>>TOMBOL<<]</div>
    <br><br><br>
    <hr>
    Raspberry Pi Notes - http://raspi.teknikelektrolinks.com
  </body>
</html>

Penjelasan Singkat Skrip gpio-webmon.html

Untuk menangkap data yang dikirimkan oleh program gpio-webmon, digunakan skrip Javascript. Skrip Javascript mendeklarasikan variabel ws sebagai WebSocket dan menangkap data dengan meng-handle event onmessage. Jika data yang diterima adalah “LED“, maka skrip akan melakukan update pada warna font konten [–(LED)–] dari hitam menjadi merah. Dan jika data yang diterima adalah “led“, maka skrip akan meng-update warna font konten [–(LED)–] menjadi hitam.

Demikian pula dengan konten [>>TOMBOL<<]. Jika data yang diterima adalah “TOMBOL“, maka skrip akan meng-update warna font konten menjadi biru. Dan jika data yang diterima adalah “tombol“, maka skrip akan meng-update warnanya menjadi hitam. Berikut adalah cuplikan skrip yang saya maksudkan:

    <script>
      var ws = new WebSocket('ws://192.168.1.102/');
      ws.onmessage = function(event) {
        var s = event.data
        if (s=='LED') {
          document.getElementById('led').style.color = 'red';
        } else if (s=='led') {
          document.getElementById('led').style.color = 'black';
        } else if (s=='TOMBOL') {
          document.getElementById('tombol').style.color = 'blue';
        } else if (s=='tombol') {
          document.getElementById('tombol').style.color = 'black';
        }
      }
    </script>

Penggunaan websocketd

Setelah kedua file di atas siap, kita bisa menjalankan aplikasi web monitoring GPIO Raspberry Pi dengan perintah berikut:

$ sudo ./websocketd --staticdir=. ./gpio-webmon

Dengan perintah tersebut, maka akan tersedia layanan HTTP (port 80) dengan alamat http://192.168.1.102 (alamat IP Raspberry Pi di rumah saya). Kita dapat mengakses file statik gpio-webmon.html melalui browser dengan alamat URL http://192.168.1.102/gpio-webmon.html.

Untuk mengetahui bagaimana hasil eksperimen ini, Anda dapat menyaksikan video demonya melalui YouTube berikut ini.

Kesimpulan

Dari hasil eksperimen dapat disimpulkan bahwa teknologi WebSocket sangat cocok untuk digunakan pada sistem web monitoring. Dengan menggunakan koneksi TCP, maka teknologi ini sangat mendukung sistem monitoring real-time.

Eksperimen ini masih sangat sederhana dan hanya menggunakan transfer data searah saja yakni dari program kepada browser. Anda dapat mempelajari lebih lanjut mengenai WebSocket dan mengembangkan catatan eksperimen ini menjadi aplikasi yang Anda inginkan. Contoh aplikasi yang dapat dibuat antara lain adalah monitoring suhu dan kelembaban ruang server, monitoring mesin produksi, monitoring ruang locker dan lain-lain.

Nah, demikianlah Catatan Eksperimen Raspberry Pi kali ini, semoga bermanfaat.

Sampai jumpa pada catatan eksperimen selanjutnya dan selamat berkarya.

 

 

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *