JavaScript lấy dữ liệu thời gian thực

Cập nhật mọi thông tin được công bố tại Hội nghị thượng đỉnh Firebase và tìm hiểu cách Firebase có thể giúp bạn đẩy nhanh quá trình phát triển ứng dụng và tự tin chạy ứng dụng của mình. Tìm hiểu thêm

  • căn cứ hỏa lực
  • Tài liệu
  • Cơ sở dữ liệu thời gian thực
  • Xây dựng

Gửi phản hồi Sắp xếp ngăn nắp với các bộ sưu tập Lưu và phân loại nội dung dựa trên sở thích của bạn

Cơ sở dữ liệu thời gian thực Firebase

plat_ios plat_android plat_web plat_flutter plat_cpp plat_unity

Lưu trữ và đồng bộ hóa dữ liệu với cơ sở dữ liệu đám mây NoSQL của chúng tôi. Dữ liệu được đồng bộ hóa trên tất cả các ứng dụng trong thời gian thực và vẫn khả dụng khi ứng dụng của bạn ngoại tuyến

Cơ sở dữ liệu thời gian thực Firebase là cơ sở dữ liệu được lưu trữ trên đám mây. Dữ liệu được lưu trữ dưới dạng JSON và được đồng bộ hóa trong thời gian thực tới mọi máy khách được kết nối. Khi bạn xây dựng ứng dụng đa nền tảng với nền tảng Apple, Android và SDK JavaScript của chúng tôi, tất cả khách hàng của bạn chia sẻ một phiên bản Cơ sở dữ liệu thời gian thực và tự động nhận các bản cập nhật với dữ liệu mới nhất

iOS+ Thiết lập Android Thiết lập Flutter

API REST thiết lập web

Thiết lập C++ Thiết lập Unity

thiết lập quản trị

khả năng chính

Thời gian thựcThay vì các yêu cầu HTTP điển hình, Cơ sở dữ liệu thời gian thực Firebase sử dụng đồng bộ hóa dữ liệu—mỗi khi dữ liệu thay đổi, mọi thiết bị được kết nối sẽ nhận được bản cập nhật đó trong vòng một phần nghìn giây. Cung cấp trải nghiệm hợp tác và nhập vai mà không cần suy nghĩ về mã mạng. Các ứng dụng OfflineFirebase vẫn phản hồi ngay cả khi ngoại tuyến vì SDK cơ sở dữ liệu thời gian thực của Firebase lưu dữ liệu của bạn vào đĩa. Sau khi kết nối được thiết lập lại, thiết bị khách sẽ nhận được bất kỳ thay đổi nào mà thiết bị đã bỏ lỡ, đồng bộ hóa thiết bị với trạng thái máy chủ hiện tại. Có thể truy cập từ thiết bị khách Cơ sở dữ liệu thời gian thực Firebase có thể được truy cập trực tiếp từ thiết bị di động hoặc trình duyệt web; . Bảo mật và xác thực dữ liệu có sẵn thông qua Quy tắc bảo mật cơ sở dữ liệu thời gian thực của Firebase, quy tắc dựa trên biểu thức được thực thi khi dữ liệu được đọc hoặc ghi. Mở rộng quy mô trên nhiều cơ sở dữ liệu Với Cơ sở dữ liệu thời gian thực Firebase trong gói giá Blaze, bạn có thể hỗ trợ nhu cầu dữ liệu của ứng dụng trên quy mô lớn bằng cách chia dữ liệu của bạn trên nhiều phiên bản cơ sở dữ liệu trong cùng một dự án Firebase. Hợp lý hóa xác thực với Xác thực Firebase trên dự án của bạn và xác thực người dùng trên các phiên bản cơ sở dữ liệu của bạn. Kiểm soát quyền truy cập vào dữ liệu trong từng cơ sở dữ liệu với Quy tắc cơ sở dữ liệu thời gian thực Firebase tùy chỉnh cho từng phiên bản cơ sở dữ liệu

Làm thế nào nó hoạt động?

Cơ sở dữ liệu thời gian thực Firebase cho phép bạn xây dựng các ứng dụng hợp tác, phong phú bằng cách cho phép truy cập an toàn vào cơ sở dữ liệu trực tiếp từ mã phía máy khách. Dữ liệu được duy trì cục bộ và ngay cả khi ngoại tuyến, các sự kiện thời gian thực vẫn tiếp tục kích hoạt, mang đến cho người dùng cuối trải nghiệm phản hồi nhanh. Khi thiết bị lấy lại kết nối, Cơ sở dữ liệu thời gian thực sẽ đồng bộ hóa các thay đổi dữ liệu cục bộ với các bản cập nhật từ xa xảy ra khi máy khách ngoại tuyến, tự động hợp nhất mọi xung đột

Cơ sở dữ liệu thời gian thực cung cấp ngôn ngữ quy tắc linh hoạt, dựa trên biểu thức, được gọi là Quy tắc bảo mật cơ sở dữ liệu thời gian thực Firebase, để xác định cách cấu trúc dữ liệu của bạn và thời điểm dữ liệu có thể được đọc hoặc ghi vào. Khi được tích hợp với Xác thực Firebase, nhà phát triển có thể xác định ai có quyền truy cập vào dữ liệu nào và cách họ có thể truy cập dữ liệu đó

Cơ sở dữ liệu thời gian thực là cơ sở dữ liệu NoSQL và do đó có các tối ưu hóa và chức năng khác so với cơ sở dữ liệu quan hệ. API cơ sở dữ liệu thời gian thực được thiết kế để chỉ cho phép các hoạt động có thể được thực thi nhanh chóng. Điều này cho phép bạn xây dựng trải nghiệm thời gian thực tuyệt vời có thể phục vụ hàng triệu người dùng mà không ảnh hưởng đến khả năng phản hồi. Do đó, điều quan trọng là phải suy nghĩ về cách người dùng cần truy cập dữ liệu của bạn và sau đó cấu trúc dữ liệu đó cho phù hợp

Trong nhiều ứng dụng hiện nay, bạn muốn dữ liệu được hiển thị theo thời gian thực. Cho dù cảm biến IoT báo cáo giá trị, giá trị chứng khoán mà bạn muốn theo dõi hay ứng dụng trò chuyện, bạn sẽ muốn dữ liệu tự động cập nhật giao diện người dùng của mình. Điều này có thể thực hiện được bằng MongoDB Change Streams với Realm Web SDK

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng Realm Web SDK để hiển thị các thay đổi trong bộ sưu tập khi chúng xảy ra

Để làm theo hướng dẫn này, bạn sẽ cần một cụm Atlas. Bậc miễn phí sẽ là quá đủ cho nhu cầu của hướng dẫn này. Nếu chưa có, bạn có thể tìm hướng dẫn cách tạo cụm trong tài liệu

Khi bạn có một cụm, hãy tạo cơ sở dữ liệu mới có tên là data, với bộ sưu tập changestream

Bạn cũng sẽ cần một ứng dụng từ Dịch vụ ứng dụng. Bạn cũng có thể tìm thấy hướng dẫn tạo ứng dụng mới trong tài liệu. Làm theo hướng dẫn để tạo ứng dụng mới không có mẫu

Ứng dụng này sẽ hiển thị bất kỳ thao tác nào được thực hiện trên một bộ sưu tập cụ thể. Để làm như vậy, chúng tôi sẽ cần định cấu hình các quy tắc về người có quyền truy cập vào dữ liệu [mọi người] và cách người dùng sẽ xác thực [ẩn danh]

Bạn sẽ cần ID ứng dụng của mình khi bắt đầu xây dựng ứng dụng của mình. Khi bạn mở ứng dụng lần đầu tiên [hoặc bằng cách nhấp vào mục thanh điều hướng có tên ứng dụng của bạn], bạn sẽ thấy trang chủ có thông tin về ứng dụng này. Ngay trên đầu, bạn sẽ thấy một trường có nhãn "App ID. "Đây là id ứng dụng của bạn.  

Bạn có thể sao chép và dán nó vào đâu đó hoặc chỉ cần quay lại màn hình này sau khi bạn cần

Từ menu điều hướng bên trái trong Dịch vụ ứng dụng Atlas, hãy tìm mục "Quy tắc". Thao tác này sẽ liệt kê tất cả cơ sở dữ liệu và bộ sưu tập của bạn trong cụm được liên kết với ứng dụng này. Chọn cơ sở dữ liệu data và bộ sưu tập changestream. Bạn sẽ được nhắc tạo vai trò mới cho bộ sưu tập này

Sử dụng giá trị đặt trước readAll, sau đó nhấp vào nút "Thêm vai trò đặt trước". Thao tác này sẽ tạo một vai trò mới có toàn quyền truy cập đọc dữ liệu trong bộ sưu tập này. Nếu bạn muốn tạo một vai trò chỉ có quyền truy cập vào dữ liệu do người dùng sở hữu, điều này có thể được thực hiện với một vai trò tùy chỉnh tại đây

Đối với ứng dụng này, chúng tôi sẽ không yêu cầu xác thực, điều đó có nghĩa là bất kỳ khách truy cập nào vào trang web này sẽ có quyền truy cập vào tất cả dữ liệu. Trong trường hợp của chúng tôi, đây là những gì chúng tôi muốn, nhưng trong ứng dụng sản xuất, bạn có thể muốn định cấu hình nhà cung cấp xác thực thực

Trong thanh điều hướng bên trái, nhấp vào mục "Xác thực". Trong bảng hiển thị, hãy tìm hàng "Cho phép người dùng đăng nhập ẩn danh"

Nhấp vào nút "Chỉnh sửa". Trên màn hình tiếp theo, hãy bật nút "Đã bật nhà cung cấp" để bật. Sau khi bạn nhấp vào nút Lưu, hãy quay lại trang nhà cung cấp xác thực và đảm bảo rằng nó đã được bật

Đó là tất cả những gì bạn cần trong Giao diện người dùng dịch vụ ứng dụng Atlas ngay bây giờ. Tìm thanh màu xanh ở đầu màn hình

Nhấp vào nút "Xem lại bản nháp & triển khai" và chấp nhận các thay đổi

Ứng dụng của bạn hiện đã sẵn sàng để sử dụng

Chúng ta sẽ bắt đầu với một ứng dụng React trống được tạo bằng công cụ create-react-app cho ứng dụng này

Trong thiết bị đầu cuối của bạn, hãy chạy lệnh sau

Tiếp theo, cài đặt thư viện cần thiết để sử dụng Realm Web SDK và khởi động ứng dụng

Điều này sẽ mở ra một cửa sổ trình duyệt với ứng dụng đang chạy trong đó. Với trình chỉnh sửa mã yêu thích của bạn, hãy mở mã nguồn của ứng dụng này và tìm Ứng dụng. tập tin js

Bạn sẽ thay thế toàn bộ nội dung của tệp này để có thể tiếp tục và xóa mọi thứ ở đó

Bây giờ, hãy bắt đầu với mã soạn sẵn này cho Ứng dụng của bạn. tập tin js

Dưới phần bình luận Tạo ứng dụng, nhập thông tin sau

Điều này sẽ khởi tạo ứng dụng Atlas của bạn. Đừng quên thay đổi id thành mã định danh cho ứng dụng của bạn

Tiếp theo, chúng ta sẽ cần hai biến trạng thái. Cái đầu tiên —user— sẽ chứa đối tượng người dùng được tạo bởi Realm SDK sau khi được xác thực. Cái thứ hai —events— sẽ chứa bất kỳ sự kiện mới nào từ cơ sở dữ liệu. Những sự kiện đó sẽ là các thao tác [tạo, cập nhật hoặc xóa] được thực hiện trên cơ sở dữ liệu, cùng với _id của tài liệu và toàn bộ tài liệu

Thêm đoạn mã sau vào sau nhận xét Đặt biến trạng thái

Tiếp theo là hàm useEffect. Tại đây, bạn sẽ tạo một hàm có tên là changestream0 sẽ xác thực ẩn danh cho ứng dụng. Sau đó, nó sẽ cập nhật đối tượng người dùng ở trạng thái

Cuối cùng, thay đổi mã JSX để hiển thị bảng có các sự kiện

Đó là tất cả những gì bạn cần cho ứng dụng của mình. Nếu bạn nhìn vào trình duyệt của mình, bạn sẽ thấy ứng dụng đang chạy

Trong giao diện người dùng Atlas, hãy tiếp tục và tạo, chỉnh sửa hoặc xóa các mục khỏi bộ sưu tập dòng thay đổi. Khi thực hiện các thao tác đó, bạn sẽ thấy ứng dụng web mới của mình hiển thị từng thao tác đó trong thời gian thực khi chúng diễn ra

Ghi chú. Khi chạy ứng dụng này, bạn có thể nhận thấy rằng một số sự kiện bị trùng lặp. Điều này là do Phản ứng. Công cụ StrictMode thực hiện lần thứ hai trên mã của bạn để thông báo cho bạn về bất kỳ lỗi nào. Điều này chỉ xảy ra trong quá trình sản xuất và sẽ không xảy ra nếu bạn chạy changestream1

Còn JavaScript vanilla thì sao?

Ứng dụng tương tự có thể được viết lại bằng JavaScript cũ dưới 50 dòng. Sự khác biệt chính với ứng dụng React là changestream2 được tải thông qua thẻ script và mã để tạo bảng không sử dụng JSX

Luồng thay đổi là một tính năng rất mạnh trong MongoDB. Chúng cho phép bạn tạo các ứng dụng hiển thị và phản ứng với thông tin trong thời gian thực mà không cần back-end

Nếu bạn muốn thử thách thêm một chút, bạn có thể xây dựng một ứng dụng trò chuyện bằng cách sử dụng Change Streams không?

Làm cách nào để có được thời gian thực trong JavaScript?

Cách lấy ngày và giờ hiện tại bằng JavaScript? .
var hiện tại = ngày mới[];
bảng điều khiển. nhật ký [hiện tại]
hiện hành. getFullYear[];
hiện hành. getMonth[];
hiện hành. getMonth[] + 1;
hiện hành. hẹn gặp[];
hiện hành. getHours[];
hiện hành. getMinutes[];

Tôi có thể lấy dữ liệu từ cơ sở dữ liệu bằng JavaScript không?

Tiếp cận. Trước tiên hãy tạo tệp JavaScript, tệp HTML và tệp CSS cần thiết. Sau đó lưu trữ URL API trong một biến [ở đây api_url]. Xác định hàm async [ở đây getapi[]] và chuyển api_url vào hàm đó. Xác định một phản hồi liên tục và lưu trữ dữ liệu đã tìm nạp bằng phương thức chờ tìm nạp []

Làm thế nào để thực sự

Giao diện lập trình ứng dụng thời gian thực [API] là dịch vụ cho phép người dùng tự động lấy thông tin theo thời gian thực từ một hoặc nhiều tài nguyên dữ liệu. The API can be embedded in a software application or added to a website.

Làm cách nào để cập nhật dữ liệu trong JavaScript?

Cập nhật tất cả Giá trị trong Đối tượng trong JavaScript # .
Sử dụng đối tượng. keys[] để lấy một mảng các khóa của đối tượng
Lặp lại mảng bằng phương thức forEach[] và cập nhật từng giá trị
Sau lần lặp cuối cùng, tất cả các giá trị trong đối tượng sẽ được cập nhật

Chủ Đề