VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

WebSockets trong HTML5


Sự kiện Server-Sent trong HTML5
Canvas trong HTML5

Nội dung chính

  • WebSockets trong HTML5
  • Các thuộc tính WebSocket
  • Các sự kiện WebSocket
  • Các phương thức WebSocket
  • Ví dụ WebSocket
  • Client-Side HTML và JavaScript Code
  • Cài đặt pywebsocket
  • Bắt đầu Server

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ínhMô 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()


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ệnEvent HandlerMô tả
openSocket.onopenSự kiện này xảy ra khi kết nối Socket được thành lập.
messageSocket.onmessageSự kiện này xảy ra khi Client nhận dữ liệu từ Server.
errorSocket.onerrorSự kiện này xảy ra khi có bất kỳ lỗi nào trong giao tiếp.
closeSocket.oncloseSự 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ứcMô 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>

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.


Sự kiện Server-Sent trong HTML5
Canvas trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml