Membuat Aplikasi Chat Sederhana Node JS Part 7

17/07/2017    Ekky Ridyanto    150     Website

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

Artikel, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More