WebSockets - Mở kết nối

Khi kết nối đã được thiết lập giữa máy khách và máy chủ, sự kiện mở sẽ được kích hoạt từ phiên bản Web Socket. Nó được gọi là sự bắt tay ban đầu giữa máy khách và máy chủ.

Sự kiện được đưa ra sau khi kết nối được thiết lập, được gọi là onopen. Tạo kết nối Web Socket thực sự đơn giản. Tất cả những gì bạn phải làm là gọiWebSocket constructor và chuyển vào URL của máy chủ của bạn.

Đoạn mã sau được sử dụng để tạo kết nối Web Socket:

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

Khi kết nối đã được thiết lập, sự kiện mở sẽ được kích hoạt trên phiên bản Web Socket của bạn.

onopen đề cập đến sự bắt tay ban đầu giữa máy khách và máy chủ đã dẫn đến giao dịch đầu tiên và ứng dụng web đã sẵn sàng truyền dữ liệu.

Đoạn mã sau mô tả việc mở kết nối của giao thức 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”;
}

Một thông lệ tốt là cung cấp phản hồi thích hợp cho người dùng khi chờ kết nối Web Socket được thiết lập. Tuy nhiên, cần lưu ý rằng các kết nối Web Socket tương đối nhanh.

Bản trình diễn về kết nối Web Socket được thiết lập được ghi lại trong URL đã cho - https://www.websocket.org/echo.html

Ảnh chụp nhanh về thiết lập kết nối và phản hồi cho người dùng được hiển thị bên dưới:

Thiết lập trạng thái mở cho phép giao tiếp song công và truyền tin nhắn cho đến khi kết nối bị ngắt.

Thí dụ

Xây dựng tệp HTML5 ứng dụng khách.

<!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>

Đầu ra sẽ như sau:

Tệp HTML5 và JavaScript ở trên cho thấy việc triển khai hai sự kiện của Web Socket, đó là -

onLoad giúp tạo đối tượng JavaScript và khởi tạo kết nối.
onOpen thiết lập kết nối với máy chủ và cũng gửi trạng thái.