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 hướng dẫn bạn từng bước cách tạo máy chủ thông báo đẩy. Khi kết thúc lớp học lập trình này, 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 một bản ghi cơ sở dữ liệu mới khi ứng dụng chọn sử dụng thông báo đẩy và xoá một bản ghi cơ sở dữ liệu hiện có khi ứng dụng chọn không sử dụng)
Gửi thông báo đẩy đến một ứng dụng
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 thảo luận 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 về các khái niệm liên quan đến thông báo đẩy.

Mã ứng dụng 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 xem push-notifications-server-codelab-complete (nguồn) để xem mã hoàn chỉnh.

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 không hoạt động với các hệ điều hành sau đây (hoặ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 cần 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 những công nghệ này vì chúng mang lại trải nghiệm lớp học lập trình đáng tin cậy.

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à Glitch UI (Giao diện người dùng Glitch) trong suốt lớp học lập trình này.

Nhấp vào Remix to Edit (Trộn 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ể sử dụng thông báo đẩy, bạn cần thiết lập máy chủ và ứng dụng 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ở thiết bị đầu cuối Glitch bằng cách nhấp vào Tools (Công cụ) rồi nhấp vào Terminal (Thiết bị đầu cuối).
Trong dòng lệnh, hãy chạy npx web-push generate-vapid-keys. Sao chép khoá riêng tư và giá trị khoá công khai.
Mở .env và cập nhật VAPID_PUBLIC_KEY và VAPID_PRIVATE_KEY. Đặt VAPID_SUBJECT thành mailto:test@test.test. Tất cả các giá trị này phải được gói 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 Glitch.

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

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

Ứng dụng của bạn xử lý hầu hết quy trình đăng ký. Những việc chính mà máy chủ của bạn cần làm là lưu gói thuê bao thông báo đẩy mới và xoá gói thuê bao cũ. Các gói thuê bao này cho phép bạn đẩy thông báo đến ứng dụng khách 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 mới về gói thuê bao

Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh .

Nhấp vào Register service worker (Đăng ký worker 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ý thông báo đẩy. Trình duyệt hoặc hệ điều hành của bạn có thể 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ỳ theo 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ã bằng cách nhấp vào View Source (Xem mã nguồn) trong giao diện người dùng Glitch.
Mở nhật ký lỗi 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 tiếp theo là thông tin thuê bao của ứng dụng khách mà bạn cần lưu.
Mở server.js.
Cập nhật logic trình xử lý tuyến /add-subscription bằng 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), rồi chạy cat .data/db.json trong Terminal. .data/db.json bị xoá mỗi khi bạn chỉnh sửa ứng dụng. Lý do là 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 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ý thông báo đẩy.
Xem lại Nhật ký lỗi. Bạn sẽ thấy /remove-subscription, theo sau là thông tin thuê bao của ứng dụng khách.
Cập nhật logic trình xử lý tuyến /remove-subscription bằng 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 phần Gửi thông báo đẩy, máy chủ của bạn không thực sự gửi trực tiếp thông báo đẩy đến ứng dụng. Thay vào đó, ứng dụng này dựa vào 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 trình xử lý tuyến /notify-me bằng 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 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 trình xử lý tuyến /notify-all bằng 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ý thông báo đẩy, sau đó nhấp lại vào Đăng ký thông báo đẩy. Việc này chỉ cần thiết vì như đã đề cập trước đó, Glitch 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à nội dung phải là ID: <ID>, trong đó <ID> là một số ngẫu nhiên.
Mở ứng dụng của bạn trên các trình duyệt hoặc thiết bị khác và thử đăng ký nhận thông báo đẩy, sau đó nhấp vào nút 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 nội dung của thông báo đẩy phải giống nhau).

Các bước tiếp theo

Hãy đọc bài viết Tổng quan về thông báo đẩy để hiểu rõ hơn về cách hoạt động của 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 để tìm hiểu cách tạo ứng dụng yêu cầu quyền 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.