Lav din første chat‑app med Socket.IO
Velkommen til den første rigtige Socket.IO‑guide! 🎉
I dette projekt laver du en helt simpel chat‑app, hvor flere brugere kan skrive sammen i realtid via deres browser.
Det kræver kun:
- Node.js (fra 00-getting-started-guiden)
- En kodeeditor (fx Visual Studio Code)
- En webbrowser
Du kommer til at:
- sætte en lille Node.js‑server op
- bruge Socket.IO til at skabe forbindelse mellem server og browser
- sende beskeder frem og tilbage i realtid
- vise beskeder i browseren
Det er “Hello World” for realtids‑programmering!
Åbn en terminal og skriv:
mkdir simpel-chat-app
cd simpel-chat-app
npm init -yDette opretter en ny mappe og en package.json fil.
npm install express socket.io- Express er en lille webserver
- Socket.IO giver dig realtids-kommunikation
Opret en fil der hedder server.js med denne kode:
const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
app.use(express.static("public"));
io.on("connection", (socket) => {
console.log("En bruger forbundet");
socket.on("chatMessage", (msg) => {
io.emit("chatMessage", msg);
});
});
http.listen(3000, () => {
console.log("Server kører på http://localhost:3000");
});Opret en mappe der hedder public.
Inde i den: lav en fil index.html med denne kode:
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8" />
<title>Simpel Chat</title>
</head>
<body>
<h1>💬 Simpel Chat</h1>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" placeholder="Skriv en besked..." />
<button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById("form");
const input = document.getElementById("input");
const messages = document.getElementById("messages");
form.addEventListener("submit", (e) => {
e.preventDefault();
if (input.value) {
socket.emit("chatMessage", input.value);
input.value = "";
}
});
socket.on("chatMessage", (msg) => {
const item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
});
</script>
</body>
</html>I terminalen:
node server.jsÅbn derefter:
Åbn gerne to browser-vinduer for at se chatten kommunikere live!
Godt gået!
Du har nu en lille chat‑app der kan:
- forbinde flere brugere
- sende beskeder i realtid
- vise dem i browseren
Du har nu fundamentet på plads til næste guide (hvis den findes ...
Hvis noget driller:
- spørg en frivillig
- eller opret et issue i repoet
God kodning — og rigtig god pirat‑energi! ⚓💻