Salah satu fitur baru paling keren dari HTML5 adalah WebSockets, yang memungkinkan kita berbicara dengan server tanpa menggunakan permintaan AJAX. Dalam tutorial ini, kita akan meninjau proses menjalankan server WebSocket dalam PHP, dan kemudian membangun klien untuk mengirim dan menerima pesan melalui protokol WebSocket.

Apa itu WebSockets?

WebSockets adalah teknik untuk komunikasi dua arah melalui satu soket [TCP], sejenis teknologi PUSH. Saat ini, masih sedang distandarisasi oleh W3C; namun, versi terbaru Chrome dan Safari memiliki dukungan untuk WebSockets.

Apa yang Digantikan WebSockets?

Websockets dapat menggantikan long-polling. Ini adalah konsep yang menarik; klien mengirim permintaan ke server - sekarang, alih-alih server merespons dengan data yang mungkin tidak ada, itu pada dasarnya membuat koneksi tetap terbuka sampai data segar, terbaru siap dikirim - klien selanjutnya menerima ini , dan mengirim permintaan lain. Ini memiliki manfaat: latensi yang menurun menjadi salah satunya, karena koneksi yang sudah dibuka tidak memerlukan koneksi baru untuk dibuat. Namun, long-polling tidak benar-benar sepotong teknologi mewah: itu juga mungkin untuk permintaan menjadi time-out, dan dengan demikian koneksi baru akan tetap dibutuhkan.

Banyak aplikasi Ajax memanfaatkan hal di atas - ini sering dapat dikaitkan dengan pemanfaatan sumber daya yang buruk.

Bukankah lebih bagus jika server bisa bangun suatu pagi dan mengirim datanya ke klien yang bersedia mendengarkan tanpa semacam koneksi yang sudah ditentukan sebelumnya? Selamat datang di dunia teknologi PUSH!

Langkah 1: Dapatkan Server WebSocket

Tutorial ini akan lebih fokus pada pembangunan klien daripada implementasi server.

Saya menggunakan XAMPP pada Windows 7 untuk menjalankan server PHP secara lokal. Ambil salinan phpwebsockets yang merupakan server WebSocket dalam PHP. [Catatan: Saya mengalami beberapa masalah dengan versi ini, saya membuat beberapa perubahan padanya dan akan memasukkannya dalam file sumber] Ada berbagai implementasi WebSocket; jika salah satu tidak berfungsi, Anda dapat mencoba yang lain atau melanjutkan dengan tutorial.

• jWebSocket [Java]
• web-socket-ruby [ruby]
• Socket IO-node [node.js]

Mulai server Apache

Google Chrome?

'].appendTo['#container']; }else{ //The user has WebSockets connect[]; function connect[]{ //the connect function code is below } }];

Seperti yang Anda lihat, jika pengguna memiliki WebSockets maka kita memanggil fungsi connect[]. Ini adalah inti dari fungsionalitasnya: kita akan mulai dengan event open, close, dan receive.

Kita akan menentukan URL server kita

var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

Tunggu, di mana

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

6 di URL itu? Oh benar, ini URL WebSocket, jadi itu menggunakan protokol yang berbeda. Inilah uraian potongan URL kita:

Mari kita lanjutkan dengan fungsi connect[] kita. Kita akan memasukkan kode kita dalam blok try/catch; jadi jika terjadi kesalahan, kita dapat memberi tahu pengguna. Kita membuat WebSocket baru, dan meneruskan pesan ke fungsi message yang akan saya jelaskan nanti. Kita membuat fungsi onopen, onmessage dan onclose kita. Perhatikan bahwa kita juga menunjukkan status socket kepada pengguna; ini tidak perlu, tapi saya memasukkannya di sini karena dapat membantu untuk debugging.

• CONNECTING = 0
• OPEN = 1
• CLOSED = 2

function connect[]{
    try{

	var socket;
	var host = "ws://localhost:8000/socket/server/startDaemon.php";
    var socket = new WebSocket[host];

        message['
Socket Status: '+socket.readyState];

        socket.onopen = function[]{
       		 message['
Socket Status: '+socket.readyState+' [open]'];
        }

        socket.onmessage = function[msg]{
       		 message['
Received: '+msg.data];
        }

        socket.onclose = function[]{
       		 message['
Socket Status: '+socket.readyState+' [Closed]'];
        }			

    } catch[exception]{
   		 message['
Error'+exception];
    }
}

Fungsi message[] cukup sederhana, dibutuhkan beberapa teks yang ingin kita tampilkan kepada pengguna dan ditambahkan ke chatLog. Kita membuat kelas yang sesuai untuk tag paragraf di fungsi event socket yang mengapa hanya ada satu tag paragraf penutup di fungsi message.

function message[msg]{
	$['#chatLog'].append[msg+'
'];
}

Sejauh Ini...

Jika Anda telah mengikuti hingga poin ini, dilakukan dengan baik! Kita telah berhasil membuat template HTML/CSS dasar, membuat dan membangun koneksi WebSocket dan menjaga pengguna diperbarui ketika kemajuan dibuat dengan koneksi tersebut.

Langkah 7: Mengirim Data

Sekarang daripada memiliki tombol kirim, kita dapat mendeteksi kapan pengguna menekan return pada keyboard mereka, dan menjalankan fungsi send. Angka '13' yang Anda lihat di bawah adalah kunci ASCII untuk tombol enter.

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

0

Dan inilah fungsi send[]:

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

1

Ingat apa yang Anda lihat di atas mungkin kode yang sedikit gemuk, tetapi dalam kenyataannya, kode yang benar-benar kita butuhkan adalah:

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

2

Kode tambahan melakukan sejumlah hal: mendeteksi jika pengguna tidak memasukkan apa pun tetapi masih menekan return, mengosongkan kotak input, dan memanggil fungsi message.

Langkah 8: Menutup Socket

Menutup socket cukup mudah: pasang handler click ke tombol disconnect kita dan kita selesai!

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

3

JavaScript yang Sudah Lengkap

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

4

Langkah 9: Menjalankan Server WebSocket

Kita akan membutuhkan akses baris perintah. Untungnya, XAMPP memiliki opsi shell yang praktis. Klik 'Shell' pada panel kontrol XAMPP, dan ketik:

WebSockets Client





    


        
WebSockets Client

        


        
        
e.g. try 'hi', 'name', 'age', 'today'

        
        Disconnect

    



​

5

Anda sekarang telah memulai server WebSocket!

Selesai

Ketika halaman dimuat, koneksi WebSocket akan berusaha dibangun [coba edit kode sehingga pengguna memiliki opsi menghubungkan/memutuskan]. Kemudian, pengguna dapat memasukkan pesan dan menerima pesan dari server.

Itu saja!

Terima kasih sudah membaca; Saya harap Anda menikmati tutorial ini! Ingat, semenarik WebSockets, banyak hal dapat berubah. Anda dapat merujuk di sini untuk tetap mendapatkan informasi terbaru tentang API WebSocket W3C.