App di notifica in tempo reale che utilizza React e Socket.io

Prova Il Nostro Strumento Per Eliminare I Problemi

Le notifiche in tempo reale consentono agli utenti di ricevere aggiornamenti istantanei non appena si verificano invece di dover verificare manualmente le modifiche. In questo tutorial completo imparerai come creare un'app di notifica in tempo reale utilizzando React e Socket.io .

Cosa costruiremo

Alla fine di questo articolo creerai un'app di notifica multiutente con le seguenti funzionalità:

  • Visualizza le notifiche non lette in tempo reale con Socket.io
  • Reagire frontend per mostrare le notifiche
  • Node + backend Express per gestire le notifiche
  • MongoDB per archiviare i dati di notifica
  • Comunicazione WebSocket nativa per prestazioni elevate

Motivi per utilizzare Socket.io

Sono disponibili alcune opzioni per aggiungere funzionalità in tempo reale alle applicazioni. Ecco perché utilizzeremo Socket.io :

  • Motore in tempo reale affidabile basato su WebSocket
  • Fallback automatico al polling lungo HTTP sui browser meno recenti
  • Trasmetti messaggi a tutti i client connessi
  • Alta velocità con pacchetti binari
  • Supporta stanze per la comunicazione segmentata
  • Integrazione dell'ecosistema JavaScript popolare

Vantaggi chiave di Socket.io

In particolare, questi Vantaggi di Socket.io renderlo perfetto per il nostro caso d'uso:

  1. Compatibilità nativa con i backend Node
  2. Supporto di prima classe per Reagire integrazione sul frontend
  3. Scalabile per supportare molti utenti simultanei
  4. Emetti eventi istantaneamente per aggiornare i client connessi

Opzioni di servizio in tempo reale

Prima di immergerci nel codice, è utile comprendere le opzioni dell'architettura per aggiungere funzionalità in tempo reale:

Server Socket.io self-hosted

Un metodo è eseguire il tuo server Socket.io come parte della tua infrastruttura backend. Ciò offre il massimo controllo per personalizzare eventi e messaggi.

Tuttavia, ospitare e scalare un servizio in tempo reale globale è complesso. È qui che i servizi di terze parti possono aiutare.

Backend in tempo reale come servizio

Un altro approccio consiste nell'utilizzare un Backend as a Service (BaaS) in tempo reale predefinito da fornitori come Pusher, PubNub e Ably. Questi semplificano la configurazione e alleviano i carichi infrastrutturali.

Per questo tutorial, ci concentreremo sull'esecuzione di Socket.io open source per apprendere in modo pratico come creare app in tempo reale.

Passaggio 1: impostazione del progetto

Utilizzeremo Create React App per inizializzare rapidamente un frontend React. Naviga da un terminale nella directory del progetto principale desiderato per iniziare:

|_+_|

Questo supporta il nostro codice di avviamento React in un nuovo |_+_| cartella. Successivamente, dobbiamo installare le nostre dipendenze.

Dipendenze del frontend

Esegui questo comando nel tuo terminale dalla posizione dell'app React per installare i pacchetti frontend:

|_+_|
  • |_+_| - Per la navigazione e il routing
  • |_+_| - Client per connettere il frontend Socket.io al backend

Dipendenze di back-end

Passare al percorso della cartella backend e inizializzare un server Node:

|_+_|

Quindi installa i pacchetti backend necessari:

|_+_|
  • |_+_| -Nodo/server espresso
  • |_+_| - Modellazione di oggetti MongoDB
  • |_+_| - Abilita la comunicazione in tempo reale

Passaggio 2: progettazione del database

Prima di scrivere il codice dell'app, mapperemo lo schema del nostro database utilizzando Mongoose. Crea un |_+_| cartella nel backend:

|_+_|

Apri |_+_| e dichiarare uno schema Mongoose come:

|_+_|

Questo definisce la struttura del nostro |_+_| documenti che memorizzeranno il messaggio e il tipo per ogni notifica.

Modello utente

Dobbiamo anche monitorare gli utenti connessi. Crea un |_+_| file modello con:

|_+_|

Il |_+_| il campo identificherà ciascun utente univoco.

Passaggio 3: percorsi API di backend

Una volta costruiti i nostri modelli di dati, crea quindi un file server per gestire i percorsi API:

|_+_|

Connessione al database

Innanzitutto, connettiti a un database MongoDB denominato |_+_|:

|_+_|

Server espresso

Successivamente configura un server Express per ricevere richieste:

|_+_|
  • Abilita le intestazioni CORS per le richieste multiorigine
  • Analizzare i corpi delle richieste JSON
  • Avvia il server sulla porta 8080

Percorsi di notifica

Implementiamo tre percorsi API per gestire le notifiche:

  1. |_+_| - Ricevi tutte le notifiche
  2. |_+_| - Crea una nuova notifica
  3. |_+_| - Contrassegna la notifica come letta
|_+_|

Con l'API di backend installata, possiamo iniziare a visualizzare le notifiche.

Passaggio 4: reagire ai componenti

Nel tuo |_+_| cartella, creare una cartella dei componenti con i componenti di notifica:

|_+_|

Componente di notifica

Apri |_+_| e costruire un componente per visualizzare le singole notifiche:

|_+_|

Visualizziamo il messaggio stesso, deleghiamo lo stile del tipo a un componente separato e mostriamo un pulsante per contrassegnarlo come letto.

Componente Tipo di notifica

Il |_+_| Il componente renderà la classe CSS appropriata in base al valore del tipo di notifica di |_+_|, |_+_| o |_+_|:

|_+_|

Componente Elenco notifiche

Infine, il |_+_| Il componente mappa una serie di notifiche e le visualizza ciascuna utilizzando il nostro |_+_| riutilizzabile componente:

|_+_|

Passaggio 5: recupero e visualizzazione delle notifiche

Con i componenti costruiti, utilizziamo l'API backend per caricare e mostrare le notifiche.

Reagire alla configurazione del router

Configura i percorsi in |_+_| con React Router:

|_+_|

Componente della pagina iniziale

Crea un |_+_| cartella con |_+_| componente:

|_+_|
  • Recupera le notifiche dall'API al caricamento
  • Salva nello stato Reagisci
  • Passa a |_+_| da visualizzare

Visualizza notifiche

Avviare il server backend con |_+_| e il server di sviluppo React.

L'app si connetterà all'API, caricherà i dati di notifica e li visualizzerà con i nostri componenti React!

Passaggio 6: creare aggiornamenti di notifiche in tempo reale

Finora abbiamo caricato le notifiche al caricamento della pagina. Successivamente utilizziamo Socket.io per aggiornare il feed in tempo reale.

Inizializza Socket.io

Per prima cosa importa il client Socket.io in |_+_| pagina:

|_+_|

Successivamente crea un'istanza di Socket.io per connetterti al server:

|_+_|

Ricevi aggiornamenti in tempo reale

Per ricevere aggiornamenti di notifiche in tempo reale dal server, ascoltare |_+_| evento:

|_+_|

Questo prende i nuovi dati di notifica emessi dal server e li aggiunge all'inizio dell'array delle notifiche.

Configurare il backend Socket.io

Passa a |_+_| file backend e importa Socket.io:

|_+_|

Questo inizializza Socket.io per l'ascolto sulla porta del server Express.

Invia notifica in tempo reale

Aggiungi un endpoint per inviare una notifica di prova:

|_+_|

Questo crea una nuova notifica e la emette su tutte le prese collegate!

Prova gli aggiornamenti in tempo reale

Riavvia i server backend e frontend e carica l'app.

Invia una richiesta POST a |_+_| punto finale.

Dovresti vedere immediatamente la nuova visualizzazione delle notifiche nell'app senza aggiornare!

Passaggio 7: contrassegnare come letto

Al momento, l'eliminazione delle notifiche le nasconde solo nell'interfaccia utente. Aggiungiamo la possibilità di rendere persistente lo stato di lettura.

Notifica Leggi Mutazione

In |_+_| componente, attiva una mutazione al clic:

|_+_|

Invia una richiesta PATCH per aggiornare la notifica come letta nel database.

Nascondi letto dall'elenco

In |_+_|, filtra le notifiche:

|_+_|

Ora le notifiche ignorate non verranno visualizzate nel feed.

Passaggio 8: nomi utente casuali univoci

Per identificare gli autori delle notifiche, assegneremo a ciascuna connessione client un nome utente casuale.

Genera nome utente

Importa utilità per aiutare a generare un nome:

|_+_|

Quando Socket.io si connette, esegui:

|_+_|

Mantieni il nome utente

Creiamo un nome utente casuale e lo persistiamo nel database quando Socket.io si connette. Ciò assegna a ciascun utente un identificatore univoco.

Emettiamo anche |_+_| evento che restituisce il nome utente al client.

Mostra nome utente

Per visualizzare il nome utente con le notifiche, ascoltare |_+_| in |_+_|:

|_+_|

Salva l'utente nello stato. Quindi in |_+_| componente:

|_+_|

Questo mostra il nome utente casuale sopra ogni notifica.

Passaggio 9: iscriviti alle stanze di notifica

Per notifiche più mirate, Socket.io supporta canali chiamati 'stanze'. I clienti possono unirsi e abbandonare i canali per segmentare la comunicazione degli eventi.

Unisciti al canale su Connect

Assegna gli utenti a una stanza al momento della connessione |_+_|:

|_+_|

Ciò aggiunge ogni utente a una stanza denominata con il suo nome utente casuale.

Invia alla stanza

Quando crei le notifiche, specifica la stanza di destinazione:

|_+_|

Utilizzando |_+_| emette l'evento solo ai client in quella stanza. Utile per i messaggi diretti.

Lascia su Disconnetti

Rimuovi i clienti dalla stanza quando si disconnettono:

|_+_|

Ciò mantiene ogni stanza limitata ai soli utenti attualmente connessi.

Passaggio 10: distribuzione

Una volta terminato lo sviluppo, distribuisci l'applicazione per renderla accessibile pubblicamente.

Hosting di produzione

Uno stack comune per l'hosting è Nginx, Node e MongoDB. Esistono molte opzioni IaaS e PaaS cloud per eseguire questa architettura.

Oppure puoi utilizzare una piattaforma Jamstack specializzata come Vercel per semplificare la distribuzione con la configurazione automatizzata per Node, React e risorse statiche.

Provider in tempo reale alternativi

Come accennato in precedenza, implementare la propria infrastruttura in tempo reale comporta complessità. La migrazione di Socket.io a servizi cloud come Pusher o Ably potrebbe rappresentare una soluzione migliore a lungo termine.

Monitoraggio

Assicurati di impostare il monitoraggio su tutti i componenti: database, rete, infrastruttura, avvisi, in particolare per le app mission-critical.

Conclusione

Con questo si conclude questo tutorial completo sulla creazione di un'applicazione di notifica in tempo reale che sfrutta React, Node/Express, Socket.io e MongoDB.

I concetti chiave includono:

  • Sincronizzazione dei dati tra client con eventi Socket.io
  • Componenti React per visualizzare le notifiche
  • Backend Express + MongoDB per archiviare i dati di notifica
  • Comunicazione in tempo reale Considerazioni sulla scalabilità

Ora disponi di una base per aggiungere funzionalità di aggiornamento in tempo reale alle tue app. Le possibilità sono infinite per migliorare la UX con i WebSocket!

Guarda Anche:

Nuovi Oggetti

Il Più Leggibile

Scelta Del Redattore