Créez une application de notification instantanée simple à l'aide de Redis et JavaScript

Créez une application de notification instantanée simple à l'aide de Redis et JavaScript

Dans le développement d'applications modernes, la notification instantanée est devenue une fonctionnalité de plus en plus courante et importante. Il peut aider les applications à fournir des informations en temps réel aux utilisateurs de manière rapide et précise, améliorant ainsi l'expérience utilisateur et l'interactivité. Cet article explique comment créer une application simple de notification instantanée à l'aide de Redis et de JavaScript.

Tout d'abord, nous devons comprendre Redis. Redis est un système de stockage clé-valeur open source, très approprié pour être utilisé comme base de données de cache. Il est basé sur la mémoire, fournit des opérations de lecture et d'écriture hautes performances et prend en charge une variété de structures de données et de méthodes de fonctionnement. Dans cette application, nous utiliserons Redis pour stocker les informations d'abonnement des utilisateurs et la file d'attente des messages.

Avant de commencer, assurez-vous que Redis a été installé dans le système et que le pilote Redis correspondant a été importé dans l'application.

1. Créer la publication et l'abonnement des messages

Tout d'abord, nous devons créer un éditeur et un abonné pour respectivement publier et abonner les messages de notification.

const redis = require('redis');
const publisher = redis.createClient();
const subscriber = redis.createClient();

// 发布消息
publisher.publish('notifications', '您有新的通知消息');

// 订阅消息
subscriber.subscribe('notifications');
subscriber.on('message', (channel, message) => {
  console.log(`收到来自 ${channel} 的消息: ${message}`);
});

Avec le code ci-dessus, nous créons un éditeur Redis et un abonné. L'éditeur publie des messages sur le canal spécifié notifications via la méthode publisher.publish, et l'abonné s'abonne au canal via subscriber.subscribe. Lorsqu'un nouveau message est publié sur la chaîne, l'abonné déclenchera l'événement message et imprimera le message reçu. publisher.publish 方法发布消息到指定频道 notifications，而订阅者通过 subscriber.subscribe 订阅该频道。当有新的消息发布到频道时，订阅者会触发 message 事件，并打印出收到的消息。

2. 存储订阅信息

下一步是存储用户的订阅信息，以便在有新消息时能够即时通知到用户。我们可以使用 Redis 的哈希表数据结构来存储用户ID和对应的频道信息。

const redis = require('redis');
const client = redis.createClient();

// 存储订阅信息
function subscribeUser(userId, channel) {
  client.hset('subscriptions', userId, channel);
}

// 获取订阅信息
function getUserSubscription(userId) {
  return new Promise((resolve, reject) => {
    client.hget('subscriptions', userId, (err, channel) => {
      if (err) {
        reject(err);
      } else {
        resolve(channel);
      }
    });
  });
}

// 删除订阅信息
function unsubscribeUser(userId) {
  client.hdel('subscriptions', userId);
}

上述代码中，我们使用 Redis 的 hset 方法将用户ID作为哈希表的键，频道作为值，存储到 subscriptions 哈希表中。可以通过 hget 方法获取用户的订阅频道信息，并通过 hdel 方法删除用户的订阅信息。

3. 实现页面订阅和推送

最后一步是在前端页面实现用户的订阅和接收推送消息的功能。我们将使用 WebSocket 技术来实现消息的实时推送。

const socket = new WebSocket('ws://localhost:3000');

// 订阅通知
function subscribeNotifications(userId) {
  socket.send(JSON.stringify({
    event: 'subscribe',
    userId
  }));
}

// 接收消息
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  if (message.event === 'notification') {
    console.log(`收到新的通知: ${message.content}`);
  }
};

在前端代码中，我们创建了一个 WebSocket 客户端，并通过 socket.send 方法发送订阅消息的请求。当有新的消息推送到客户端时，会触发 socket.onmessage

Stockage des informations d'abonnement

L'étape suivante consiste à stocker les informations d'abonnement de l'utilisateur afin que l'utilisateur puisse être immédiatement averti lorsqu'il y a de nouveaux messages. Nous pouvons utiliser la structure de données de la table de hachage de Redis pour stocker les identifiants utilisateur et les informations de canal correspondantes.

rrreee

Dans le code ci-dessus, nous utilisons la méthode hset de Redis pour stocker l'ID utilisateur comme clé de la table de hachage et le canal comme valeur dans la table de hachage abonnements . Vous pouvez obtenir les informations sur le canal d'abonnement de l'utilisateur via la méthode hget et supprimer les informations d'abonnement de l'utilisateur via la méthode hdel.

🎜Mise en œuvre de l'abonnement à la page et du push 🎜🎜🎜La dernière étape consiste à implémenter la fonction d'abonnement des utilisateurs et de recevoir des messages push sur la page front-end. Nous utiliserons la technologie WebSocket pour réaliser une diffusion de messages en temps réel. 🎜rrreee🎜Dans le code front-end, nous créons un client WebSocket et envoyons une demande d'abonnement au message via la méthode socket.send. Lorsqu'un nouveau message est envoyé au client, l'événement socket.onmessage sera déclenché et le contenu de la notification reçue sera imprimé. 🎜🎜Avec le code ci-dessus, nous avons réalisé une simple application de notification instantanée construite avec Redis et JavaScript. Il comprend des fonctions de publication de messages et d'abonnement, qui peuvent stocker les informations d'abonnement des utilisateurs et les transmettre immédiatement au client lorsque de nouveaux messages sont disponibles. Ceci n'est qu'un exemple de mise en œuvre de base, vous pouvez effectuer un développement secondaire et une extension selon vos propres besoins. 🎜🎜Résumé : 🎜🎜En utilisant Redis et JavaScript, nous pouvons facilement créer une simple application de notification instantanée. Redis fournit des opérations de lecture et d'écriture hautes performances pour stocker les informations d'abonnement et les files d'attente de messages ; JavaScript fournit des outils de développement pratiques et la technologie WebSocket pour implémenter les fonctions d'abonnement et de push. Cette application peut être largement utilisée dans les notifications en temps réel, les systèmes de chat, la surveillance en temps réel et d'autres scénarios pour offrir aux utilisateurs une bonne expérience et interactivité. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!