Membuat Aplikasi Chat Sederhana Node JS Part 7

Pada bagian sebelumnya kita sudah berhasil mensetting bagian clientnya yaitu client melakukan request ke server dengan object socket metode emit yang membawa nilai usernamenya. Sekarang untuk bagian server.jsnya kita akan menyediakan atau menerima pesan Typingnya. Jadi kalo teman teman tebak permainannya selalu tik tok yaitu kita dengerin event dari client. Client kirim keserver dan servernya menerima lalu server akan mengirimkan lagi kesemua clientnya tentu kita bisa cek dibagian server.jsnya 

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-1

Bila ada event Typing kita akan kirim balik response datanya dengan membroadcast kesemua client atau memberi tahu kesemuanya bila ada username yang sedang mengetik dengan melalui object socket yang disambung dengan metode broadcast.emit 

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-2

dan selanjutnya kita akan melakukan hal yang sama seperti dibagian sebelumnya yaitu dibagian clientnya kita akan menerima sebuah response data didalam fungsi callbacknya

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-3

Lalu menampilkan response datanya dibagian tag <div> dengan id feedback yang sebelumnya kita sudah sediakan. Untuk itu kita akan memilih elemen berdasarkan id dengan menggunakan getElementById 

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-4

dan kita sambung dengan metode innerHTML untuk menampilkan tag <p> sebagai pesan typingnya sebagai berikut

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

dan pada akhirnya pesan typing itu akan kita hapus ketika users sudah mensubmit pesan chatnya maka kita akan hapus elemen tersebut dengan menuliskan kode seperti ini

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-6

Jadi kesimpulannya ketika ada event Typing dari server kita akan menampilkan hasil response data yaitu username siapa yang sedang mengetik tapi pesan typing tersebut akan otomatis hilang bila users sudah mengirim pesan chatnya. Untuk menjalankannya kita akan restart dan jalankan servernya kembali maka kita sudah bisa lihat pesan typingnya ketika users mengetik sesuatu dikeyboard yaitu bahwa someone is Typing message

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-6

Tapi bila kita enter dan submit formnya maka pesan Typingnya akan dihapus ketika ada lists pesan chatnya sudah terkirim dan ini berlaku ketika teman teman menulis pesan chatnya dibrowser yang lainnya. 

membuat-aplikasi-chat-sederhana-node-js-part-7-18-07-2017-7

Jadi itu dia semoga jelas bagian isTyping ini sampai jumpa dibagian bagian selanjutnya. Berikut ini Link Source Codenya

Download

17 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