Tutorial membuat chat real time dengan nodejs dan socket.io

Assalamualaikum teman2 :D terimakasih atas dukungannya blog ini rangking alexanya jadi naik, nah admin jadi semangat posting nih :D kemaren ada yang request cara membuat server chat gimana gan ? ya sekarang kita bahas di sini ya ,.. ini server dan client loh ,. sekalian jadi satu tutorial dah :D

Server

1. nodejs
2. socket.io
3. express

Client

1. html
2. css
3. jquery
4. socket.io.js

nah itu requirement yang ada di tutorial kali ini gan ,. okeh langsung saja kita masuk ke cara buat server nya

pertama buat folder dulu di mana yang agan sukai , nah sekarang buat project nodejs nya ,. sudah taukan bagaimana buat project nodejs yang benar ? :D

nih admin kasih contoh

buka terminal kemudian ketik

npm init

tinggal di enter enter terus gan ,. sampai selesai pokok nya :D ato terserah agan lah mau isi apa , kalo admin asal enter aja :D 

kemudian install express gan

npm install express --save

setelah install express install socket.io 

npm install socket.io --save

nah sekarang buka editor kesukaan agan ,. kalo admin sih coba pake sublime gan :D

buat file index.js

buat script awal untuk listen aplikasi agan, admin coba listen dengan port 3000

sekarang coba kita buat file html nya gan ,.. bisa di buat di mana saja kok gan ,

oh iya download dulu socket.io.js nya gan ,.. kalo gak pengen download ya kita pake CDN saja

download Socket.IO.JS

jangan lupa gunakan jquery juga gan

ini contoh script yang admin gunakan di index.html

tampilannya seperti ini

terserah agan design nya mau gimana ,. yang penting socket nya nanti bagaimana bisa jalan,

kita coba teknik brodcasting message ya gan ,.. yang artinya mengirim kesemua orang yang sedang melihat chat kita,

tambahkan code javascript ini di file index.html

var socket = io('http://localhost:3000');

itu untuk bind ke server gan ,. kalo server agan sudah online berarti di bind dengan domain langsung juga bisa gan :D

kemudian socket.emit() di gunakan untuk emit listener ke server gan ,.. atau mengirim perintah keserver

kemudian kembali ke edit yang server gan ,.. tambahkan code seperti berikut gan ,

 saya akan jelaskan
socket.on() di gunakan untuk menunggu perintah dari emit dari client tadi gan ,..
kalau io.emit() di gunakan untuk mengirim perintah ke client gan ,

kemudian kita kembali lagi ke index.html tambahkan script berikut gan untuk menerima perintah dari server

socket.on() pada client untuk menerima perintah dari server gan :D ingat ya gan on() dan emit()
kita hanya butuh paham 2 perintah ini gan ,. sudah bisa buat aplikasi realtime yang agan rencanakan :D

nah sekarang kita coba hidupkan servernya

jika sudah berjalan kita coba yang client nya gan

hehe sudah gan ,.. silahkan di praktekan ,. terimakasih sudah mampir di blog ane ,. jangan lupa ninggalin jejak ya gan (Y)
Wassalamualaikum wr wb