Dalam tutorial ini Anda akan belajar bagaimana membangun server web dengan ESP32 menggunakan protokol komunikasi WebSocket. Sebagai contoh, kami akan menunjukkan cara membuat halaman web untuk mengontrol output ESP32 dari jarak jauh. Status keluaran ditampilkan di halaman web dan diperbarui secara otomatis di semua klien.
ESP32 akan diprogram menggunakan Arduino IDE dan ESPAsyncWebServer. Kami juga memiliki panduan WebSocket serupa untukESP8266.
Jika Anda telah mengikuti beberapa proyek server web kami sebelumnya seperti ini, Anda mungkin telah memperhatikan bahwa jika Anda memiliki beberapa tab (di perangkat yang sama atau berbeda) dibuka pada saat yang sama, status tidak diperbarui sama sekali tab secara otomatis kecuali Anda me-refresh halaman web. Untuk mengatasi masalah ini, kita dapat menggunakan protokol WebSocket – semua klien dapat diberi tahu saat terjadi perubahan dan memperbarui halaman web yang sesuai.
Tutorial ini didasarkan pada proyek yang dibuat dan didokumentasikan oleh salah satu pembaca kami (Stéphane Calderoni). Anda dapat membaca tutorialnya yang luar biasa di sini.
Memperkenalkan WebSocket
WebSocket adalah koneksi persisten antara klien dan server yang memungkinkan komunikasi dua arah antara kedua belah pihak menggunakan koneksi TCP. Ini berarti Anda dapat mengirim data dari klien ke server dan dari server ke klien pada waktu tertentu.
Klien membuat koneksi WebSocket dengan server melalui proses yang dikenal sebagai jabat tangan WebSocket. Jabat tangan dimulai dengan permintaan/tanggapan HTTP, memungkinkan server untuk menangani koneksi HTTP serta koneksi WebSocket pada port yang sama. Setelah koneksi dibuat, klien dan server dapat mengirim data WebSocket dalam mode dupleks penuh.
Menggunakan protokol WebSockets, server (papan ESP32) dapat mengirim informasi ke klien atau ke semua klien tanpa diminta. Ini juga memungkinkan kami untuk mengirim informasi ke browser web ketika terjadi perubahan.
Perubahan ini dapat berupa sesuatu yang terjadi di halaman web (Anda mengklik tombol) atau sesuatu yang terjadi di sisi ESP32 seperti menekan tombol fisik di sirkuit.
Ulasan Proyek
Inilah halaman web yang akan kami buat untuk proyek ini.
• Server web ESP32 menampilkan halaman web dengan tombol untuk mengubah status GPIO 2;
• Untuk kesederhanaan, kami mengontrol GPIO 2 – LED terpasang. Anda dapat menggunakan contoh ini untuk mengontrol GPIO lainnya;
• Antarmuka menunjukkan status GPIO saat ini. Setiap kali terjadi perubahan pada status GPIO, antarmuka diperbarui secara instan;
• Status GPIO diperbarui secara otomatis di semua klien. Ini berarti bahwa jika Anda memiliki beberapa tab browser web yang dibuka di perangkat yang sama atau di perangkat yang berbeda, semuanya akan diperbarui secara bersamaan.
Bagaimana itu bekerja?
Gambar berikut menjelaskan apa yang terjadi ketika mengklik tombol "Toggle".
Inilah yang terjadi ketika Anda mengklik tombol "Toggle":
1. Klik tombol "Beralih";
2. Klien (browser Anda) mengirimkan data melalui protokol WebSocket dengan pesan “toggle”;
3. ESP32 (server) menerima pesan ini, jadi ia tahu bahwa ia harus mengaktifkan status LED. Jika LED sebelumnya mati, nyalakan;
4. Kemudian, ia mengirimkan data dengan status LED baru ke semua klien juga melalui protokol WebSocket;
5. Klien menerima pesan dan memperbarui status yang dipimpin pada halaman web yang sesuai. Ini memungkinkan kami untuk memperbarui semua klien hampir secara instan ketika terjadi perubahan.
Mempersiapkan Arduino IDE
Kami akan memprogram board ESP32 menggunakan Arduino IDE, jadi pastikan Anda telah menginstalnya di Arduino IDE Anda.
• Memasang Board ESP32 di Arduino IDE(Windows, Mac OS X, Linux)
Memasang Pustaka – Server Web Async
Untuk membangun server web, kami akan menggunakan perpustakaan ESPAsyncWebServer. Pustaka ini memerlukan pustaka AsyncTCP agar berfungsi dengan baik. Klik tautan di bawah untuk mengunduh perpustakaan.
• AsyncTCP
Pustaka ini tidak tersedia untuk diinstal melalui Manajer Perpustakaan Arduino, jadi Anda perlu menyalin file perpustakaan ke folder Perpustakaan Instalasi Arduino. Atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .zip Library dan pilih library yang baru saja Anda unduh.
Kode untuk Server WebSocket ESP32
Salin kode berikut ke Arduino IDE Anda.
Masukkan kredensial jaringan Anda dalam variabel berikut dan kode akan langsung bekerja.
Cara Kerja Kode
Lanjutkan membaca untuk mempelajari cara kerja kode atau lewati ke bagian Demonstrasi.
Mengimpor Libraries
Impor perpustakaan yang diperlukan untuk membangun server web.
Kredensial Jaringan
Masukkan kredensial jaringan Anda dalam variabel berikut:
Keluaran GPIO
Buat variabel bernama ledState untuk menampung status GPIO dan variabel bernama ledPin yang merujuk ke GPIO yang ingin Anda kendalikan. Dalam hal ini, kami akan mengontrol LED on-board (yang terhubung ke GPIO 2).
AsyncWebServer dan AsyncWebSocket
Buat objek AsyncWebServer pada port 80.
Pustaka ESPAsyncWebServer menyertakan plugin WebSocket yang memudahkan untuk menangani koneksi WebSocket. Buat objek AsyncWebSocket bernama ws untuk menangani koneksi di jalur /ws.
Membangun Halaman Web
Variabel index_html berisi HTML, CSS dan JavaScript yang diperlukan untuk membangun dan menata halaman web dan menangani interaksi klien-server menggunakan protokol WebSocket.
Catatan: kami menempatkan semua yang diperlukan untuk membangun halaman web pada variabel index_html yang kami gunakan pada sketsa Arduino. Perhatikan bahwa mungkin lebih praktis untuk memisahkan file HTML, CSS, dan JavaScript yang kemudian Anda unggah ke sistem file ESP32 dan merujuknya pada kode.
Bacaan yang disarankan: Server Web ESP32 menggunakan SPIFFS (Sistem File Flash SPI)
Berikut isi dari variabel index_html:
CSS
Di antara tag <style> </style> kami menyertakan gaya untuk menata halaman web menggunakan CSS. Jangan ragu untuk mengubahnya agar halaman web terlihat seperti yang Anda inginkan. Kami tidak akan menjelaskan cara kerja CSS untuk halaman web ini karena tidak relevan untuk tutorial WebSocket ini.
HTML
Di antara tag <body> </body> kami menambahkan konten halaman web yang terlihat oleh pengguna.
Ada heading 1 dengan teks “ESP WebSocket Server”. Jangan ragu untuk memodifikasi teks itu.
Lalu, ada heading 2 dengan teks “Output – GPIO 2”.
Setelah itu, kami memiliki paragraf yang menampilkan status GPIO saat ini.
%STATE% adalah pengganti untuk status GPIO. Ini akan diganti dengan nilai saat ini oleh ESP32 pada saat mengirim halaman web. Placeholder pada teks HTML harus berada di antara tanda %. Artinya, teks %STATE% ini seperti variabel yang kemudian akan diganti dengan nilai sebenarnya.
Setelah mengirim halaman web ke klien, status perlu berubah secara dinamis setiap kali ada perubahan status GPIO. Kami akan menerima informasi itu melalui protokol WebSocket. Kemudian, JavaScript menangani apa yang harus dilakukan dengan informasi yang diterima untuk memperbarui status yang sesuai. Untuk dapat menangani teks tersebut menggunakan JavaScript, teks tersebut harus memiliki id yang dapat kita referensikan. Dalam hal ini id adalah status ( <span id="state">).
Terakhir, ada paragraf dengan tombol untuk mengaktifkan status GPIO.
Perhatikan bahwa kami telah memberikan id ke tombol ( id="button").
JavaScript – Menangani WebSockets
JavaScript berada di antara tag <script> </script>. Ini bertanggung jawab untuk menginisialisasi koneksi WebSocket dengan server segera setelah antarmuka web dimuat penuh di browser dan menangani pertukaran data melalui WebSocket.
Mari kita lihat cara kerjanya.
Gateway adalah titik masuk ke antarmuka WebSocket.
window.location.hostname mendapatkan alamat halaman saat ini (alamat IP server web).
Buat variabel global baru yang disebut websocket.
Tambahkan event listener yang akan memanggil fungsi onload saat halaman web dimuat.
Fungsi onload() memanggil fungsi initWebSocket() untuk menginisialisasi koneksi WebSocket dengan server dan fungsi initButton() untuk menambahkan event listener ke tombol.
Fungsi initWebSocket() menginisialisasi koneksi WebSocket pada gateway yang ditentukan sebelumnya. Kami juga menetapkan beberapa fungsi panggilan balik saat koneksi WebSocket dibuka, ditutup, atau saat pesan diterima.
Saat koneksi dibuka, kami cukup mencetak pesan di konsol dan mengirim pesan yang mengatakan "hai". ESP32 menerima pesan itu, jadi kami tahu bahwa koneksi telah diinisialisasi.
Jika karena alasan tertentu koneksi soket web ditutup, kami memanggil fungsi initWebSocket() lagi setelah 2000 milidetik (2 detik).
Metode setTimeout() memanggil fungsi atau mengevaluasi ekspresi setelah jumlah milidetik yang ditentukan.
Akhirnya, kita perlu menangani apa yang terjadi ketika kita menerima pesan baru. Server (papan ESP Anda) akan mengirim pesan “1” atau “0”. Sesuai dengan pesan yang diterima, kami ingin menampilkan pesan "ON" atau "OFF" pada paragraf yang menampilkan status. Ingat tag <span> dengan id="state"? Kami akan mendapatkan elemen itu dan menetapkan nilainya ke ON atau OFF.
Fungsi initButton() mendapatkan tombol dengan id (button) dan menambahkan event listener bertipe 'klik'.
Ini berarti bahwa ketika Anda mengklik tombol, fungsi sakelar dipanggil.
Fungsi toggle mengirim pesan menggunakan koneksi WebSocket dengan teks 'toggle'.
Kemudian, ESP32 harus menangani apa yang terjadi ketika menerima pesan ini – alihkan status GPIO saat ini.
Menangani WebSockets – Server
Sebelumnya, Anda telah melihat cara menangani koneksi WebSocket di sisi klien (browser). Sekarang, mari kita lihat cara menanganinya di sisi server.
Beritahu Semua Klien
Fungsi notifyClients() memberi tahu semua klien dengan pesan yang berisi apa pun yang Anda berikan sebagai argumen. Dalam hal ini, kami ingin memberi tahu semua klien tentang status LED saat ini setiap kali ada perubahan.
Kelas AsyncWebSocket menyediakan metode textAll() untuk mengirim pesan yang sama ke semua klien yang terhubung ke server secara bersamaan.
Menangani Pesan WebSocket
Fungsi handleWebSocketMessage() adalah fungsi callback yang akan berjalan setiap kali kami menerima data baru dari klien melalui protokol WebSocket.
Jika kami menerima pesan "toggle", kami mengaktifkan nilai variabel ledState. Selain itu, kami memberi tahu semua klien dengan memanggil fungsi notifyClients(). Dengan cara ini, semua klien diberitahu tentang perubahan dan memperbarui antarmuka yang sesuai.
Konfigurasikan server WebSocket
Sekarang kita perlu mengonfigurasi event listener untuk menangani berbagai langkah asinkron dari protokol WebSocket. Event handler ini dapat diimplementasikan dengan mendefinisikan onEvent() sebagai berikut:
Argumen tipe mewakili peristiwa yang terjadi. Itu dapat mengambil nilai-nilai berikut:
• WS_EVT_CONNECT ketika klien telah masuk;
• WS_EVT_DISCONNECT ketika klien telah keluar;
• WS_EVT_DATA ketika paket data diterima dari klien;
• WS_EVT_PONG sebagai tanggapan atas permintaan ping;
• WS_EVT_ERROR ketika kesalahan diterima dari klien.
Inisialisasi WebSocket
Terakhir, fungsi initWebSocket() menginisialisasi protokol WebSocket.
prosesor()
Fungsi processor() bertanggung jawab untuk mencari placeholder pada teks HTML dan menggantinya dengan apapun yang kita inginkan sebelum mengirimkan halaman web ke browser. Dalam kasus kami, kami akan mengganti %STATE% placeholder dengan ON jika ledState adalah 1. Jika tidak, ganti dengan OFF.
setup()
Di setup(), inisialisasi Serial Monitor untuk keperluan debugging.
Atur ledPin sebagai OUTPUT dan atur ke LOW saat program pertama kali dimulai.
Inisialisasi Wi-Fi dan cetak alamat IP ESP32 pada Serial Monitor.
Inisialisasi protokol WebSocket dengan memanggil fungsi initWebSocket() yang dibuat sebelumnya.
Menangani Permintaan
Sajikan teks yang disimpan pada variabel index_html saat Anda menerima permintaan di root / URL – Anda harus melewati fungsi prosesor sebagai argumen untuk mengganti placeholder dengan status GPIO saat ini.
Akhirnya, mulai server.
loop()
LED akan dikontrol secara fisik pada loop().
Perhatikan bahwa kita semua memanggil metode cleanupClients() . Inilah alasannya (penjelasan dari halaman GitHub perpustakaan ESPAsyncWebServer):
Browser terkadang tidak menutup koneksi WebSocket dengan benar, bahkan saat fungsi close() dipanggil dalam JavaScript. Ini pada akhirnya akan menghabiskan sumber daya server web dan akan menyebabkan server mogok. Memanggil fungsi cleanupClients() secara berkala dari loop utama() membatasi jumlah klien dengan menutup klien terlama ketika jumlah maksimum klien telah terlampaui. Ini dapat dipanggil setiap siklus, namun, jika Anda ingin menggunakan lebih sedikit daya, maka menelepon sejarang sekali per detik sudah cukup.
Demonstrasi
Setelah memasukkan kredensial jaringan Anda pada variabel ssid dan kata sandi, Anda dapat mengunggah kode ke papan Anda. Jangan lupa untuk memeriksa apakah Anda telah memilih papan dan port COM yang tepat.
Setelah mengupload kode, buka Serial Monitor pada baud rate 115200 dan tekan tombol EN/RST on-board. Alamat IP ESP harus dicetak.
Buka browser di jaringan lokal Anda dan masukkan alamat IP ESP32. Anda harus mendapatkan akses ke halaman web untuk mengontrol output.
Klik pada tombol untuk mengaktifkan LED. Anda dapat membuka beberapa tab browser web secara bersamaan atau mengakses server web dari perangkat yang berbeda dan status LED akan diperbarui secara otomatis di semua klien setiap kali ada perubahan.
Membungkus
Dalam tutorial ini Anda telah mempelajari cara menyiapkan server WebSocket dengan ESP32. Protokol WebSocket memungkinkan komunikasi dupleks penuh antara klien dan server. Setelah inisialisasi, server dan klien dapat bertukar data pada waktu tertentu.
Ini sangat berguna karena server dapat mengirim data ke klien setiap kali terjadi sesuatu. Misalnya, Anda dapat menambahkan tombol fisik ke pengaturan ini yang ketika ditekan akan memberi tahu semua klien untuk memperbarui antarmuka web.
Dalam contoh ini, kami telah menunjukkan kepada Anda cara mengontrol satu GPIO dari ESP32. Anda dapat menggunakan metode ini untuk mengontrol lebih banyak GPIO. Anda juga dapat menggunakan protokol WebSocket untuk mengirim pembacaan sensor atau pemberitahuan pada waktu tertentu.
Kami harap tutorial ini bermanfaat bagi Anda. Kami bermaksud untuk membuat lebih banyak tutorial dan contoh menggunakan protokol WebSocket. Jadi, tetap disini.
Pelajari lebih lanjut tentang ESP32 dengan sumber daya kami:
• Belajar ESP32 dengan Arduino IDE
• Pemrograman MicroPython dengan ESP32 danESP8266
• Proyek dan Panduan ESP32 Lainnya…
Sumber : randomnerdtutorials.com
 ){kind=link}
0 Komentar