SPA + SSR

Labo 2

Objectif de la session
04:17

Le but d'aujourd'hui est de créer une SPA (une messagerie instantannée) avec SSR.

Recall

Une application SPA avec SSR se comporte:

  • Comme une MPA au premier chargement
  • Si l'utilisateur possède JavaScript, la page se convertit en une SPA (on parle d'hydration)
  • Pour le référencement et utilisateurs sans JavaScript, la page reste une MPA

Installation de SvelteKit
04:17

Instruction

  1. Créez un nouveau dossier pour le projet
  2. Ouvrez le avec Visual Studio
  3. Ouvrez le terminal
  4. npm create svelte@latest
    • Dans le dossier courant
    • Pas de TypeScript
  5. Suivez les instructions qu'ils vous donnent

Client-Side Routing
04:17

SvelteKit utilise une convention pour déterminer quel composant/fichier est employé en fonction de l'URL.

Example

Exercise

Créez-vous un petit site personnel avec au moins deux pages et des liens qui les relient.

Layout
04:17

Definition

Dans SvelteKit, un layout est un composant qui contient la partie commune de plusieurs pages.

Un composant placé dans sera appliqué aux routes . Ces composants doivent obligatoirement contenir une balise <slot />.

Example

  • s'applique à tout le site
  • s'applique à tout le dossier blog

Exercise

Ajoutez une barre de navigation et un footer à votre site.

Une application de messagerie: partie I
04:17

Exercise

Créez la base d'une application de messagerie. Elle doit afficher les messages provenant de la variable messages et contenir deux champs de texte et un bouton pour que l'utilisateur puisse préciser son nom et envoyer un message.

Indication: regardez l'exemple de la todo list

Une application de messagerie: envoi de message
04:17

Nous allons maintenant faire en sorte que vous puissiez envoyer un message.

Exercise

Quand vous cliquez sur le bouton envoyer, votre code doit effectuer une requête POST (via fetch) vers l'adresse

La requête POST doit contenir du JSON et préciser au moins les champs name et message.

Si tout fonctionne bien, votre message devrait apparaître à droite.

Remark

N'hésitez pas à employer ChatGPT pour de l'aide

Application de messagerie: réception de message
04:17

Normalement, un serveur ne fait que répondre aux requêtes du client. Pourtant, lorsque le serveur reçoit un message, il doit l'envoyer à tous les clients. Ceci se fait via les sockets.

Instruction

  • Installez socket.io: npm install socket.io-client
  • Dans la partie script de votre code, insérez le code suivant:

Pistes d'amélioration
04:17

  • Afficher la date d'envoi du message
  • Empêcher les messages vides, erreurs
  • Améliorer l'interface
  • Messages privés entre utilisateurs