WebSocket : Let’s Make Own Dashboard

Published in

Amikom Computer Club

7 min readMar 19, 2024

Halo Sobat IoT!🙌

Selamat datang pada modul pelatihan #6 divisi Internet Of Things AMCC 2023/2024. Mari kita belajar bareng dengan membuat platform IoT menggunakan WebSocket.

Table of Content

Let’s Talk about WebSocket
a. Apa itu WebSocket ?
b. HTTP
c. Kenapa WebSocket ?
d. HTTP vs WebSocket
e. WebSocket For IoT
f. Kelebihan WebSocket
g. Summary
Let’s Play with WebSocket
a. Installation
b. Code for WebSocket
c. Code for ESP
Referensi

Let’s Talk About WebSocket🤔

Apa Itu WebSocket ?

WebSocket adalah protokol komunikasi client-server yang berjalan di atas TCP (Transmission Control Protocol) Anda. Ini mendukung pertukaran pesan full-duplex bi-direksional antara klien (biasanya sebuah peramban web) dan server web dengan overhead yang sedikit dibandingkan dengan HTTP. Hal ini membuatnya menjadi protokol yang ideal untuk aplikasi yang membutuhkan pertukaran pesan “real-time” dan pembaruan asinkron.

Itu adalah definisi yang cukup kompleks. Namun, mari kita coba memecahkannya dengan menjelaskan terlebih dahulu bagaimana HTTP (Hypertext Transfer Protocol) bekerja dan membandingkannya dengan WebSocket

HTTP

HTTP (Hypertext Transfer Protocol) adalah protokol komunikasi yang digunakan untuk mentransfer data melalui World Wide Web. Protokol ini digunakan untuk mengirim permintaan dari klien, seperti web browser, ke server web, dan menerima respons dari server yang berisi data yang diminta, seperti halaman web, gambar, atau file lainnya.

Easy Ways🙋‍♂️

HTTP merupakan dasar dari komunikasi web dan digunakan secara luas untuk mengakses berbagai sumber daya di internet, seperti situs web, aplikasi web, dan layanan web.

Kenapa WebSocket ?

WebSocket adalah kemajuan signifikan dalam teknologi web client-server. Ini adalah protokol komunikasi yang menyediakan saluran komunikasi full-duplex melalui satu koneksi TCP tunggal yang berarti kedua belah pihak dapat berkomunikasi dan bertukar data pada saat yang sama sampai koneksi terbuka.

HTTP vs WebSocket

HTTP dan WebSocket keduanya adalah protokol komunikasi yang digunakan dalam komunikasi client-server. Pada WebSocket, data terus-menerus dipush/ditransmisikan ke dalam koneksi yang sama yang sudah terbuka, itulah sebabnya WebSocket lebih cepat dan meningkatkan kinerja aplikasi dibandingkan dengan HTTP.

Masih bingung gak nihh??

Kalau masih bingung lanjut dehh, aku ada analogi buat materi kali ini

Panggilan Telepon Biasa: Saat Anda melakukan panggilan telepon, Anda memutuskan untuk berkomunikasi dengan seseorang. Setelah panggilan terhubung, Anda berbicara dengan orang tersebut, dan setelah percakapan selesai, Anda menutup panggilan.
Hubungan dengan HTTP: Dalam HTTP, setiap kali klien ingin berkomunikasi dengan server (misalnya, mengakses halaman web), klien membuat permintaan (panggilan), server memberikan respons (berbicara), dan kemudian koneksi ditutup. Ini mirip dengan langkah-langkah dalam panggilan telepon biasa di mana Anda melakukan panggilan, berbicara, dan kemudian menutup panggilan.

Walkie-Talkie: Walkie-talkie adalah perangkat komunikasi dua arah yang memungkinkan pengguna untuk berbicara secara langsung dengan satu sama lain tanpa harus menunggu atau memulai panggilan baru setiap kali ingin berkomunikasi.
Hubungan dengan WebSocket: Dengan WebSocket, klien dan server dapat saling mengirim pesan secara langsung dan real-time tanpa perlu membuat koneksi baru setiap kali, mirip dengan penggunaan walkie-talkie di mana pengguna dapat berbicara secara langsung tanpa harus menunggu atau memulai panggilan baru setiap kali ingin berkomunikasi.

WebSocket for IoT ?

WebSocket adalah mode komunikasi yang sangat baik untuk menampilkan data real-time yang ingin Anda kirim dari Server ke klien Anda. Contoh aplikasinya

Aplikasi chat: WebSocket ideal untuk aplikasi chat karena memungkinkan pertukaran pesan secara instan antara pengguna. Ini menciptakan pengalaman komunikasi yang lancar dan interaktif, mirip dengan percakapan tatap muka, di mana pesan dikirim dan diterima tanpa keterlambatan.
Gaming online: Dalam gaming online, WebSocket memfasilitasi komunikasi real-time antara pemain dan server game. Ini penting untuk gameplay yang responsif dan sinkronisasi aksi pemain, memastikan bahwa semua pemain melihat permainan terjadi secara serempak.
Dashboard real-time: WebSocket digunakan untuk membuat dashboard yang memperbarui data secara real-time. Ini sangat berguna dalam situasi di mana pemantauan data terus-menerus diperlukan, seperti pemantauan kinerja server atau analisis data streaming.
Perdagangan keuangan: Dalam perdagangan keuangan, WebSocket menyediakan pembaruan harga saham dan informasi keuangan lainnya secara real-time. Ini krusial bagi para trader untuk membuat keputusan berdasarkan informasi pasar terkini, memungkinkan reaksi cepat terhadap perubahan kondisi pasar.

WebSocket sangat cocok untuk proyek berbasis IoT karena kita berurusan dengan sensor atau aktuator yang perlu direspons secara langsung. Karena sebagian besar proyek saat ini membutuhkan kontrol dari Platform Web, maka ini adalah protokol yang ideal untuk digunakan. Sebagian besar platform mendukung protokol WebSocket.

Kelebihan WebSocket

Available almost everywhere: Layak untuk diulang bahwa WebSocket tersedia di setiap peramban web modern, yang berarti Anda tidak perlu meminta pengguna untuk menginstal apa pun di sisi mereka.
Simple: Setelah Anda menetapkan koneksi, mengirim pesan ke arah mana pun cukup mudah. Itu membuatnya mudah untuk membangun fungsionalitas canggih dan pola pengiriman pesan lainnya, seperti penerbit/pelanggan, di atas WebSocket.
Low-latency: Header pesan WebSocket cenderung memiliki panjang 2 byte, yang menghindari pemborosan dan meningkatkan sensasi komunikasi real-time.

Summary

WebSocket adalah protokol komunikasi client-server yang memungkinkan pertukaran pesan full-duplex bi-direksional dengan overhead yang lebih sedikit dibandingkan HTTP. Dibandingkan dengan HTTP, WebSocket lebih cepat, lebih sederhana, dan memiliki latensi yang lebih rendah. WebSocket juga cocok untuk proyek IoT karena mendukung kontrol dari platform web dan tersedia di hampir semua platform modern.

Dalam konteks IoT, WebSocket dapat digunakan untuk mengirim dan menerima data sensor secara real-time, mengontrol perangkat dari jarak jauh, dan memantau kondisi perangkat secara langsung melalui antarmuka web. Hal ini membuat WebSocket menjadi pilihan yang kuat untuk aplikasi IoT yang memerlukan komunikasi yang cepat, efisien, dan dapat diandalkan.

Let’s Play with WebSocket

Pada Praktikum kali ini kita akan membuat platform IoT menggunakan WebSocket, Mungkin nanti akan sedikit rumit dan banyak pertanyaan oleh karena itu simpan dulu yaa, Enjoy the practice😁.

Follow the step below

🌴Installation🌴

Visual Studio Code
WebSocket adalah bahwa pengembang dapat menggunakan VSCode untuk membuat kode-kode yang mendukung penggunaan WebSocket dalam aplikasi web. Dengan menggunakan VSCode, pengembang dapat menulis dan menguji kode-kode JavaScript atau TypeScript yang diperlukan untuk mengimplementasikan fitur-fitur ini dengan WebSocket. Fitur-fitur seperti penyorotan sintaksis, bantuan penulisan kode, dan debugging yang disediakan oleh VSCode dapat membantu pengembang dalam proses pengembangan aplikasi web dengan WebSocket.

link download VsCode : https://code.visualstudio.com/

Node JS

Node.js adalah lingkungan runtime JavaScript untuk menjalankan kode JavaScript di sisi server. Ini memungkinkan pengembang untuk membuat aplikasi web dengan fitur real-time menggunakan WebSocket, yang dapat diimplementasikan dengan mudah menggunakan modul bawaan Node.js yang disebut ws.