- 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à:
5 - Nội dung bài đăng trên blog
6 - 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ố
Leave a Comment
Your name
Your email;
Your message
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
0. Đ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 kèm 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.
Mã trên thực hiện như sau:
- 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.
- Tạo một phiên bản mới của đối tượng
1 và gán nó cho biến
2. - Cố gắng thêm nhận xét vào
2. 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
- 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ị
5 là
6. - 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
5 độc đáo.
Vì bây giờ chúng tôi có khả năng truy cập