Le but d'aujourd'hui est de créer une SPA (une messagerie instantannée) avec SSR.
Une application SPA avec SSR se comporte:
npm create svelte@latest
SvelteKit utilise une convention pour déterminer quel composant/fichier est employé en fonction de l'URL.
/votre/page→src/routes/votre/page/+page.svelteCréez-vous un petit site personnel avec au moins deux pages et des liens qui les relient.
Dans SvelteKit, un layout est un composant qui contient la partie commune de plusieurs pages.
Un composant placé dans src/routes/dossier/+layout.svelte sera appliqué aux routes dossier/*. Ces composants doivent obligatoirement contenir une balise <slot />
.
Ajoutez une barre de navigation et un footer à votre site.
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
Nous allons maintenant faire en sorte que vous puissiez envoyer un message.
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.
N'hésitez pas à employer ChatGPT pour de l'aide
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.
npm install socket.io-client
script
de votre code, insérez le code suivant: