WebSockets trong HTML5

WebSockets là công nghệ giao tiếp hai chiều phiên bản tiếp theo cho các ứng dụng web mà điều hành qua một Socket đơn và được tiếp xúc thông qua một giao diện JavaScript trong các trình duyệt tuân thủ HTML5.

Một khi bạn nhận một kết nối WebSocket với Web Server, bạn có thể gửi dữ liệu từ trình duyệt tới Server bởi gọi một phương thức send(), và nhận dữ liệu từ Server tới trình duyệt bằng một onmessage Event Handler.

Sau đây là API mà tạo một đối tượng WebSocket mới:

var Socket = new WebSocket(url, [protocal] );

Ở đây, tham số đầu tiên url xác định URL để kết nối. Thuộc tính thứ hai protocol là tùy ý, và nếu nó có mặt, nó xác định một giao thức phụ mà Server phải hỗ trợ cho kết nối để thành công.

Các thuộc tính WebSocket

Sau đây là thuộc tính của đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:

Thuộc tính	Miêu tả
Socket.readyState	Thuộc tính chỉ đọc readyState biểu diễn trạng thái kết nối. Nó có các giá trị sau: Giá trị 0 chỉ rằng kết nối vẫn chưa được thành lập. Giá trị 1 chỉ rằng kết nối đã thành lập và có thể giao tiếp. Giá trị 2 chỉ rằng kết nối đang qua handshake đóng. Giá trị 3 chỉ rằng kết nối đã được đóng hoặc không thể được mở.
Socket.bufferedAmount	Thuộc tính chỉ đọc bufferedAmount biểu diễn số byte của UTF-8 mà đã được xếp hàng bởi sử dụng phương thức send()

Thuộc tính

Miêu tả

Socket.readyState

Thuộc tính chỉ đọc readyState biểu diễn trạng thái kết nối. Nó có các giá trị sau:

Giá trị 0 chỉ rằng kết nối vẫn chưa được thành lập.
Giá trị 1 chỉ rằng kết nối đã thành lập và có thể giao tiếp.
Giá trị 2 chỉ rằng kết nối đang qua handshake đóng.
Giá trị 3 chỉ rằng kết nối đã được đóng hoặc không thể được mở.

Socket.bufferedAmount

Thuộc tính chỉ đọc bufferedAmount biểu diễn số byte của UTF-8 mà đã được xếp hàng bởi sử dụng phương thức send()

Quảng cáo

Các sự kiện WebSocket

Sau đây là các sự kiện được liên kết với đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:

Sự kiện	Event Handler	Miêu tả
open	Socket.onopen	Sự kiện này xảy ra khi kết nối Socket được thành lập.
message	Socket.onmessage	Sự kiện này xảy ra khi Client nhận dữ liệu từ Server.
error	Socket.onerror	Sự kiện này xảy ra khi có bất kỳ lỗi nào trong giao tiếp.
close	Socket.onclose	Sự kiện này xảy ra khi kết nối được đóng.

Các phương thức WebSocket

Sau đây là các phương thức liên kết với đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:

Phương thức	Miêu tả
Socket.send()	Phương thức send(data) truyền tải dữ liệu sử dụng kết nối đó.
Socket.close()	Phương thức close() sẽ được sử dụng để kết thúc bất kỳ kết nối đang tồn tại.

Ví dụ WebSocket

Một WebSocket là một TCP socket hai chiều chuẩn giữa Client và Server. Socket bắt đầu như là một kết nối HTTP và sau đó "Nâng cấp" thành một TCP socket sau khi một HTTP handshake. Sau handshake, hoặc side có thể gửi dữ liệu.

Client-Side HTML và JavaScript Code

Tại thời điểm viết bài hướng dẫn này, chỉ có một số trình duyệt hỗ trợ giao thức WebSocket. Bạn có thể thử ví dụ sau với phiên bản mới nhất của Chrome, Mozilla, Opera và Safari.

<!DOCTYPE HTML>
<html>

   <head>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("WebSocket is supported by your Browser!");
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function()
               {
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function()
               { 
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
				
            }
            else
				
            {
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
	
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">Run WebSocket</a>
      </div>
   </body>
	
</html>

Quảng cáo

Cài đặt pywebsocket

Trước khi bạn kiểm tra chương trình Client ở trên, bạn cần một Server mà hỗ trợ WebSocket. Bạn tải mod_pywebsocket-x.x.x.tar.gz từ pywebsocket mà giúp đỡ cung cấp một WebSocket mở rộng cho Apache HTTP Server và cài đặt nó theo các bước sau:

Unzip và untar tệp đã tải về.
Vào trong thư mục pywebsocket-x.x.x/src/.
Chạy $python setup.py
Cài đặt $sudo python setup.py
Sau đó đọc tài liệu bởi:
- $pydoc mod_pywebsocket

Nó sẽ cài đặt trong môi trường python của bạn.

Bắt đầu Server

Vào thư mục pywebsocket-x.x.x/src/mod_pywebsocket và chạy lệnh sau:

$sudo python standalone.py -p 9998 -w ../example/

Nó sẽ bắt đầu Server tại Port 9998 và sử dụng thư mục handler được xác định bởi tùy chọn –w nơi echo_wsh.py cư ngụ.

Bây giờ sử dụng trình duyệt Chrome mở tập tin html bạn đã tạo ở phần bắt đầu. Nếu trình duyệt hỗ trợ WebSocket(), thì sau đó bạn sẽ nhận cảnh báo chỉ rằng trình duyệt của bạn hỗ trợ WebSocket và cuối cùng khi bạn nhấn chuột trên "Run WebSocket", bạn sẽ nhận thông báo Goodbye được gửi từ Server script.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML5 phổ biến khác tại vietjack.com: