Trang này được dịch bởi Cloud Translation API.

Lớp học lập trình: Xây dựng máy chủ thông báo đẩy

Kate Jeffreys

Kayce Basques

Lớp học lập trình này sẽ hướng dẫn bạn từng bước xây dựng máy chủ thông báo đẩy. Khi kết thúc lớp học lập trình, bạn sẽ có một máy chủ:

Theo dõi các gói thuê bao thông báo đẩy (tức là máy chủ tạo bản ghi cơ sở dữ liệu mới khi ứng dụng chọn nhận thông báo đẩy, đồng thời xoá bản ghi cơ sở dữ liệu hiện có khi ứng dụng chọn không nhận thông báo)
Gửi thông báo đẩy đến một ứng dụng khách
Gửi thông báo đẩy cho tất cả khách hàng đã đăng ký

Lớp học lập trình này tập trung vào việc giúp bạn học hỏi bằng cách thực hiện và không nói nhiều về các khái niệm. Hãy xem bài viết Thông báo đẩy hoạt động như thế nào? để tìm hiểu các khái niệm về thông báo đẩy.

Mã ứng dụng khách của lớp học lập trình này đã hoàn tất. Bạn sẽ chỉ triển khai máy chủ trong lớp học lập trình này. Để tìm hiểu cách triển khai ứng dụng thông báo đẩy, hãy xem Lớp học lập trình: Tạo ứng dụng thông báo đẩy.

Hãy tham khảo push-notifications-server-codelab-complete (nguồn) để xem mã đầy đủ.

Khả năng tương thích với trình duyệt

Lớp học lập trình này hoạt động với các tổ hợp hệ điều hành và trình duyệt sau đây:

Windows: Chrome, Edge
macOS: Chrome, Firefox
Android: Chrome, Firefox

Lớp học lập trình này được xác định là không hoạt động với các hệ điều hành sau đây (hoặc các tổ hợp hệ điều hành và trình duyệt):

macOS: Brave, Edge, Safari
iOS

Ngăn xếp ứng dụng

Máy chủ được xây dựng dựa trên Express.js.
Thư viện Node.js web-push xử lý tất cả logic thông báo đẩy.
Dữ liệu gói thuê bao được ghi vào tệp JSON bằng lowdb.

Bạn không phải sử dụng bất kỳ công nghệ nào trong số này để triển khai thông báo đẩy. Chúng tôi chọn các công nghệ này vì chúng mang lại một trải nghiệm đáng tin cậy cho lớp học lập trình.

Thiết lập

Nhận bản sao có thể chỉnh sửa của mã

Trình soạn thảo mã mà bạn thấy ở bên phải các hướng dẫn này sẽ được gọi là Giao diện người dùng gặp lỗi trong suốt lớp học lập trình này.

Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.

Thiết lập tính năng xác thực

Trước khi có thể làm cho thông báo đẩy hoạt động, bạn cần thiết lập máy chủ và ứng dụng khách bằng các khoá xác thực. Hãy xem bài viết Ký yêu cầu giao thức đẩy web để tìm hiểu lý do.

Mở cửa sổ dòng lệnh Glitch bằng cách nhấp vào Tools (Công cụ), sau đó nhấp vào Terminal.
Trong cửa sổ dòng lệnh, hãy chạy npx web-push generate-vapid-keys. Sao chép khoá riêng tư và các giá trị khoá công khai.
Mở .env rồi cập nhật VAPID_PUBLIC_KEY và VAPID_PRIVATE_KEY. Đặt VAPID_SUBJECT thành mailto:test@test.test. Bạn nên đặt tất cả các giá trị này trong dấu ngoặc kép. Sau khi cập nhật, tệp .env sẽ có dạng như sau:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Đóng cửa sổ dòng lệnh nhiễu.

Các giá trị biến môi trường (nội dung trong .env) là duy nhất đối với một dự án nhiễu. Nếu bạn phối lại dự án, các giá trị trong .env sẽ không được sao chép sang.

Mở public/index.js.
Thay thế VAPID_PUBLIC_KEY_VALUE_HERE bằng giá trị của khoá công khai.

Quản lý gói thuê bao

Khách hàng của bạn xử lý hầu hết quy trình đăng ký. Việc chính mà máy chủ của bạn cần làm là lưu các gói thuê bao thông báo đẩy mới và xoá các gói thuê bao cũ. Các gói thuê bao này cho phép bạn đẩy thông báo đến khách hàng trong tương lai. Xem phần Đăng ký cho khách hàng nhận thông báo đẩy để biết thêm thông tin về quy trình đăng ký.

Lưu thông tin về gói thuê bao mới

Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào Toàn màn hình .

Nhấp vào Đăng ký trình chạy dịch vụ trong thẻ ứng dụng. Trong hộp trạng thái, bạn sẽ thấy một thông báo tương tự như sau:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

Trong thẻ ứng dụng, hãy nhấp vào Đăng ký để đẩy. Trình duyệt hoặc hệ điều hành của bạn có thể sẽ hỏi xem bạn có muốn cho phép trang web gửi thông báo đẩy cho bạn hay không. Nhấp vào Cho phép (hoặc bất kỳ cụm từ tương đương nào mà trình duyệt/hệ điều hành của bạn sử dụng). Trong hộp trạng thái, bạn sẽ thấy một thông báo tương tự như sau:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Lưu ý: URL điểm cuối thay đổi tuỳ thuộc vào trình duyệt bạn đang dùng. Ví dụ: trên Firefox, URL bắt đầu bằng https://updates.push.services.mozilla.com/….

Quay lại mã của bạn bằng cách nhấp vào Xem nguồn trong giao diện người dùng Glitch.
Mở Nhật ký sự cố bằng cách nhấp vào Công cụ, sau đó nhấp vào Nhật ký. Bạn sẽ thấy /add-subscription theo sau là một số dữ liệu. /add-subscription là URL mà ứng dụng gửi yêu cầu POST đến khi muốn đăng ký nhận thông báo đẩy. Dữ liệu theo sau là thông tin gói thuê bao của ứng dụng mà bạn cần lưu.
Mở server.js.
Cập nhật logic của trình xử lý định tuyến /add-subscription bằng đoạn mã sau:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Lưu ý: Cơ sở dữ liệu ghi vào .data/db.json. Để kiểm tra tệp này trong Glitch, hãy nhấp vào Tools (Công cụ), sau đó nhấp vào Terminal (Thiết bị đầu cuối), sau đó chạy cat .data/db.json trong Terminal. .data/db.json sẽ bị xoá mỗi khi bạn chỉnh sửa ứng dụng. Nguyên nhân là do Glitch chạy tập lệnh start trong package.json mỗi khi bạn chỉnh sửa ứng dụng và tập lệnh đó bao gồm cả lệnh gọi đến rm .data/db.json.

Xoá thông tin gói thuê bao cũ

Quay lại thẻ ứng dụng.
Nhấp vào Huỷ đăng ký nhận thông báo đẩy.
Hãy xem lại Nhật ký sự cố. Bạn sẽ thấy /remove-subscription, theo sau là thông tin gói thuê bao của ứng dụng.
Cập nhật logic của trình xử lý định tuyến /remove-subscription bằng đoạn mã sau:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Gửi thông báo

Như đã giải thích trong bài viết Gửi thông báo đẩy, máy chủ của bạn không thực sự gửi thông báo đẩy trực tiếp đến máy khách. Thay vào đó, hệ thống dựa vào một dịch vụ đẩy để thực hiện việc đó. Về cơ bản, máy chủ của bạn chỉ bắt đầu quá trình gửi thông báo cho máy khách bằng cách đưa ra các yêu cầu dịch vụ web (yêu cầu giao thức đẩy web) đến một dịch vụ web (dịch vụ đẩy) do nhà cung cấp trình duyệt mà người dùng sử dụng sở hữu.

Cập nhật logic của trình xử lý định tuyến /notify-me bằng đoạn mã sau:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

Cập nhật hàm sendNotifications() bằng đoạn mã sau:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

Cập nhật logic của trình xử lý định tuyến /notify-all bằng đoạn mã sau:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

Quay lại thẻ ứng dụng.
Nhấp vào Huỷ đăng ký nhận thông báo đẩy rồi nhấp vào Đăng ký nhận thông báo đẩy một lần nữa. Điều này chỉ cần thiết vì, như đã đề cập trước đó, Glitch sẽ khởi động lại dự án mỗi khi bạn chỉnh sửa mã và dự án được định cấu hình để xoá cơ sở dữ liệu khi khởi động.
Nhấp vào Thông báo cho tôi. Bạn sẽ nhận được một thông báo đẩy. Tiêu đề phải là Hello, Notifications! và phần nội dung phải là ID: <ID>, trong đó <ID> là một số ngẫu nhiên.
Hãy mở ứng dụng của bạn trên các trình duyệt hoặc thiết bị khác rồi thử đăng ký chúng để nhận thông báo đẩy, sau đó nhấp vào nút Notify all (Thông báo cho tất cả). Bạn sẽ nhận được cùng một thông báo trên tất cả các thiết bị đã đăng ký (tức là mã nhận dạng trong phần nội dung của thông báo đẩy phải giống nhau).

Các bước tiếp theo

Đọc bài viết Tổng quan về thông báo đẩy để tìm hiểu sâu hơn về khái niệm của thông báo đẩy.
Hãy xem Lớp học lập trình: Xây dựng ứng dụng thông báo đẩy để tìm hiểu cách tạo một ứng dụng yêu cầu quyền gửi thông báo, đăng ký thiết bị để nhận thông báo đẩy và sử dụng trình chạy dịch vụ để nhận thông báo đẩy và hiển thị thông báo dưới dạng thông báo.