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
❮ ❯

Sự kiện Server-Sent trong HTML5


Web SQL Database trong HTML5
WebSockets trong HTML5

Nội dung chính

  • Sự kiện Server-Sent trong HTML5
  • Ứng dụng web cho SSE
  • Server-Side Script cho SSE
  • Xử lý Server-Side Event

Sự kiện Server-Sent trong HTML5

Các ứng dụng web quy ước tạo các sự kiện mà được gửi tới Web Server. Ví dụ, một cú nhấp chuột đơn trên một link yêu cầu một trang mới từ Server.

Kiểu của các sự kiện mà chuyển từ trình duyệt web tới Web Server có thể được gọi là các sự kiện Client-Sent.

Cùng với HTML5, WHATWG Web Applications 1.0 giới thiệu các sự kiện mà chảy từ Web Server tới các trình duyệt web và chúng được gọi là Server-Sent Events (SSE). Sử dụng SSE bạn có thể đẩy các sự kiện DOM liên tục từ Web Server của bạn tới trình duyệt khách truy cập.

Sự tiếp cận luồng sự kiện mở một kết nối vĩnh cửu tới Server, gửi dữ liệu tới Client khi thông tin mới có sẵn, loại bỏ sự cần thiết để Poll liên tục.

Server-Sent Events tiêu chuẩn hóa cách chúng ta chảy luồng dữ liệu từ Server tới Client.



Ứng dụng web cho SSE

Để sử dụng Server-Sent Events trong một ứng dụng web, bạn sẽ cần thêm một phần tử tới tài liệu.

Thuộc tính src của phần tử nên chỉ tới một URL mà nên cung cấp một kết nối HTTP lâu bền mà gửi một luồng dữ liệu chứa các sự kiện đó.

URL sẽ chỉ tới một PHP, PERL hoặc bất kỳ html script nào mà sẽ gửi dữ liệu sự kiện. Sau đây là một ví dụ đơn giản của ứng dụng web mà sẽ mong đợi Server Time:


<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
 
   <body>
 
      <div id="sse">
         <eventsource src="/cgi-bin/ticker.cgi" />
      </div>
  
      <div id="ticker">
         <TIME>
      </div>
  
   </body>
 
</html>

Server-Side Script cho SSE

Một Server-Side script nên gửi một Content-type header xác định text/event-stream như sau:.

print "Content-Type: text/event-stream\n\n";

Sau khi thiết lập Content-Type, Server-Side script sẽ gửi một thẻ Event: được theo sau bởi tên sự kiện. Ví dụ sau sẽ gửi Server-Time như là tên sự kiện được kết thúc bởi một ký tự dòng mới.

print "Event: server-time\n";

Bước cuối cùng để gửi dữ liệu sự kiện sử dụng thẻ Data: mà sẽ được theo sau bởi giá trị chuỗi Integer được kết thúc bởi một ký tự dòng mới như sau:

$time = localtime();
print "Data: $time\n";

Cuối cùng, ticker.cgi được viết đầy đủ trong Perl như sau:

#!/usr/bin/perlprint "Content-Type: text/event-stream\n\n";while(true){
   print "Event: server-time\n";
   $time = localtime();
   print "Data: $time\n";
   sleep(5);
}


Xử lý Server-Side Event

Chúng ta chỉnh sửa ứng dụng web để xử lý Server-Side Event. Sau đây là ví dụ sau cùng:


<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
   
         function eventHandler(event)
         {
            // Alert time sent by the server
            document.querySelector('#ticker').innerHTML = event.data;
         }
      </script>
   </head>
   <body>
      <div id="sse">
         <eventsource src="/cgi-bin/ticker.cgi" />
      </div>
      <div id="ticker" name="ticker">
         [TIME]
      </div>
   </body>
</html>

Web SQL Database trong HTML5
WebSockets 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