Skip to content

coding-pirates-denmark/web-socketio-basic-chat-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🏴‍☠️ Minimal Socket.IO Chat

En super enkel chat‑app, som du selv kan køre på din computer.

🎥 Demo

Her kan du se, hvordan chatten virker:

Chat demo

🚀 Sådan starter du chatten

1. Installér Node.js

Du skal have Node.js på din computer.

👉 Download her: https://nodejs.org

(Klik på den grønne “LTS” version)


2. Åbn chat‑mappen

Find projektmappen på din computer, højreklik og vælg:

“Åbn i Terminal” / “Open in Terminal” / “Åbn i Command Prompt”


3. Installer de ting projektet skal bruge

Skriv dette i terminalen og tryk Enter:

npm install

4. Start serveren

Når installationen er færdig, skriv:

npm start

Hvis alt virker, står der noget i stil med:

Server kører på http://localhost:3000

5. Åbn chatten i din browser

Åbn Chrome, Edge eller Firefox og gå til:

http://localhost:3000

Åbn gerne to faner – så kan du skrive med dig selv 😄


💡 Hvad kan du prøve?

  • Skriv dit navn og klik Join
  • Send beskeder
  • Åbn flere faner og chat mellem dem

⭐ Idéer til at udvide chatten

Her er nogle super sjove ting, du kan bygge ovenpå:

🎨 1. Lav dine egne farver

Åbn public/client.js og find funktionen, der viser beskederne.

Tilføj f.eks.:

div.style.color = "blue";

… eller lav farver baseret på dit navn!


😀 2. Brug emojis

Du kan bare skrive emojis direkte i inputfeltet:

😀🔥🐍🏴‍☠️

Eller du kan sætte dem ind automatisk, fx:

msg = "💬 " + msg;

🔔 3. Afspil lyde når der kommer en besked

Læg en lydfil i public/, fx ding.mp3, og tilføj:

new Audio("ding.mp3").play();

Så siger chatten ding! hver gang en besked dukker op.

🏰 4. Lav chat‑rum (rooms)

F.eks. pirat‑rum, coding‑rum eller minecraft‑rum.

Idé:

Når du joiner, vælg et rum (fx “pirater”).

Send til serveren:

socket.emit("join-room", "pirater");

På serveren:

socket.join(roomName);

Og når du sender beskeder:

io.to(roomName).emit("chat-message", msg);

Nu har du flere rum i din chat! 🏰


🧑‍💻 God hacking og god chat!

Hvis noget driller, så spørg en frivillig – vi hjælper gerne 😊

🙌 Bidragydere

Dette projekt er lavet til Coding Pirates Denmark for at hjælpe børn og unge med at lære programmering.

Bidragydere:

  • Jonas Bak Phillipson – projektidé, struktur og kode
  • M365 Copilot – hjælp med opsætning af README og forklaringer

Tak til alle, der hjælper med at gøre Coding Pirates til et sjovt sted at lære ❤️

Releases

No releases published

Packages

 
 
 

Contributors