5 cách xây dựng ứng dụng thời gian thực với JavaScript


Đã có lúc chúng tôi không mong đợi quá nhiều từ các trang web. Nhắc mới nhớ, trang web phim Space Jam vẫn còn trên internet ở dạng ban đầu. Và nó sử dụng một bộ khung. Không phải iFrame. KHUNG.

Kẹt không gian
SPACE JAM, ký tự, tên và tất cả các dấu hiệu liên quan là thương hiệu của Warner Bros. © 1996www.warnerbros.com

Warner Bros có một số bản sao Dreamweaver MX được sử dụng nhẹ nhàng.

Đó là năm 1996. Bây giờ là năm 2019. Thời thế đã thay đổi và người dùng mong đợi nhiều hơn từ các trang web. Họ không chỉ mong đợi chúng trông đẹp mắt, mà còn mong đợi chúng đầy đủ trên các ứng dụng và điều đó bao gồm cả thời gian thực.

Ứng dụng thời gian thực

Các ứng dụng thời gian thực là những ứng dụng phản ứng với những thay đổi ở bất kỳ đâu trong hệ thống của ứng dụng được kết nối—không chỉ những ứng dụng do người dùng hiện tại tạo ra.

Ví dụ kinh điển về thời gian thực là một ứng dụng nhắn tin. Giống như khi bạn gửi cho một nhóm bạn một tin nhắn văn bản về việc cùng nhau chắp cánh vào thứ Sáu. Sau đó, cập nhật từng phút cho mọi người về tiến độ của bạn khi đi từ nơi làm việc đến quán bar. Cảm ơn Trevor. Bây giờ tất cả chúng tôi đang bị mắc kẹt trong một địa ngục thông báo mà chúng tôi đã không đăng ký. TÔI CHỈ MUỐN MỘT SỐ CÁNH.

1*A0RYVB-7SF0sqpvQdVLWXg
Cái gì vậy, Trevor? Bây giờ bạn chỉ còn 10 phút nữa? HÂN HOAN. Mong các chữ số duy nhất.

Khi nói đến web, có một số mẫu, công nghệ, thư viện và dịch vụ khác nhau mà bạn có thể sử dụng để có được chức năng thời gian thực thường dành riêng cho các ứng dụng gốc. Gần đây tôi đã nói chuyện với Anthony Chu, người đã cho tôi 5 cách để bạn có thể xây dựng các ứng dụng thời gian thực bằng JavaScript.

Anthony Chu #MSIgniteTheTour (@nthonyChu) | Twitter
Tweet mới nhất từ ​​Anthony Chu #MSIgniteTheTour (@nthonyChu). Người ủng hộ đám mây @Microsoft. Azure, ASP .NET, Node.js…twitter.com

1. Bỏ phiếu dài

Đây là khi ứng dụng yêu cầu cập nhật từ máy chủ theo lịch trình. Ứng dụng này đang “bỏ phiếu” cho máy chủ.

Đọc thêm  Cách kiểm tra xem thuộc tính có tồn tại trong đối tượng JavaScript không

Đây là mạng tương đương với việc trẻ em hỏi “chúng ta đã đến chưa?” cứ năm phút một lần. Có vẻ như chúng ta đã ở đó chưa, nhóc? Hãy hỏi tôi một lần nữa và tôi thề với bạn rằng tôi sẽ ném bản sao “The Bee Movie” này xuống mương và bạn có thể nhìn chằm chằm ra ngoài cửa sổ trên bãi cỏ như chúng tôi đã làm khi tôi còn nhỏ.

Long-polling có thể được triển khai thủ công với bất kỳ thư viện JavaScript HTTP nào, chẳng hạn như jQuery hoặc Axios. Tôi chưa bao giờ thực sự thực hiện điều này bản thân mình. Khi thực hiện một số nghiên cứu cho bài viết này, tôi phát hiện ra rằng cách tốt nhất để làm điều này là sử dụng một hàm đệ quy với setTimeout. Điều này là do sử dụng setInterval không tính đến các yêu cầu không thành công hoặc hết thời gian chờ. Bạn có thể kết thúc với một loạt lệnh gọi ajax được xử lý không theo thứ tự.

Đây là một ví dụ từ bài viết rất hay trên Tech Octave.

(function poll(){
   setTimeout(function(){
      $.ajax({ url: "server", success: function(data){
        //Update your dashboard gauge
        salesGauge.setValue(data.value);
        //Setup the next poll recursively
        poll();
      }, dataType: "json"});
  }, 30000);
})();

Ngoài ra còn có các thư viện như pollymer (đừng nhầm với Polymer) dành riêng cho long-polling. Hiểu rồi? “thăm dò ý kiến”? Nguyên nhân nó thăm dò ý kiến? Cái này có bật không?

fanout/polyme
Mục đích chung AJAX/thư viện bỏ phiếu dài. Đóng góp cho sự phát triển của fanout/pollymer bằng cách tạo một tài khoản trên GitHub.github.com

Bỏ phiếu dài là tốt vì nó hoạt động trong mọi trình duyệt; kể cả những cái siêu cũ. Thật tệ vì nó siêu kém hiệu quả và không chính xác là “thời gian thực”. Nó cũng có một số trường hợp cạnh kỳ lạ (như lỗi yêu cầu) mà bạn phải lập trình xung quanh như chúng ta đã thấy với setInterval.

Một giải pháp thay thế tốt hơn cho việc bỏ phiếu dài là Sự kiện do máy chủ gửi hoặc SSE.

2. Sự kiện do máy chủ gửi

Server-Sent Events (SSE) tương tự như long-polling khi client yêu cầu server cung cấp thông tin. Sự khác biệt lớn là với SSE, máy chủ chỉ giữ kết nối mở. Khi một sự kiện xảy ra và có thông tin cần gửi cho máy khách, máy chủ sẽ gửi một sự kiện cho máy khách.

Đọc thêm  Đẩy vào một mảng trong JavaScript – Cách chèn một phần tử vào một mảng trong JS

Sự kiện do máy chủ gửi
Theo truyền thống, một trang web phải gửi yêu cầu đến máy chủ để nhận dữ liệu mới; tức là trang yêu cầu dữ liệu từ…nhà phát triển.mozilla.org

Quay lại phép loại suy “chuyến đi từ địa ngục” của chúng ta, điều này sẽ giống như nếu đứa trẻ nói “Chúng ta đã đến nơi chưa?”, rồi kiên nhẫn chờ đợi câu trả lời của bạn. Bốn giờ im lặng tuyệt vời sau đó, bạn đến đích, quay lại và nói “có”. Đó là viễn cảnh phi thực tế nhất mà tôi từng nghĩ ra trong đời.

SSE là một phần của trình duyệt EventSource API. Lưu ý rằng theo caniuse.com, cả IE 11 và Edge đều không hỗ trợ SSE. Điều đó làm cho nó trở thành một công nghệ khó chọn, tuy nhiên nó rất thú vị.

Tin vui là gần như mọi trình duyệt đều hỗ trợ Web Sockets.

3. Ổ cắm web

Web Sockets là công nghệ hỗ trợ kênh giao tiếp hai chiều thực sự giữa máy khách và máy chủ. Không giống như Sự kiện do máy chủ gửi, chỉ là giao tiếp từ máy chủ đến máy khách, Ổ cắm web có thể được sử dụng để giao tiếp theo cả hai hướng.

Web Sockets hơi dài dòng. Chúng thực sự không phải là loại API mà bạn muốn dùng để xây dựng ứng dụng. Kiểu như bạn có thể thực hiện một yêu cầu HTTP với đối tượng XHR, nhưng OMG KHÔNG. Tôi đã tìm kiếm trên Google “PHP Web Socket Sample” và tìm thấy điều này doozy từ các tài liệu PHP. Tôi đã phóng to hết cỡ trong Chrome và hầu như không có mọi thứ trong một ảnh chụp màn hình.

1*b8NjhSqlK84BiLsFDlfRkA

Và đó CHỈ là phần máy chủ. Bạn vẫn phải kết nối trình duyệt.

Vậy….đó là một không cho tôi.

May mắn thay, có rất nhiều thư viện trừu tượng hóa Web Sockets hơn nữa nên bạn không cần phải viết bất kỳ thứ gì trong số này. Một trong những thư viện đó được gọi là “SignalR”.

4. Tín hiệuR

SignalR là một thư viện triển khai Web Sockets cả trong JavaScript VÀ .NET. Trên máy chủ, bạn tạo cái được gọi là “trung tâm” trong SignalR. Trung tâm này gửi và nhận tin nhắn từ khách hàng.

Sau đó, các máy khách sẽ kết nối với trung tâm (sử dụng thư viện JavaScript SignalR) và phản hồi các sự kiện từ trung tâm hoặc gửi các sự kiện của riêng họ vào trung tâm.

Đọc thêm  Cách sử dụng các tính năng ES6 trong React

SignalR cũng quay trở lại chế độ bỏ phiếu dài bất cứ khi nào không có Web Sockets. Mặc dù điều đó không có nhiều khả năng xảy ra trừ khi bạn đang sử dụng IE 9 trở xuống.

Đây là một ví dụ về thiết lập SignalR trên máy chủ…

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

Ừ ừ. Tôi biết đây không phải là một so sánh táo bạo với ví dụ PHP ở trên, nhưng tôi đang cố gắng đưa ra quan điểm ở đây. Chỉ cần đi với nó. Làm nó cho tôi đi. Tôi đang có một buổi sáng khó khăn.

Vì vậy, SignalR làm cho việc lập trình Web Sockets trở nên thú vị hơn, nhưng bạn có biết điều gì thú vị hơn việc lập trình chúng không? Không phải lập trình chúng.

5. Tín hiệu AzureR

Thông thường, khi chúng ta muốn thiết lập các ứng dụng thời gian thực, việc xây dựng một máy chủ Web Socket không hẳn là một hoạt động mang lại giá trị gia tăng. Chúng tôi làm điều đó, nhưng chỉ vì chúng tôi phải có được thời gian thực. Chúng tôi muốn rằng nó “vừa mới hoạt động”.

Azure SignalR chính xác là như vậy. Đó là Trung tâm SignalR mà bạn có thể sử dụng theo yêu cầu như một dịch vụ. Điều đó có nghĩa là bạn chỉ phải gửi và trả lời các sự kiện — đó là điều bạn đang theo đuổi ngay từ đầu.

Azure SignalR là gì
Tổng quan về dịch vụ Azure SignalR.docs.microsoft.com

Bạn tạo Trung tâm SignalR trong Azure dưới dạng Dịch vụ Azure, sau đó bạn chỉ cần kết nối với nó từ máy khách và gửi/nhận tin nhắn.

Và bây giờ bạn đã biết….

Hãy xem cuộc phỏng vấn dưới đây với Anthony. Chúng tôi đã quay bộ phim này ở Vegas khi cả hai chúng tôi đang tham dự một hội nghị và đã có khoảng thời gian vui vẻ với bộ tóc giả mà tôi đã mua ở Party City. 8 đô la tốt nhất tôi từng chi tiêu.

https://www.youtube.com/watch?v=videoseries





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status