Really simple example chat webapp built with SvelteKit and sveltekit-sse.
It's a playground to try out Server Sent Events ("SSE") with Publish–subscribe pattern ("pubsub") on the practical use case of a chat application.
This is a technical prototype! There is no security, no authentication, no authorization and no checking. This can easily be misused by bad actors. Don't use this in production!
Checkout the git repository, install dependencies (npm i
) and run on localhost (npm run dev
) or listen on all local IPs (npm run dev -- --host
).
Single page SvelteKit webapp using a single +page.svelte
with variables name
and room
.
Using components EnterName
, SelectRoom
and Chat
. Supporting event emitter files /api/rooms/+server.js
and /api/chat/+server.js
using sveltekit-sse
.
Small libraries for in-memory storage (/lib/server/chats.js
) and pubsub (lib/servers/pubsub.js
).
Component EnterName
returns the entered name to the main page via bind.
Component SelectRoom
returns the selected or entered room to the main page via bind, it uses the rooms
SSE to list existing rooms, updating in real time.
Then component Chat
will be rendered with parameters name
and room
. It uses chat
SSE with query parameter name
and room
. This provides multiple events, namely users
with the full list of user names of the current room and message
which contains the newly POSTed messages.