MongoDB thời gian thực

Bạn đã bao giờ gặp tình huống muốn cập nhật giao diện người dùng ngay khi có một số thay đổi đối với cơ sở dữ liệu Mongo của mình chưa? . Nếu vậy thì bài viết này là dành cho bạn

Mặc dù việc tiếp theo là sử dụng các cơ sở dữ liệu thời gian thực như firebase hoặc RethinkDB, nhưng bạn thực sự có thể đạt được điều này bằng cách sử dụng MongoDB của mình và nó khá đơn giản. MongoDB có một thứ gọi là

$ mongo
$ rs.initiate[] 

1 cho phép bạn nghe cơ sở dữ liệu của mình

Phương pháp tôi sắp trình bày sử dụng

$ mongo
$ rs.initiate[] 

2 , bạn cũng có thể đạt được điều tương tự bằng cách sử dụng

$ mongo
$ rs.initiate[] 

3 [nhấp vào các liên kết đó để đọc thêm về các bộ sao chép và cụm phân đoạn]

• Vì vậy, bước đầu tiên sẽ là chuyển đổi MongoDB độc lập của bạn thành bộ bản sao. Điều này là do

  $ mongo
  $ rs.initiate[] 

  1 không khả dụng với MongoDB độc lập [Thành thật mà nói, tôi đã định bỏ cuộc khi thấy điều đó, nhưng hãy tin tôi, nó đơn giản thôi]

$ mongod --port 27017 --replSet rs0

Tái bút. Dừng mongo độc lập hiện tại của bạn và sau đó chạy lệnh trên

Lệnh trên bắt đầu phiên bản mongo của bạn dưới dạng

$ mongo
$ rs.initiate[] 

5 có tên là rs0

• Bây giờ với mongo của bạn đang chạy dưới dạng

  $ mongo
  $ rs.initiate[] 

  6 trước khi tạo cơ sở dữ liệu mới, chúng tôi phải bắt đầu bộ sao chép của mình. Để làm như vậy, hãy mở một cửa sổ mới và làm như sau

$ mongo
$ rs.initiate[] 

• Bây giờ hãy đi và tạo cơ sở dữ liệu của chúng tôi. Tôi sử dụng Robo 3T để quản lý cơ sở dữ liệu của mình, bạn có thể tạo nó trong thiết bị đầu cuối bằng cách sử dụng

  $ mongo
  $ rs.initiate[] 

  7. Tôi đang tạo một db có tên là UserDB

Về cơ bản, nó giao tiếp với một API được triển khai trong Node. js lưu các thay đổi vào cơ sở dữ liệu. nút. js cũng nhận những thay đổi này bằng cách sử dụng các luồng thay đổi, phân tích cú pháp và xuất bản chúng lên kênh Pusher để ứng dụng React có thể sử dụng chúng

Đây là sơ đồ mô tả quá trình trên

Tất nhiên, một kịch bản trong đó nhiều ứng dụng đang ghi vào cùng một cơ sở dữ liệu có thể thực tế hơn, nhưng với mục đích học tập, tôi sẽ sử dụng một ứng dụng đơn giản

Ngoài ra, bạn sẽ thấy một giải pháp như thế này có thể là một giải pháp thay thế tốt như thế nào cho khả năng cơ sở dữ liệu thời gian thực của Firebase

điều kiện tiên quyết

Đây là những gì bạn cần cài đặt để làm theo hướng dẫn này

• MongoDB [phiên bản 3. 6 trở lên]
• Nút. js [6 trở lên]
• Tùy chọn, một trình soạn thảo JavaScript

Bạn sẽ cần phải có kiến ​​thức về

• JavaScript [trình độ trung cấp], cụ thể là Node. js và phản ứng
• Các tác vụ quản lý MongoDB cơ bản

Để tham khảo, đây là kho lưu trữ GitHub với tất cả mã được hiển thị trong hướng dẫn này và hướng dẫn để chạy nó

Bây giờ hãy bắt đầu bằng cách tạo một ứng dụng Pusher

Tạo một ứng dụng Pizer

Nếu bạn chưa có, hãy tạo một tài khoản miễn phí tại Pizer

Sau đó, truy cập bảng điều khiển của bạn và tạo ứng dụng Kênh, chọn tên, cụm gần vị trí của bạn nhất và tùy chọn, Phản ứng với tư cách là công nghệ giao diện người dùng và Nút. js là công nghệ phụ trợ

Điều này sẽ cung cấp cho bạn một số mã mẫu để bắt đầu

Lưu các giá trị id, khóa, bí mật và cụm ứng dụng của bạn. Chúng ta sẽ cần chúng sau

Định cấu hình MongoDB

Vì các luồng thay đổi sử dụng nhật ký hoạt động của MongoDB và oplog được sử dụng để hỗ trợ các tính năng sao chép của cơ sở dữ liệu này, nên bạn chỉ có thể sử dụng các luồng thay đổi với bộ bản sao hoặc cụm phân đoạn

Việc sử dụng các bộ bản sao sẽ dễ dàng hơn, vì vậy hãy đi theo cách đó

Bộ bản sao là một nhóm gồm 175 quy trình duy trì cùng một bộ dữ liệu. Tuy nhiên, bạn có thể tạo một bộ bản sao chỉ với một máy chủ, chỉ cần thực hiện lệnh này

$ mongo
$ rs.initiate[] 

8

Hãy nhớ rằng nếu bạn không sử dụng thư mục dữ liệu mặc định [

$ mongo
$ rs.initiate[] 

76 hoặc

$ mongo
$ rs.initiate[] 

77], hãy chỉ định đường dẫn đến thư mục dữ liệu bằng tùy chọn

$ mongo
$ rs.initiate[] 

78

$ mongo
$ rs.initiate[] 

2

Tiếp theo, trong một cửa sổ đầu cuối riêng biệt, chạy

$ mongo
$ rs.initiate[] 

79, ứng dụng khách MongoDB

Nếu đây là lần đầu tiên bạn tạo một bộ bản sao, hãy thực thi

$ mongo
$ rs.initiate[] 

40

$ mongo
$ rs.initiate[] 

5

Ứng dụng sẽ xem bộ sưu tập

$ mongo
$ rs.initiate[] 

41 trong cơ sở dữ liệu có tên là

$ mongo
$ rs.initiate[] 

42

Thông thường, cơ sở dữ liệu và bộ sưu tập được tạo bởi trình điều khiển MongoDB khi ứng dụng thực hiện thao tác đầu tiên trên chúng, nhưng đối với luồng thay đổi, chúng phải tồn tại trước khi mở luồng

Vì vậy, khi bạn đang ở

$ mongo
$ rs.initiate[] 

79 , hãy tạo cơ sở dữ liệu và bộ sưu tập bằng các lệnh

$ mongo
$ rs.initiate[] 

44 và

$ mongo
$ rs.initiate[] 

45, như thế này

$ mongo
$ rs.initiate[] 

7

Bây giờ bạn đã sẵn sàng để bắt đầu xây dựng ứng dụng

Hãy bắt đầu với Nút. máy chủ js

Xây dựng nút. máy chủ js

Tạo một thư mục mới và trong một cửa sổ đầu cuối, bên trong thư mục đó, khởi tạo một Nút. dự án js bằng lệnh

$ mongo
$ rs.initiate[] 

4

Tiếp theo, cài đặt các phụ thuộc mà ứng dụng sẽ sử dụng

$ mongo
$ rs.initiate[] 

3

• body-parser là một phần mềm trung gian để phân tích cú pháp phần thân của yêu cầu
• express để tạo máy chủ web cho API REST mà ứng dụng React sẽ sử dụng
• mongoose là một thư viện dựa trên lược đồ để làm việc với MongoDB
• đẩy để xuất bản các thay đổi cơ sở dữ liệu trong thời gian thực

Bây giờ, điều đầu tiên chúng ta sẽ làm là tạo một lược đồ cho bộ sưu tập tác vụ. Tạo tệp

$ mongo
$ rs.initiate[] 

46 và sao chép đoạn mã sau

$ mongo
$ rs.initiate[] 

5

Như bạn có thể thấy, bộ sưu tập sẽ chỉ lưu trữ tác vụ dưới dạng văn bản

Tiếp theo, tạo tệp

$ mongo
$ rs.initiate[] 

47 và yêu cầu lược đồ tác vụ và Express để tạo bộ định tuyến

$ mongo
$ rs.initiate[] 

7

Tạo một điểm cuối

$ mongo
$ rs.initiate[] 

48 với đường dẫn

$ mongo
$ rs.initiate[] 

49 để lưu tác vụ

$ mongo
$ rs.initiate[] 

0

Và một số khác để xóa tác vụ, chuyển ID của tác vụ bằng phương pháp

$ mongo
$ rs.initiate[] 

30

$ mongo
$ rs.initiate[] 

2

Bây giờ, trong thư mục gốc, hãy tạo tệp

$ mongo
$ rs.initiate[] 

31 và yêu cầu các mô-đun sau

$ mongo
$ rs.initiate[] 

20

Định cấu hình đối tượng Pusher nhập thông tin ứng dụng của bạn

$ mongo
$ rs.initiate[] 

21

Và định cấu hình máy chủ Express với các tiêu đề CORS [vì ứng dụng React sẽ được xuất bản ở một cổng khác], các yêu cầu JSON và

$ mongo
$ rs.initiate[] 

32 làm đường dẫn

$ mongo
$ rs.initiate[] 

22

Bằng cách này, bạn có thể kết nối với cơ sở dữ liệu thông qua tên của bộ bản sao mà bạn đã định cấu hình trước đó

$ mongo
$ rs.initiate[] 

23

Và đặt hai cuộc gọi lại, một cho lỗi kết nối và một cuộc gọi khác nếu kết nối thành công

$ mongo
$ rs.initiate[] 

24

Nếu kết nối thành công, hãy bắt đầu lắng nghe các kết nối trên cổng 9000 và theo dõi các thay đổi trên bộ sưu tập

$ mongo
$ rs.initiate[] 

41

$ mongo
$ rs.initiate[] 

25

Đây là phần thú vị

Khi có thay đổi trong bộ sưu tập, một sự kiện thay đổi được nhận. Đặc biệt, những thay đổi sau đây được hỗ trợ

• Chèn
• Cập nhật
• Thay thế
• Xóa bỏ
• vô hiệu hóa

Đây là một ví dụ về sự kiện chèn

$ mongo
$ rs.initiate[] 

26

Nói cách khác, bạn có thể sử dụng thuộc tính

$ mongo
$ rs.initiate[] 

34 để bắt đầu nhận các sự kiện từ hoạt động được đại diện bởi thuộc tính đó

Đây là một ví dụ về sự kiện xóa

$ mongo
$ rs.initiate[] 

27

Lưu ý rằng trong trường hợp này, đối tượng đã xóa không được trả lại, chỉ có ID của nó trong thuộc tính

$ mongo
$ rs.initiate[] 

35

Bạn có thể tìm hiểu thêm về các sự kiện thay đổi này tại đây

Với thông tin này, quay lại

$ mongo
$ rs.initiate[] 

31, bạn có thể trích xuất dữ liệu liên quan từ đối tượng và xuất bản nó lên Pusher theo cách sau

$ mongo
$ rs.initiate[] 

28

Và đó là mã cho máy chủ. Bây giờ hãy xây dựng ứng dụng React

Xây dựng ứng dụng React

Hãy sử dụng ứng dụng tạo phản ứng để khởi động ứng dụng React

Trong một thư mục khác, thực hiện lệnh sau trong cửa sổ đầu cuối để tạo ứng dụng mới

$ mongo
$ rs.initiate[] 

29

Bây giờ hãy vào thư mục ứng dụng và cài đặt tất cả phụ thuộc Pizer với

$ mongo
$ rs.initiate[] 

37

$ mongo
$ rs.initiate[] 

50

Mở tệp

$ mongo
$ rs.initiate[] 

38 và thay thế nội dung của tệp bằng các kiểu CSS sau

$ mongo
$ rs.initiate[] 

51

Tiếp theo, mở tệp

$ mongo
$ rs.initiate[] 

39 và ở trên cùng, nhập thư viện Pusher

$ mongo
$ rs.initiate[] 

52

Xác định hằng số cho URL API

$ mongo
$ rs.initiate[] 

53

Trong hàm tạo của lớp, xác định một mảng cho các tác vụ và một thuộc tính cho văn bản của tác vụ dưới dạng trạng thái và liên kết các phương thức để cập nhật văn bản cũng như thêm và xóa các tác vụ

$ mongo
$ rs.initiate[] 

54

Hãy xem xét từng phương pháp. Thêm chúng sau hàm tạo, trước phương thức

$ mongo
$ rs.initiate[] 

50

Phương thức

$ mongo
$ rs.initiate[] 

51 sẽ cập nhật trạng thái mỗi khi văn bản đầu vào cho tác vụ thay đổi

$ mongo
$ rs.initiate[] 

55

Phương thức

$ mongo
$ rs.initiate[] 

52 sẽ đăng lên tác vụ do người dùng nhập vào API

$ mongo
$ rs.initiate[] 

56

Và phương thức

$ mongo
$ rs.initiate[] 

53 sẽ gọi API để xóa một tác vụ bằng ID của nó

$ mongo
$ rs.initiate[] 

57

Mặt khác, bạn cũng sẽ cần các phương thức để thêm và xóa một tác vụ khỏi trạng thái để các thay đổi có thể được phản ánh trong giao diện người dùng. Đó là công việc của các phương thức

$ mongo
$ rs.initiate[] 

54 và

$ mongo
$ rs.initiate[] 

55

$ mongo
$ rs.initiate[] 

58

Ứng dụng sẽ gọi các phương thức này khi nhận được sự kiện tương ứng từ Pusher

Bạn có thể thiết lập Pusher và liên kết các phương thức này với các sự kiện

$ mongo
$ rs.initiate[] 

56 và

$ mongo
$ rs.initiate[] 

57 trong phương thức

$ mongo
$ rs.initiate[] 

58, nhập cụm và khóa ứng dụng Pusher của bạn

$ mongo
$ rs.initiate[] 

59

Bằng cách này, phương thức

$ mongo
$ rs.initiate[] 

59 chỉ hiển thị các tác vụ từ trạng thái bằng cách sử dụng thành phần

$ mongo
$ rs.initiate[] 

70 và một biểu mẫu để nhập các tác vụ mới

Thay thế phương thức

$ mongo
$ rs.initiate[] 

50 bằng phương thức sau

$ mongo
$ rs.initiate[] 

70

Và mã của thành phần

$ mongo
$ rs.initiate[] 

70 [bạn có thể đặt sau lớp

$ mongo
$ rs.initiate[] 

73]

$ mongo
$ rs.initiate[] 

71

Và đó là nó. Hãy kiểm tra ứng dụng hoàn chỉnh

Kiểm thử ứng dụng

Đảm bảo cơ sở dữ liệu MongoDB đang chạy với bộ bản sao được định cấu hình trên máy chủ

$ mongo
$ rs.initiate[] 

2

Trong một cửa sổ đầu cuối, hãy chuyển đến thư mục chứa Nút. máy chủ js cư trú và thực thi

$ mongo
$ rs.initiate[] 

73

Đối với ứng dụng React, bên trong thư mục ứng dụng, hãy thực thi

$ mongo
$ rs.initiate[] 

74

Một cửa sổ trình duyệt sẽ mở http. //máy chủ cục bộ. 3000/, và từ đó, bạn có thể bắt đầu nhập và xóa các tác vụ

Bạn cũng có thể thấy trong đầu ra của Node. js cách nhận các sự kiện thay đổi từ MongoDB

Hoặc trên bảng điều khiển của Pusher, hãy chọn ứng dụng của bạn và trong phần Gỡ lỗi, bạn sẽ thấy các tin nhắn được nhận như thế nào

Phần kết luận

Trong hướng dẫn này, bạn đã học cách duy trì dữ liệu trong MongoDB và truyền các thay đổi trong thời gian thực bằng cách sử dụng các luồng thay đổi và các kênh Pizer

Điều này tương đương với chức năng được cung cấp bởi Firebase và cơ sở dữ liệu thời gian thực của nó. Ưu điểm là một giải pháp như giải pháp được trình bày trong hướng dẫn này linh hoạt hơn và cho phép bạn kiểm soát nhiều hơn

Từ đây, ứng dụng có thể được mở rộng theo nhiều cách, chẳng hạn

• Hỗ trợ cho nhiều bộ sưu tập hơn
• Triển khai chức năng cập nhật cho các tác vụ [ví dụ: trạng thái] và sao chép sự kiện này
• Sử dụng mã thông báo tiếp tục để nhận các sự kiện từ lần đăng ký cuối cùng, sau khi kết nối bị lỗi

Hãy nhớ rằng trong kho lưu trữ GitHub này, bạn có thể tìm thấy mã của Nút. máy chủ js và ứng dụng React

MongoDB có thật không

Làm cách nào để lấy dữ liệu Thời gian thực từ MongoDB?

MongoDB Atlas có thật không

MongoDB có tốt cho dữ liệu chuỗi thời gian không?