Hướng dẫn how do you create a comment section in html? - làm thế nào để bạn tạo một phần bình luận trong html?

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

• 25 phút đọc
• Mã hóa, CSS, JavaScript, HTML5, HTML

Thêm chức năng thời gian thực vào một ứng dụng có thể dẫn đến trải nghiệm người dùng tương tác và hấp dẫn hơn. Tuy nhiên, việc thiết lập và duy trì các thành phần thời gian thực phía máy chủ có thể là một sự phân tâm không mong muốn. Nhưng đừng lo lắng, có một giải pháp.

Cloud đã lưu trữ các dịch vụ web và API đã đến giải cứu nhiều nhà phát triển trong vài năm qua và chức năng thời gian thực cũng không khác. Ví dụ, trọng tâm tại Pizer là cho phép bạn tập trung vào việc xây dựng các ứng dụng web thời gian thực của mình bằng cách cung cấp API được lưu trữ giúp nhanh chóng và dễ dàng thêm chức năng thời gian thực có thể mở rộng cho các ứng dụng web và di động.

Đọc thêm về SmashingMag: on SmashingMag:

• Cải thiện trải nghiệm người dùng với các tính năng thời gian thực
• Dữ liệu thời gian thực và một trang web được cá nhân hóa hơn
• Xây dựng bảng hồi cứu thời gian thực với trò chuyện video
• Tất cả các ý kiến ​​đã biến mất ở đâu?

Trong hướng dẫn này, tôi sẽ chỉ ra cách chuyển đổi một hệ thống bình luận blog cơ bản thành trải nghiệm hấp dẫn thời gian thực, nơi bạn sẽ thấy một bình luận được thực hiện trong một cửa sổ trình duyệt, một cách kỳ diệu xuất hiện trong một cửa sổ thứ hai.

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

Tại sao chúng ta nên quan tâm đến web thời gian thực?

Mặc dù web thời gian thực là một cụm từ chính tương đối gần đây, các công nghệ web thời gian thực đã tồn tại trong hơn 10 năm. Chúng chủ yếu được sử dụng bởi các công ty xây dựng phần mềm được nhắm mục tiêu vào lĩnh vực dịch vụ tài chính hoặc trong các ứng dụng trò chuyện web. Các giải pháp ban đầu này được phân loại là hack hack. Vào năm 2006, các giải pháp này đã được đưa ra một thuật ngữ ô gọi là Comet, nhưng ngay cả với một cái tên xác định, các giải pháp vẫn được coi là hack. Vì vậy, những gì đã thay đổi?So, what’s changed?

Theo tôi, có một số yếu tố đã chuyển các công nghệ web thời gian thực lên hàng đầu trong phát triển ứng dụng web.

Phương tiện truyền thông xã hội, và cụ thể là Twitter, có nghĩa là ngày càng có nhiều dữ liệu trở nên có sẵn ngay lập tức. Đã qua rồi những ngày chúng ta phải chờ đợi sự vĩnh cửu để Google tìm dữ liệu của chúng tôi (bài đăng trên blog, cập nhật trạng thái, hình ảnh). Hiện tại có những nền tảng không chỉ làm cho dữ liệu của chúng tôi có thể phát hiện được ngay lập tức mà còn cung cấp ngay lập tức cho những người đã tuyên bố sở thích. Ý tưởng xuất bản/đăng ký này là cốt lõi cho web thời gian thực, đặc biệt là khi xây dựng các ứng dụng web.

Tăng kỳ vọng của người dùng

Khi nhiều người dùng chuyển sang sử dụng các ứng dụng như Twitter và Facebook và trải nghiệm người dùng mà họ cung cấp, nhận thức của họ về những gì có thể được mong đợi từ một ứng dụng web đã thay đổi. Mặc dù các ứng dụng đã trở nên năng động hơn thông qua việc sử dụng JavaScript, nhưng những trải nghiệm hiếm khi thực sự tương tác. Facebook, với bức tường thời gian thực của nó (và sau đó các tính năng thời gian thực khác) và Twitter với giao diện người dùng của Stream Hoạt động và tập trung vào cuộc trò chuyện, đã chứng minh làm thế nào các ứng dụng web có thể hấp dẫn cao.

WebSockets

Trước đó, tôi đã tuyên bố rằng các giải pháp trước đây để cho các máy chủ ngay lập tức đẩy dữ liệu vào các trình duyệt web được coi là hack hack. Nhưng điều này đã loại bỏ sự thật rằng có một yêu cầu để có thể thực hiện điều này theo cách trình duyệt chéo và tiêu chuẩn hóa. Những lời cầu nguyện của chúng tôi cuối cùng đã được trả lời với các websockets HTML5. WebSockets đại diện cho một API và giao thức được đặt ra cho phép giao tiếp hai chiều và máy khách thời gian thực (trình duyệt web) qua một kết nối. Các giải pháp cũ hơn chỉ có thể đạt được giao tiếp hai chiều bằng hai kết nối để thực tế các websocket sử dụng một kết nối thực sự là một vấn đề lớn. Nó có thể là một khoản tiết kiệm tài nguyên lớn cho máy chủ và máy khách, sau đó là đặc biệt quan trọng đối với các thiết bị di động nơi nguồn pin cực kỳ có giá trị.HTML5 WebSockets. WebSockets represent a stardardized API and protocol that allows realtime server and client (web browser) two way communication over a single connection. Older solutions could only achieve two-way communication using two connections so the fact the WebSockets use a single connection is actually a big deal. It can be a massive resource saving to the server and client, with the latter being particularly important for mobile devices where battery power is extremely valuable.

Công nghệ thời gian thực đang được sử dụng như thế nào?

Các công nghệ web thời gian thực đang giúp xây dựng tất cả các loại chức năng hấp dẫn, dẫn đến trải nghiệm người dùng được cải thiện. Dưới đây là một số ít các trường hợp sử dụng phổ biến:

• Số liệu thống kê thời gian thực - Công nghệ lần đầu tiên được sử dụng trong tài chính để hiển thị thông tin trao đổi chứng khoán, vì vậy, không có gì ngạc nhiên khi công nghệ này được sử dụng hơn bao giờ hết. Nó cũng rất có lợi cho các môn thể thao, cá cược và phân tích. - The technology was first used in finance to show stock exchange information so it’s no surprise that the technology is now used more than ever. It’s also highly beneficial to sports, betting and analytics.
• Thông báo - Khi một cái gì đó mà người dùng quan tâm trở nên có sẵn hoặc thay đổi. - when something a user is interested in becomes available or changes.
• Luồng hoạt động - luồng hoạt động của bạn bè hoặc dự án. Điều này thường thấy trong các ứng dụng như Twitter, Facebook, Trello, Quora và nhiều hơn nữa. - streams of friend or project activity. This is commonly seen in apps like Twitter, Facebook, Trello, Quora and many more.
• Trò chuyện - Công nghệ web 101 hoặc thời gian thực nhưng vẫn là một chức năng rất có giá trị. Nó giúp giao hàng tương tác ngay lập tức giữa bạn bè, đồng nghiệp, khách hàng và dịch vụ khách hàng, v.v. - the 101 or real-time Web technology but still a very valuable function. It helps delivery instant interaction between friends, work colleagues, customers and customer service etc.
• Hợp tác - Google Docs cung cấp loại chức năng này trong các tài liệu, bảng tính và ứng dụng vẽ của mình và chúng tôi sẽ thấy các trường hợp sử dụng tương tự trong nhiều ứng dụng khác. - Google docs offers this kind of functionality within its docs, spreadsheets and drawing applications and we’re going to see similar use cases in many more applications.
• Trò chơi nhiều người chơi - Khả năng cung cấp ngay lập tức các động tác của người chơi, thay đổi trạng thái trò chơi và cập nhật điểm rõ ràng là rất quan trọng đối với trò chơi nhiều người chơi. - The ability to instantly deliver player moves, game state changes and score updates is clearly important to multiplayer gaming.

Trong phần còn lại của hướng dẫn này, tôi sẽ đề cập đến việc xây dựng một hệ thống bình luận blog cơ bản, cách tăng dần dần Làm thế nào dễ dàng để sử dụng công nghệ web thời gian thực, nhưng cũng có giá trị và sự tham gia tăng lên mà một yếu tố thời gian thực có thể giới thiệu.

Bắt đầu từ một mẫu

Tôi muốn tập trung vào việc thêm bình luận thời gian thực vào một bài đăng trên blog, vì vậy hãy để bắt đầu từ một mẫu.let’s start from a template.

Mẫu này sử dụng lại bố cục HTML5 được xác định trong bài đăng về mã hóa bố cục HTML 5 từ đầu và cấu trúc tệp mà chúng tôi sẽ bắt đầu như sau (với một số bổ sung mà chúng tôi không cần phải lo lắng vào lúc này):

• CSS (Dir)
  • global-forms.css
  • main.css
  • reset.css
• Hình ảnh (Dir)
• index.php

HTML

Mẫu HTML, được tìm thấy trong index.php, đã được thay đổi từ bài viết bố cục HTML5 để tập trung vào nội dung là một bài đăng trên blog với các bình luận. Bạn có thể xem nguồn HTML ở đây.

Các yếu tố chính cần nhận biết là:

• get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  0 - Nội dung bài đăng trên blog

• get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  1 - nơi các ý kiến ​​sẽ xuất hiện. Đây là nơi phần lớn công việc của chúng tôi sẽ được thực hiện

Bây giờ, chúng tôi đã có HTML tại chỗ cho bài đăng trên blog của chúng tôi và để hiển thị các nhận xét, chúng tôi cũng cần một cách để độc giả gửi nhận xét, vì vậy hãy để thêm một yếu tố

get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

  
Leave a Comment

  


    Your name
    

    Your email;
    

    Your message
    

    <-- comment_post_ID value hard-coded as 1 -->
    
    

  

Hãy để áp dụng một số CSS để làm cho mọi thứ trông đẹp hơn một chút bằng cách thêm phần sau vào main.css:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Khi cấu trúc HTML, hình thức nhận xét và CSS được đặt ra, hệ thống blog của chúng tôi đã bắt đầu trông có vẻ có thể trình bày hơn một chút.

Xử lý việc gửi bình luận

Bước tiếp theo là viết trình xử lý trình gửi biểu mẫu PHP chấp nhận yêu cầu và lưu trữ bình luận, post_comment.php. Bạn nên tạo tệp này trong gốc của ứng dụng của bạn.

Như tôi đã nói trước đó, tôi rất muốn tập trung vào chức năng thời gian thực để một lớp tồn tại trong mẫu mà bạn đã tải xuống, gói gọn một số chức năng kiểm tra dữ liệu tiêu chuẩn và chức năng liên tục. Lớp này được xác định trong sự kiên trì.php (bạn có thể xem nguồn ở đây), không có cách nào chất lượng sản xuất và tay cầm:

• Xác nhận cơ bản
• Vệ sinh dữ liệu cơ bản
• Sự kiên trì rất đơn giản bằng cách sử dụng người dùng

  get_comments($comment_post_ID);
  $has_comments = (count($comments) > 0);
  ?>

  5. Điều này có nghĩa là một nhận xét được lưu bởi một người dùng sẽ không có sẵn cho người dùng khác.

Điều này cũng có nghĩa là chúng tôi không cần phải dành thời gian để thiết lập cơ sở dữ liệu và tất cả những gì đi cùng với nó và làm cho post_comment.php rất đơn giản trở nên sạch sẽ. Nếu bạn muốn sử dụng chức năng này trong môi trường sản xuất, bạn sẽ cần phải viết lại nội dung của sự kiên trì.php. Tại đây, mã cho Post_comment.php.

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Mã trên thực hiện như sau:

1. Bao gồm lớp bền bỉ.php xử lý các bình luận tiết kiệm và tìm nạp các bình luận.
2. Tạo một phiên bản mới của đối tượng

   get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   6 và gán nó cho biến

   get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   7.
3. Cố gắng thêm nhận xét vào

   get_comments($comment_post_ID);
   $has_comments = (count($comments) > 0);
   ?>

   7. Nếu nhận xét được thêm thành công, nó chuyển hướng trở lại bài đăng trên blog. Nếu nó thất bại, chuyển hướng cũng xảy ra nhưng một số văn bản lỗi được nối vào tham số truy vấn lỗi.

Điều cuối cùng chúng ta cần làm để có hệ thống bình luận blog chung và chạy là cập nhật trang blog, index.php, để tìm nạp và hiển thị các nhận xét từ đối tượng

get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

• Vì đây không phải là một hệ thống viết blog thực sự, chúng tôi sẽ mã hóa giá trị
  0 là
  1.
• Bao gồm lớp bền bỉ.php và tìm nạp các ý kiến ​​từ nó. Nhận xét được liên kết với một bài đăng trên blog bằng cách sử dụng
  0 độc đáo.

get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>

Vì bây giờ chúng tôi có khả năng truy cập

Bây giờ chúng tôi có tất cả các ý kiến ​​liên quan đến bài đăng trên blog được tham chiếu bởi biến

  
Be the first to add a comment.
  
      

        

        

          

        
      
      

Bạn sẽ nhận thấy rằng nếu giá trị của

#posts-list.has-comments li.no-comments {
  display: none;
}

Bây giờ tất cả điều này là tại chỗ, chúng tôi có một hệ thống bình luận blog chức năng. Nếu bạn muốn bắt đầu viết mã của mình từ hệ thống bình luận blog hoạt động cơ bản này, bạn cũng có thể tải xuống mã hoàn thành cho đến đây.

Tăng cường tiến bộ với jQuery

Bước đầu tiên trong việc làm cho hệ thống bình luận blog của chúng tôi cảm thấy không giống như một trang web và giống như một ứng dụng là dừng trang lại trang khi người dùng gửi bình luận. Chúng tôi có thể làm điều này bằng cách gửi các nhận xét đến máy chủ bằng yêu cầu AJAX. Vì jQuery có lẽ là tiêu chuẩn defacto cho chức năng JavaScript của Trình duyệt chéo, chúng tôi sẽ sử dụng nó ở đây. Mặc dù tôi đã sử dụng jQuery ở đây, nhưng tôi cũng muốn nhấn mạnh rằng đó là một ý tưởng tốt để không phải lúc nào cũng sử dụng jQuery. Thay vào đó, hãy phân tích kịch bản của bạn và đưa ra quyết định được xem xét bởi vì có một số trường hợp bạn tốt nhất không nên làm.

Trong một nỗ lực để thử và giữ nhiều kịch bản (PHP và JavaScript) từ tệp index.php, chúng tôi sẽ tạo một thư mục mới cho JavaScript của chúng tôi và trong đó một tệp cho Ứng dụng JavaScript của chúng tôi. Đường dẫn đến lần điền này phải là js/app.js. Tệp này nên được bao gồm sau khi jQuery bao gồm.

Khi trang đã sẵn sàng liên kết với sự kiện

$(function() {
  $('#commentform').submit(handleSubmit);
});

Khi biểu mẫu được gửi và hàm

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

Trong hàm

  
Be the first to add a comment.
  
      

        

        

          

        
      
      

  
Be the first to add a comment.
  
      

        

        

          

        
      
      

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Tại thời điểm này, dữ liệu nhận xét đang được gửi đến máy chủ và được lưu, nhưng phản hồi AJAX không cung cấp bất kỳ phản hồi có ý nghĩa nào. Ngoài ra, phần bình luận không được cập nhật để hiển thị nhận xét mới được gửi để người dùng sẽ phải làm mới trang để xem nó. Hãy bắt đầu bằng cách viết mã để cập nhật giao diện người dùng và kiểm tra chức năng đó.

Nếu bạn đang nghĩ rằng hãy treo trên một phút! Chúng tôi không có tất cả dữ liệu chúng tôi cần từ máy chủ web để hiển thị nhận xét, sau đó bạn đã đúng. Tuy nhiên, điều này không ngăn cản chúng tôi viết mã để cập nhật giao diện người dùng và cũng kiểm tra nó hoạt động. Đây là cách: làm thế nào:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Mã trên thực hiện như sau:

• Trong hàm

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  0, chúng tôi xóa các giá trị biểu mẫu và gọi

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  3.

• 
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  3 Đầu tiên gọi hàm

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  5 để tạo mục danh sách (

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  6) HTML dưới dạng

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  7.
• Sau đó, chúng tôi chuyển đổi HTML thành một đối tượng jQuery bằng

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  8 và ẩn phần tử.
• Mục danh sách nhận xét sau đó được chuẩn bị cho danh sách đặt hàng được đặt hàng (

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  9). Danh sách này cũng có một lớp có tên là Has-Comments được thêm vào nó để chúng tôi có thể ẩn mục danh sách đầu tiên có chứa câu lệnh đầu tiên để nhận xét.
• Cuối cùng, chúng tôi gọi

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  0 để nhận xét được hiển thị trong những gì đang trở thành tiêu chuẩn ở đây, một mặt hàng mới.

Chức năng hiện được thực hiện nhưng chúng tôi muốn kiểm tra nó. Điều này có thể đạt được theo hai cách:

• 
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  3 là một hàm toàn cầu để chúng tôi có thể gọi nó trực tiếp bằng bảng điều khiển JavaScript của trình duyệt.
• Chúng ta có thể liên kết với một sự kiện trên trang kích hoạt bản cập nhật giả gọi chức năng

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  3

Hãy cùng đi với cái sau và liên kết với khóa U U được phát hành bằng cách liên kết với sự kiện

#posts-list.has-comments li.no-comments {
  display: none;
}

  
Be the first to add a comment.
  
      

        

        

          

        
      
      

Nhấn phím U U U một vài lần và thấy các bình luận xuất hiện.

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Tuyệt quá! Bây giờ chúng ta biết rằng chức năng

  
Be the first to add a comment.
  
      

        

        

          

        
      
      

Phát hiện và trả lời yêu cầu AJAX

Tất cả những gì còn lại để làm là cập nhật tệp post_comment.php để phát hiện cuộc gọi AJAX và trả về thông tin về nhận xét mới được tạo.

Phát hiện yêu cầu AJAX được thực hiện bằng cách kiểm tra tiêu đề

#posts-list.has-comments li.no-comments {
  display: none;
}

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Khi chúng tôi biết yêu cầu là yêu cầu AJAX, chúng tôi có thể cập nhật mã để trả lời với mã trạng thái phù hợp và dữ liệu đại diện cho nhận xét. Chúng tôi cũng cần đảm bảo rằng chức năng ban đầu được duy trì. Mã post_comment.php bây giờ trông như sau:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Các điểm chính từ mã trên là:

• Cuộc gọi

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  8 trả về dữ liệu từ nhận xét được thêm vào được gán cho biến

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  9.
• Bằng cách đặt loại nội dung phản hồi cho ứng dụng/json, chúng tôi bảo rằng jQuery chuyển đổi chuỗi được trả về thành một đối tượng JavaScript. Để biết thêm thông tin về việc gọi các dịch vụ web JSON, hãy xem Hướng dẫn dành cho người mới bắt đầu về các máy khách JSON API dựa trên JQuery.
• Mã trạng thái 201 cho biết một cuộc gọi thành công và cả tài nguyên (bình luận) đã được tạo bởi cuộc gọi.

Hệ thống bình luận blog hiện hoạt động theo cách năng động hơn nhiều, ngay lập tức cho người dùng thấy rằng nhận xét của họ đã được đăng mà không làm mới trang. Ngoài ra, cách chúng tôi đã thêm chức năng dựa trên JavaScript vào trang có nghĩa là nếu JavaScript bị vô hiệu hóa hoặc tệp JavaScript không tải được rằng hệ thống sẽ dự phòng chức năng tiêu chuẩn mà chúng tôi đã thực hiện lần đầu tiên.

Nhận thời gian thực theo thời gian thực sự!

Như với bất kỳ hướng dẫn nào từ đầu từ đầu, có thể mất một chút thời gian để đến phần thực sự thú vị, nhưng cuối cùng chúng tôi cũng ở đây. Tuy nhiên, tất cả các công việc mà chúng tôi đã tham gia đều có giá trị. Bởi vì chúng tôi đã xây dựng hệ thống bình luận của mình theo cách tăng cường dần dần, việc cắm tốc độ vào nó sẽ thực sự dễ dàngreally interesting part, but we’re finally here. However, all the work we’ve up in has been worth it. Because we’ve built our commenting system up in a progressively enhanced way, plugging Pusher into it is going to be really easy

Pusher là gì?

Khi bắt đầu hướng dẫn, chúng tôi đã nói rằng chúng tôi sẽ sử dụng Pizer để thêm chức năng thời gian thực vào ứng dụng. Nhưng Pusher là gì?

Pusher là một dịch vụ được lưu trữ cho nhanh chóng và dễ dàng thêm các tính năng thời gian thực vào các ứng dụng web và di động. Nó cung cấp API RESTful giúp việc xuất bản các sự kiện từ bất kỳ ứng dụng nào có thể thực hiện yêu cầu HTTP và API WebSocket để giao tiếp hai chiều thời gian thực. Bạn thậm chí không cần sử dụng API trực tiếp vì có máy chủ (PHP, Ruby, Node.js, ASP.NET, Python và hơn thế nữa) và máy khách (JavaScript, iOS, Android, .NET, ActionScript, Arduino và hơn thế nữa) Các thư viện có sẵn trong một loạt các công nghệ, điều đó có nghĩa là bạn có thể thêm chức năng thời gian thực vào một ứng dụng trong vòng vài phút - Tôi tự tin rằng bạn sẽ ngạc nhiên khi dễ dàng như thế nào!

Đăng ký Pizer và nhận thông tin đăng nhập API của bạn

Để thêm chức năng thời gian thực chạy bằng pusher vào ứng dụng web, trước tiên bạn cần đăng ký tài khoản hộp cát miễn phí. Sau khi bạn đã đăng ký, bạn sẽ được đưa đến bảng điều khiển Pusher, nơi bạn sẽ thấy rằng một ứng dụng chính đã được tạo ra cho bạn. Bạn cũng sẽ thấy bạn đang ở trong phần truy cập API API cho ứng dụng đó, nơi bạn có thể lấy thông tin đăng nhập API của mình.

Để dễ dàng truy cập, hãy, hãy, hãy tạo tệp pusher_config.php và

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Trong phiên bản pusherconfig.php của bạn, hãy chắc chắn thay thế các giá trị là ‘của bạn bằng thông tin thực tế của bạn.

Bạn cũng nên

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

JavaScript thời gian thực

Điều đầu tiên bạn cần làm khi thêm Pusher vào ứng dụng web là bao gồm thư viện JavaScript và kết nối với Pusher. Để kết nối, bạn sẽ cần sử dụng phím mà bạn lấy từ bảng điều khiển Pizer. Dưới đây bạn có thể thấy tất cả những gì được yêu cầu để kết nối ứng dụng Front-end để đẩy.

Bao gồm thư viện JavaScript Pusher sau khi app.js bao gồm:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Thêm chức năng Pusher vào App.js:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Điều này có lẽ trông quá dễ dàng để trở thành sự thật, vì vậy đây là các chi tiết về những gì mã trên làm:

• 3 tạo ra một thể hiện mới của đối tượng
  4 và khi làm như vậy kết nối bạn với người đẩy. Ứng dụng để sử dụng được xác định bởi giá trị
  2 mà bạn chuyển vào và chúng tôi đã thiết lập trước đó.

• 6 Các kênh cung cấp một cách tuyệt vời để tổ chức các luồng dữ liệu thời gian thực. Ở đây chúng tôi đang đăng ký nhận xét cho bài đăng trên blog hiện tại, được xác định duy nhất bởi giá trị của phần tử đầu vào biểu mẫu ẩn ____77.

• 8 Các sự kiện được sử dụng để lọc thêm dữ liệu và rất lý tưởng để liên kết các bản cập nhật với các thay đổi trong giao diện người dùng. Trong trường hợp này, chúng tôi muốn liên kết với một sự kiện được kích hoạt bất cứ khi nào một bình luận mới được thêm vào và hiển thị nó. Bởi vì chúng tôi đã tạo chức năng

  
    
  Be the first to add a comment.
    
        
  
          
  
          
  
            
  
          
        
        
  

  3, chúng tôi chỉ có thể chuyển tham chiếu đến cuộc gọi đến

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  0.

Gửi các sự kiện thời gian thực bằng cách sử dụng người tạo sự kiện

Chúng tôi cũng có thể kiểm tra chức năng này mà không cần viết bất kỳ mã phía máy chủ nào bằng cách sử dụng Trình tạo sự kiện cho ứng dụng của bạn cũng có thể được tìm thấy trong bảng điều khiển Pizer. Người tạo sự kiện cho phép bạn xuất bản các sự kiện trên một kênh thông qua giao diện người dùng đơn giản. Từ mã trên, chúng ta có thể thấy rằng chúng ta muốn xuất bản một sự kiện có tên là New New_Comment trên kênh Nhận xét-1. Từ chức năng thử nghiệm trước đó, chúng tôi cũng có một ví dụ về dữ liệu thử nghiệm mà chúng tôi có thể xuất bản.Event Creator for your app which can also be found in the Pusher dashboard. The Event Creator lets you publish events on a channel through a simple user interface. From the code above we can see that we want to publish an event named “new_comment” on the “comments-1” channel. From the earlier test function we also have an example of the test data we can publish.

PHP thời gian thực

Một lần nữa, chúng tôi đã chứng minh rằng chức năng phía máy khách của chúng tôi hoạt động mà không phải viết bất kỳ mã phía máy chủ nào. Bây giờ hãy thêm mã PHP, chúng tôi cần kích hoạt sự kiện nhận xét mới ngay khi nhận xét được đăng trong hệ thống bình luận của chúng tôi.

Pusher cung cấp một số thư viện phía máy chủ giúp dễ dàng xuất bản các sự kiện ngoài việc giúp chức năng như xác thực kênh riêng và cung cấp thông tin người dùng cho các kênh hiện diện. Chúng tôi chỉ muốn sử dụng chức năng kích hoạt sự kiện cơ bản trong tệp post_comment.php vì vậy chúng tôi cần tải xuống thư viện pusher PHP.

Khi bạn đã tải xuống tệp zip này, hãy giải nén nó vào thư mục cùng với các tệp khác của bạn. Cấu trúc tệp của bạn bây giờ sẽ trông giống như thế này:

• index.php
• CSS (Dir)
• Hình ảnh (Dir)
• post_comment.php
• pusher_config.php
• Persistence.php
• Squeeks-Pizer-Php (Dir)
  • Lib (Dir)
    • Pusher.php

Một sự kiện có thể được kích hoạt chỉ trong một vài dòng mã:

#respond {
  margin-top: 40px;
}

#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
  margin-bottom: 10px;
  display: block;
  width: 100%;

  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

  line-height: 1.4em;
}

Tuy nhiên, chúng tôi cần áp dụng một số logic bổ sung trước khi chúng tôi kích hoạt sự kiện:

• Kiểm tra xem nhận xét đã được thêm vào.
• Trích xuất số nhận dạng bình luận duy nhất từ ​​mảng

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  9.
• Xây dựng văn bản để xác định tên kênh cho nhận xét đã gửi.
• Kích hoạt một sự kiện _NewComment trên kênh với dữ liệu

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  9. Lưu ý: Thư viện tự động chuyển đổi biến mảng

  #posts-list.has-comments li.no-comments {
    display: none;
  }

  9 thành JSON để được gửi qua Pizer.

Do đó, tệp post_comment.php đầy đủ kết thúc như sau:

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Nếu bạn chạy ứng dụng ngay bây giờ trong hai cửa sổ trình duyệt khác nhau, bạn sẽ thấy rằng ngay khi bạn gửi bình luận trong một cửa sổ mà nhận xét sẽ ngay lập tức (một cách kỳ diệu) xuất hiện trong cửa sổ thứ hai. Bây giờ chúng tôi có một hệ thống bình luận thời gian thực!We now have a real-time commenting system!

Nhưng, chúng tôi chưa thực hiện được. Bạn cũng sẽ thấy rằng nhận xét được hiển thị hai lần trong cửa sổ của người dùng đã gửi nó. Điều này là do nhận xét đã được thêm vào cuộc gọi lại AJAX và bởi sự kiện Pusher. Bởi vì đây là một kịch bản rất phổ biến, đặc biệt là nếu bạn đã xây dựng một ứng dụng theo cách tăng cường dần dần như chúng ta có, các thư viện máy chủ Pizer phơi bày cách loại trừ kết nối/người dùng nhận sự kiện thông qua Pizer., we’re not done quite yet. You’ll also see that the comment is shown twice in the window of the user who submitted it. This is because the comment has been added by the AJAX callback, and by the Pusher event. Because this is a very common scenario, especially if you’ve built an application in a progressively enhanced way as we have, the Pusher server libraries expose a way of excluding a connection/user from receiving the event via Pusher.

Để làm điều này, bạn cần gửi một định danh kết nối duy nhất được gọi là

$(function() {
  $('#commentform').submit(handleSubmit);
});

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Những thay đổi mà chúng tôi đã thực hiện là:

• Một hàm mới gọi là

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  5 đã được thêm vào để có được

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  4. Nó kết thúc một kiểm tra để đảm bảo rằng biến

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  7 đã được đặt và cả máy khách được kết nối với máy đẩy.

• 7 đã được cập nhật để kiểm tra xem có sẵn

  $(function() {
    $('#commentform').submit(handleSubmit);
  });

  4 không. Nếu có, thông tin này được đăng lên máy chủ cùng với dữ liệu nhận xét.

Trên máy chủ, chúng tôi cần sử dụng tham số

$(function() {
  $('#commentform').submit(handleSubmit);
});

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Và đơn giản như chúng tôi có một hệ thống bình luận blog được kích hoạt hoàn toàn theo thời gian thực và chúng tôi chỉ gửi tin nhắn cho người dùng thực sự cần phải xem chúng. Như với chức năng AJAX, chức năng thời gian thực đã được thêm vào theo cách tăng cường dần dần, để đảm bảo nó không tác động đến bất kỳ chức năng nào khác. Bạn có thể tìm thấy một bản demo chạy ở đây và giải pháp đã hoàn thành trong kho lưu trữ bình luận thời gian thực trong GitHub.a fully realtime enabled blog commenting system and we only send messages to users who really need to see them. As with the AJAX functionality the realtime functionality has been added in a progressively enhancing way, to ensure it doesn’t impact on any other functionality. You can find the a demo running here and the completed solution in the realtime commenting repository in github.

Thực tiễn phát triển ứng dụng thời gian thực tốt

Phát triển ứng dụng thời gian thực chia sẻ thực tiễn phát triển tốt chung với phát triển web chung. Tuy nhiên, tôi nghĩ rằng tôi sẽ chia sẻ một vài lời khuyên có thể đặc biệt tiện dụng.

Sử dụng các công cụ nhà phát triển trình duyệt

Khi bạn bắt đầu thực hiện nhiều phát triển JavaScript, các công cụ phát triển trình duyệt sẽ trở thành người bạn tốt nhất của bạn. Nó giống nhau khi thêm chức năng thời gian thực vào ứng dụng web của bạn, không chỉ bởi vì bạn đang sử dụng JavaScript, mà còn bởi vì thư viện JavaScript bạn đang sử dụng có thể sẽ làm một số điều hợp lý phức tạp trong nội bộ. Vì vậy, cách tốt nhất để hiểu những gì đang diễn ra và nếu mã của bạn đang sử dụng nó như mong đợi là cho phép ghi nhật ký thường được chuyển đến bảng điều khiển nhà phát triển. Tất cả các nhà cung cấp trình duyệt chính hiện cung cấp các công cụ phát triển tốt bao gồm bảng điều khiển:

• Firebug Addon cho Firefox
• Internet Explorer F12 Công cụ phát triển
• Opera Dragonfly
• Công cụ phát triển Safari

Thư viện JavaScript cung cấp một cách để nối vào chức năng khai thác. Tất cả những gì bạn cần làm là gán một hàm cho thuộc tính tĩnh

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Mã trên kiểm tra để đảm bảo hàm

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

Kiểm tra kết nối

Bất kỳ công nghệ thời gian thực tốt nào cũng sẽ duy trì kết nối liên tục giữa máy khách (trình duyệt web) và máy chủ hoặc dịch vụ web. Đôi khi, khách hàng sẽ mất kết nối và khi khách hàng không được kết nối với internet, chức năng thời gian thực đã giành được công việc. Điều này có thể xảy ra rất nhiều với các ứng dụng chạy trên các thiết bị di động dựa trên mạng di động. Vì vậy, nếu ứng dụng của bạn dựa vào kết nối và chức năng đó thì điều quan trọng là đối phó với các kịch bản trong đó máy khách không được kết nối. Điều này có thể là bằng cách hiển thị một thông báo để nói với người dùng rằng họ đang ngoại tuyến hoặc bạn có thể muốn thực hiện một số chức năng thay thế.

Thư viện JavaScript pusher hiển thị trạng thái kết nối thông qua đối tượng

function handleSubmit() {
  var form = $(this);
  var data = {
    "comment_author": form.find('#comment_author').val(),
    "email": form.find('#email').val(),
    "comment": form.find('#comment').val(),
    "comment_post_ID": form.find('#comment_post_ID').val()
  };

  postComment(data);

  return false;
}

function postComment(data) {
  // send the data to the server
}

$(function() {
  $('#commentform').submit(handleSubmit);
});

add_comment($_POST) ) {
  header( 'Location: index.php' );
}
else {
  header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>

Sự kết luận

Chúng tôi thấy chức năng thời gian thực xuất hiện trong một số lượng lớn các ứng dụng cấu hình cao: một số người có cốt lõi của những gì họ cung cấp trong khi những người khác sử dụng nó một cách tiết kiệm. Bất kể nó được sử dụng như thế nào, mục tiêu cuối cùng nói chung là giống nhau; Để nâng cao trải nghiệm người dùng và giữ cho người dùng tham gia với một ứng dụng. Bằng cách chuyển đổi một hệ thống bình luận blog cơ bản thành một nền tảng truyền thông hấp dẫn hơn, tôi hy vọng tôi đã chứng minh rằng chức năng và kinh nghiệm có thể dễ dàng được xếp lớp trên ứng dụng hiện có.

Dễ dàng truy cập vào công nghệ này là một điều tương đối mới và chúng tôi chỉ chạm vào những cách sử dụng tiềm năng cho công nghệ. Số liệu thống kê thời gian thực, cập nhật tin tức tức thời, luồng hoạt động, tương tác xã hội, hợp tác và chơi game chỉ là một vài cách sử dụng phổ biến nhưng khi nhiều nhà phát triển nhận thức và thoải mái với công nghệ mà tôi tin tưởng rằng chúng ta sẽ thấy một số Đổi mới thực sự tuyệt vời. Một Internet của những thứ thời gian thực?

Làm thế nào để bạn đưa ra nhận xét trong HTML đưa ra một ví dụ?

Làm thế nào để bạn thực hiện một hộp bình luận?

Làm thế nào để bạn thực hiện một hộp bình luận trong trường học html w3schools?