Mulai Menggunakan WebSockets HTML5 Hari Ini

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

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

Langkah 2: Ubah URL dan Port

Ubah server sesuai dengan pengaturan Anda, misalnya di setup.class.php:

1	public function __construct($host='localhost',$port=8000,$max=100)
2	{
3	$this->createSocket($host,$port);
4	}

Jelajahi seluruh file dan buat perubahan jika perlu.

Langkah 3: Mulai Membangun Klien

Mari kita dapatkan template dasar; ini adalah file client.php saya:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>​

Jadi dalam kode ini kita membuat template sederhana: kita memiliki kotak untuk log obrolan, kotak input, dan satu tombol putuskan.

Langkah 4: Tambahkan Beberapa CSS

Tidak ada yang mewah, cukup beberapa elemen.

body {
	font-family:Arial, Helvetica, sans-serif;
}
#container{
	border:5px solid grey;
	width:800px;
	margin:0 auto;
	padding:10px;
}
#chatLog{
	padding:5px;
	border:1px solid black;
}
#chatLog p {
	margin:0;
}
.event {
	color:#999;
}
.warning{
	font-weight:bold;
	color:#CCC;
}

Langkah 5: Event WebSocket

Pertama, mari kita coba dan memahami gagasan event WebSocket.

Event

Kita akan menggunakan tiga event:

onopen: Ketika socket telah dibuka
onmessage: Ketika pesan telah diterima
onclose: Ketika socket telah ditutup

Tetapi bagaimana kita bisa menerapkan ini?

Pertama buat obyek WebSocket

1	var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Dan memeriksa event itu sesederhana:

1	socket.onopen = function(){
2	alert("Socket has been opened!");
3	}

Tapi bagaimana dengan saat kita menerima sebuah pesan?

1	socket.onmessage = function(msg){
2	alert(msg); //Awesome!
3	}

Namun, mari kita hindari menggunakan kotak peringatan, dan benar-benar mengintegrasikan apa yang telah kita pelajari ke halaman klien.

Langkah 6: JavaScript

Ok, jadi mari kita mulai. Pertama kita meletakkan kode kita di fungsi document ready dari jQuery, kemudian kita periksa apakah pengguna memiliki browser yang mendukung WebSockets. Jika tidak, kita menambahkan tautan ke Chrome dalam HTML.

$(document).ready(function() {
	if(!("WebSocket" in window)){
		$('#chatLog, input, button, #examples').fadeOut("fast");
		$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').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

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

Tunggu, di mana http 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('<p class="event">Socket Status: '+socket.readyState);

        socket.onopen = function(){
       		 message('<p class="event">Socket Status: '+socket.readyState+' (open)');
        }

        socket.onmessage = function(msg){
       		 message('<p class="message">Received: '+msg.data);
        }

        socket.onclose = function(){
       		 message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
        }			

    } catch(exception){
   		 message('<p>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.

1	function message(msg){
2	$('#chatLog').append(msg+'</p>');
3	}

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.

$('#text').keypress(function(event) {
    if (event.keyCode == '13') {
   		send();
    }
});

Dan inilah fungsi send():

function send(){

    var text = $('#text').val();
    if(text==""){
        message('<p class="warning">Please enter a message');
        return ;
    }
    try{
        socket.send(text);
        message('<p class="event">Sent: '+text)
    } catch(exception){
   	message('<p class="warning"> Error:' + exception);
    }

    $('#text').val("");

}

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

1	socket.send(); //Thanks JavaScript

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!

1	$('#disconnect').click(function(){
2	socket.close();
3	});

JavaScript yang Sudah Lengkap

$(document).ready(function() {

  if(!("WebSocket" in window)){
  $('#chatLog, input, button, #examples').fadeOut("fast");
  $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
  }else{
      //The user has WebSockets

      connect();

      function connect(){
          var socket;
          var host = "ws://localhost:8000/socket/server/startDaemon.php";

          try{
              var socket = new WebSocket(host);

              message('<p class="event">Socket Status: '+socket.readyState);

              socket.onopen = function(){
             	 message('<p class="event">Socket Status: '+socket.readyState+' (open)');
              }

              socket.onmessage = function(msg){
             	 message('<p class="message">Received: '+msg.data);
              }

              socket.onclose = function(){
              	message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
              }			

          } catch(exception){
             message('<p>Error'+exception);
          }

          function send(){
              var text = $('#text').val();

              if(text==""){
                  message('<p class="warning">Please enter a message');
                  return ;
              }
              try{
                  socket.send(text);
                  message('<p class="event">Sent: '+text)

              } catch(exception){
                 message('<p class="warning">');
              }
              $('#text').val("");
          }

          function message(msg){
            $('#chatLog').append(msg+'</p>');
          }

          $('#text').keypress(function(event) {
              if (event.keyCode == '13') {
                send();
              }
          });	

          $('#disconnect').click(function(){
             socket.close();
          });

      }//End connect

  }//End else

});

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:

1	php -q path\to\server.php

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.

1	$(document).ready(function() {
2
3	if(!("WebSocket" in window)){
4	$('#chatLog, input, button, #examples').fadeOut("fast");
5	$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
6	}else{
7	//The user has WebSockets
8
9	connect();
10
11	function connect(){
12	var socket;
13	var host = "ws://localhost:8000/socket/server/startDaemon.php";
14
15	try{
16	var socket = new WebSocket(host);
17
18	message('<p class="event">Socket Status: '+socket.readyState);
19
20	socket.onopen = function(){
21	message('<p class="event">Socket Status: '+socket.readyState+' (open)');
22	}
23
24	socket.onmessage = function(msg){
25	message('<p class="message">Received: '+msg.data);
26	}
27
28	socket.onclose = function(){
29	message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
30	}
31
32	} catch(exception){
33	message('<p>Error'+exception);
34	}
35
36	function send(){
37	var text = $('#text').val();
38
39	if(text==""){
40	message('<p class="warning">Please enter a message');
41	return ;
42	}
43	try{
44	socket.send(text);
45	message('<p class="event">Sent: '+text)
46
47	} catch(exception){
48	message('<p class="warning">');
49	}
50	$('#text').val("");
51	}
52
53	function message(msg){
54	$('#chatLog').append(msg+'</p>');
55	}
56
57	$('#text').keypress(function(event) {
58	if (event.keyCode == '13') {
59	send();
60	}
61	});
62
63	$('#disconnect').click(function(){
64	socket.close();
65	});
66
67	}//End connect
68
69	}//End else
70
71	});