Membuat Aplikasi Chat Sederhana Node JS Part 5

Ingat bahwa aplikasi yang akan kita buat ini terdiri dari dua bagian untuk itu kita juga harus menambahkan fungsionalitas dari sisi client atau bagian frontendnya. Pertama-tama kita akan men-setup library Socket.io pada client. Yang dimana kita akan hubungkan file include library Socket.io pada file index.html sebagai berikut

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-1

Lalu kita akan jalankan script baru yang didalamnya kita butuh koneksi dari socketnya didalam object socket seperti berikut

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-2

Selanjutnya kita akan pilih selector dari document HTMLnya tentu dibagian sebelumnya kita sudah memberikan attribute id kepada elemen HTMLnya. 

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-3

Lalu kita menjalankan event on-click dengan metode addEventListener artinya bila tag button di klik maka kita akan menjalankan fungsi untuk mengirim data ke server 

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-4

Misalnya kita kirim pesan chatnya dan nama usernamenya dengan menjalankan metode emit dengan kata kunci yang sama 

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-6

Kata kuncinya adalah chat. Kata kunci ini harus sama dengan ada diserver.js yang artinya kita memberitahu kebagian servernya dimana server akan menerimanya. Lalu parameter yang kedua adalah nilai yang akan kita kirim keserver. Nilai yang saya kirim dalam bentuk Object. Objectnya terdiri dari nama key dan value. Valuenya didapatkan dari nilai inputan dengan menentukan nama elemennya dan disambung dengan metode value dari javascriptnya.

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-7

Setelah disubmit kita akan kosongkan inputan pesannya dan inputan membernya kita akan tambahkan attribute disabled. 

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-8

dan sekarang untuk menampilkan pesan chatnya kita akan tempatkan didalam tag <div> id outputnya

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-8

Jadi bila ada pesan chatnya atau hasil response data yang telah broadcast dari server 

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-9

Yang kita lakukan adalah menjalankan metode innerHTML dengan menampilkan data member dan data messagenya didalam tag <p>

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-10

dan sekarang kita bisa restart server dan jalankan kembali dengan membawa dua browser yang berbeda. Kita akan tulis nama member dan messagenya ketika di submit maka kita akan melihat pesan barunya bukan hanya dibrowser pertama tapi pada browser yang kedua juga akan otomatis tampil responsenya. Tentu tidak terbatas hanya dua browser kita bisa lakukan dibrowsernya lainnya

membuat-aplikasi-chat-sederhana-node-js-part-5-15-07-2017-10

Pada bagian ini kita sudah berhasil dengan sangat simple hanya menulis beberapa kode saja kita sudah berhasil membuat aplikasi chat sederhana dengan bantuan Node JS melalui Library Socket IO.

15 Juli 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat