HTML5 - WebSockets

WebSockets là công nghệ giao tiếp hai chiều thế hệ tiếp theo dành cho các ứng dụng web hoạt động trên một ổ cắm duy nhất và được hiển thị thông qua giao diện JavaScript trong các trình duyệt tuân thủ HTML 5.

Khi bạn có kết nối Web Socket với máy chủ web, bạn có thể gửi dữ liệu từ trình duyệt đến máy chủ bằng cách gọi send() và nhận dữ liệu từ máy chủ đến trình duyệt bằng một onmessage xử lý sự kiện.

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

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

Đây là đối số đầu tiên, url, chỉ định URL để kết nối. Thuộc tính thứ hai, giao thức là tùy chọn và nếu có, chỉ định giao thức con mà máy chủ phải hỗ trợ để kết nối thành công.

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 -

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

Sự kiện WebSocket

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

Biến cố	Xử lý sự kiện	Sự miêu tả
mở	Socket.onopen	Sự kiện này xảy ra khi kết nối ổ cắm được thiết lập.
thông điệp	Socket.onmessage	Sự kiện này xảy ra khi máy khách nhận dữ liệu từ máy chủ.
lỗi	Socket.onerror	Sự kiện này xảy ra khi có bất kỳ lỗi nào trong giao tiếp.
đóng	Socket.onclose	Sự kiện này xảy ra khi kết nối bị đóng.

Phương thức WebSocket

Sau đây là các phương thức đượ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 -

Sr.No.	Phương pháp & Mô tả
1	Socket.send() Phương thức gửi (dữ liệu) truyền dữ liệu bằng cách sử dụng kết nối.
2	Socket.close() Phương thức close () sẽ được sử dụng để chấm dứt bất kỳ kết nối hiện có nào.

Ví dụ về WebSocket

WebSocket là một ổ cắm TCP hai chiều tiêu chuẩn giữa máy khách và máy chủ. Ổ cắm bắt đầu dưới dạng kết nối HTTP và sau đó "Nâng cấp" lên ổ cắm TCP sau một lần bắt tay HTTP. Sau cái bắt tay, một trong hai bên có thể gửi dữ liệu.

Mã HTML & JavaScript phía Máy khách

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 web hỗ trợ giao diện 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>

Cài đặt pywebsocket

Trước khi kiểm tra chương trình khách trên, bạn cần một máy chủ hỗ trợ WebSocket. Tải xuống mod_pywebsocket-xxxtar.gz từ pywebsocket nhằm cung cấp phần mở rộng Web Socket cho Máy chủ Apache HTTP và cài đặt nó theo các bước sau.

Giải nén và gỡ bỏ tệp đã tải xuống.
Đi vào bên trong pywebsocket-x.x.x/src/ danh mục.
$ python setup.py bản dựng
$ sudo python setup.py cài đặt
Sau đó, đọc tài liệu bằng cách -
- $ pydoc mod_pywebsocket

Thao tác này sẽ cài đặt nó vào môi trường python của bạn.

Khởi động máy chủ

Đi đến pywebsocket-x.x.x/src/mod_pywebsocket thư mục và chạy lệnh sau:

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

Thao tác này sẽ bắt đầu nghe máy chủ ở cổng 9998 và sử dụng handlers thư mục được chỉ định bởi tùy chọn -w nơi echo_wsh.py của chúng tôi cư trú.

Bây giờ bằng cách sử dụng trình duyệt Chrome, hãy mở tệp html mà bạn đã tạo lúc đầu. Nếu trình duyệt của bạn hỗ trợ WebSocket (), thì bạn sẽ nhận được cảnh báo cho biết trình duyệt của bạn hỗ trợ WebSocket và cuối cùng khi bạn nhấp vào "Chạy WebSocket", bạn sẽ nhận được thông báo Tạm biệt do tập lệnh máy chủ gửi.