Membuat Aplikasi Chat Sederhana Node JS Part 6

17/07/2017    Ekky Ridyanto    123     Website

Halo teman teman semuanya pada bagian sebelumnya kita sudah berhasil membuat aplikasi chat sederhana dengan Node JSnya tentu melalui Library Socket IO tapi disini saya akan tambahkan satu hal lagi misalnya ketika teman teman menggunakan whatsapp atau bbm biasanya kita lihat bila ada someone is typing atau namanya sedang mengetik tentu dibagian ini kita akan tampilkan hal itu juga dibagian aplikasi chatnya. Nah untuk itu kita akan atur dibagian clientnya yakni kita sediakan satu event ketika users sedang mengetik sesuatu dikeyboard berarti yang bisa kita lakukan adalah memilih id message yaitu inputan pesannya yang diberikan metode addEventListener untuk menjalankan event keypress atau keyup juga bisa sebagai berikut

membuat-aplikasi-chat-sederhana-node-js-part-6-17-07-2017-1

Dimana ketika event tersebut dijalankan kita akan melakukan satu fungsi yaitu kita akan mengirim data keserver agar server dapat memberitahu ke semuanya artinya kita lagi-lagi butuh metode emit dengan kata kunci yang berbeda yaitu typing. Nilai yang akan kita kirim adalah nama username atau nama membernya 

membuat-aplikasi-chat-sederhana-node-js-part-6-17-07-2017-2

Agar server akan broadcast kesemuanya kalo username tersebut sedang mengetik. Tentu kita juga tidak mau setiap kita mengetik kita melakukan emit keserver berkali kali maka dari itu akan buat tipe data boolean. Karena event keypress ini pada dasarnya setiap kita mengetik huruf A, mengetik huruf B dia akan menjalankan fungsi emit ini berkali kali. Untuk itu kita sediakan satu boolean namanya isTyping secara default nilainya false.

membuat-aplikasi-chat-sederhana-node-js-part-6-17-07-2017-3

dan kita akan uji bila isTypingnya sama dengan false maka kita akan melakukan emit ke server dengan membawa nilai usernamenya

membuat-aplikasi-chat-sederhana-node-js-part-6-17-07-2017-4

dan pada akhirnya kita akan ubah tipe data booleannya menjadi true. Kenapa diubah menjadi true ? maksudnya disini karena ketika kita mengetik pertama kali variabel IsTypingnya false maka kita akan melakukan socket emit ke server tapi ketika kita mengetik kedua kalinya dan bila kita tidak melakukan hal tersebut dia akan terus bernilai false yang mana dia akan kirim terus pesan emitnya keserver karena pada dasarnya kita hanya mengirim satu kali. Makanya kita ubah isTypingnya menjadi true

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

Tapi yang perlu dingat oleh teman teman pesan typing ini akan dikirimkan lagi keserver ketika usersnya sudah benar benar mensubmit formnya 

membuat-aplikasi-chat-sederhana-node-js-part-6-17-07-2017-6

Tentu kita bisa balikin nilainya menjadi false setelah users telah mengirimkan pesan chatnya. Mungkin untuk artikel ini cukup tentu server akan menerima pesan Typing tersebut kita akan buatnya dibagian selanjutnya. Terima kasih

Artikel, Web Design, Javascript, 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