#frontend #javascript #socket.io
Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.
O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.
⚙️ Yüklənməsi:
Backend (Node.js):
Frontend (Client):
💻 Nümunə:
Server (server.js):
Client (index.html):
Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑💻 Real-time collaborative editors
@TechCodeAz | TechCode.Az
Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.
O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.
⚙️ Yüklənməsi:
Backend (Node.js):
npm install express socket.io
Frontend (Client):
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
💻 Nümunə:
Server (server.js):
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
cors: {
origin: "*",
},
});
io.on("connection", (socket) => {
console.log("User connected:", socket.id);
socket.on("chat-message", (msg) => {
io.emit("chat-message", msg);
});
socket.on("disconnect", () => {
console.log("User disconnected:", socket.id);
});
});
server.listen(3000, () => {
console.log("Server running on http://localhost:3000");
});Client (index.html):
<!DOCTYPE html>
<html>
<head><title>Socket.IO Chat</title></head>
<body>
<input id="msgInput" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
const socket = io("http://localhost:3000");
const messages = document.getElementById("messages");
const input = document.getElementById("msgInput");
socket.on("chat-message", (msg) => {
const li = document.createElement("li");
li.textContent = msg;
messages.appendChild(li);
});
function sendMessage() {
const msg = input.value;
socket.emit("chat-message", msg);
input.value = "";
}
</script>
</body>
</html>
Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑💻 Real-time collaborative editors
@TechCodeAz | TechCode.Az
❤3👍2🔥1