WebSockets - Membuka Koneksi

Setelah koneksi dibuat antara klien dan server, acara terbuka dipecat dari contoh Web Socket. Ini disebut sebagai jabat tangan awal antara klien dan server.

Acara, yang dimunculkan setelah koneksi dibuat, disebut onopen. Membuat koneksi Web Socket sangat sederhana. Yang harus Anda lakukan adalah memanggilWebSocket constructor dan meneruskan URL server Anda.

Kode berikut digunakan untuk membuat koneksi Web Socket -

// Create a new WebSocket.
var socket = new WebSocket('ws://echo.websocket.org');

Setelah koneksi dibuat, acara terbuka akan dijalankan pada instance Web Socket Anda.

onopen mengacu pada jabat tangan awal antara klien dan server yang mengarah ke kesepakatan pertama dan aplikasi web siap untuk mengirimkan data.

Potongan kode berikut menjelaskan membuka koneksi protokol Web Socket -

socket.onopen = function(event) {
   console.log(“Connection established”);
   // Display user friendly messages for the successful establishment of connection
   var.label = document.getElementById(“status”);
   label.innerHTML = ”Connection established”;
}

Ini adalah praktik yang baik untuk memberikan umpan balik yang sesuai kepada pengguna yang menunggu koneksi Web Socket dibuat. Namun, selalu diperhatikan bahwa koneksi Web Socket relatif cepat.

Demo sambungan Web Socket yang dibuat didokumentasikan di URL yang diberikan - https://www.websocket.org/echo.html

Cuplikan dari pembentukan koneksi dan respons terhadap pengguna ditampilkan di bawah ini -

Membuat keadaan terbuka memungkinkan komunikasi dupleks penuh dan transfer pesan hingga koneksi diputus.

Contoh

Membangun file klien-HTML5.

<!DOCTYPE html>
<html>
   <meta charset = "utf-8" />
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;
	
      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }
	
      function testWebSocket() {
         websocket = new WebSocket(wsUri);
			
         websocket.onopen = function(evt) {
            onOpen(evt)
         };
      }
	
      function onOpen(evt) {
         writeToScreen("CONNECTED");
      }
	
      window.addEventListener("load", init, false);
   
   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

Outputnya adalah sebagai berikut -

File HTML5 dan JavaScript di atas menunjukkan implementasi dari dua event Web Socket, yaitu -

onLoad yang membantu dalam pembuatan objek JavaScript dan inisialisasi koneksi.
onOpen membuat koneksi dengan server dan juga mengirimkan status.