Chat<\/title>\n\n<style>\nbody {\n margin: 0;\n font-family: Arial;\n background: #0b3d91;\n color: white;\n display: flex;\n height: 100vh;\n}\n\n.sidebar {\n width: 25%;\n background: #0a2f6b;\n padding: 10px;\n}\n\n.channel {\n padding: 10px;\n margin-bottom: 5px;\n background: #144bb8;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.channel.active {\n background: #1e5fff;\n}\n\n.chat {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.messages {\n flex: 1;\n padding: 10px;\n overflow-y: auto;\n}\n\n.msg {\n margin-bottom: 10px;\n background: #144bb8;\n padding: 8px;\n border-radius: 5px;\n display: inline-block;\n}\n\n.input-area {\n display: flex;\n border-top: 1px solid #1e5fff;\n}\n\ninput {\n flex: 1;\n padding: 10px;\n border: none;\n outline: none;\n background: #0a2f6b;\n color: white;\n}\n\nbutton {\n padding: 10px 20px;\n background: #1e5fff;\n border: none;\n color: white;\n cursor: pointer;\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"sidebar\">\n <div class=\"channel active\" onclick=\"switchChannel('Splo\u0161no')\">Splo\u0161no<\/div>\n <div class=\"channel\" onclick=\"switchChannel('Oglasna deska')\">Oglasna deska<\/div>\n<\/div>\n\n<div class=\"chat\">\n <div class=\"messages\" id=\"messages\"><\/div>\n <div class=\"input-area\">\n <input id=\"input\" placeholder=\"Napi\u0161i sporo\u010dilo...\" \/>\n <button onclick=\"send()\">Po\u0161lji<\/button>\n <\/div>\n<\/div>\n\n<script src=\"\/socket.io\/socket.io.js\"><\/script>\n<script>\n\nlet socket = io();\nlet current = \"Splo\u0161no\";\nlet allMessages = {\"Splo\u0161no\":[],\"Oglasna deska\":[]};\n\nsocket.on(\"init\", (data) => {\n allMessages = data;\n render();\n});\n\nsocket.on(\"newMessage\", (msg) => {\n allMessages[msg.channel].push(msg);\n render();\n});\n\nfunction switchChannel(ch){\n current = ch;\n\n document.querySelectorAll('.channel').forEach(el => el.classList.remove('active'));\n event.target.classList.add('active');\n\n render();\n}\n\nfunction send(){\n let val = document.getElementById(\"input\").value;\n if(!val) return;\n\n socket.emit(\"sendMessage\", {\n text: val,\n channel: current\n });\n\n document.getElementById(\"input\").value=\"\";\n}\n\nfunction render(){\n let c = document.getElementById(\"messages\");\n c.innerHTML=\"\";\n\n allMessages[current].forEach(m=>{\n let d = document.createElement(\"div\");\n d.className=\"msg\";\n d.innerHTML = m.text + \"<div style='font-size:10px;color:#aaccff'>\"+m.time+\"<\/div>\";\n c.appendChild(d);\n });\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n\n=============================\nZAGON:\n=============================\n\n1. npm init -y\n2. npm install express socket.io\n3. node server.js\n4. odpri http:\/\/localhost:3000\n\n=============================\n\u010ce ne dela:\n=============================\n– preveri da je \/public folder\n– da odpira\u0161 localhost (NE file:\/\/)\n– da je port 3000 prost\n\n","protected":false},"excerpt":{"rendered":"<p>============================= FULL WORKING CHAT APP (Node.js + Express + Socket.io) ============================= \ud83d\udcc1 STRUKTURA PROJEKTA: projekt\/ \u251c\u2500\u2500 server.js \u2514\u2500\u2500 public\/ \u2514\u2500\u2500 index.html ============================= 1) server.js ============================= const express = require(“express”); const app = express(); const http = require(“http”).createServer(app); const io = require(“socket.io”)(http); app.use(express.static(“public”)); let messages = { “Splo\u0161no”: [], “Oglasna deska”: [] }; io.on(“connection”, (socket) => […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-269","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":3,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/media?parent=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":269,"date":"2026-05-04T12:13:42","date_gmt":"2026-05-04T12:13:42","guid":{"rendered":"https:\/\/dabudi.si\/?page_id=269"},"modified":"2026-05-04T12:18:09","modified_gmt":"2026-05-04T12:18:09","slug":"chat","status":"publish","type":"page","link":"https:\/\/dabudi.si\/index.php\/chat\/","title":{"rendered":"chat"},"content":{"rendered":"\n=============================\nFULL WORKING CHAT APP\n(Node.js + Express + Socket.io)\n=============================\n\n\ud83d\udcc1 STRUKTURA PROJEKTA:\n\nprojekt\/\n \u251c\u2500\u2500 server.js\n \u2514\u2500\u2500 public\/\n \u2514\u2500\u2500 index.html\n\n=============================\n1) server.js\n=============================\n\nconst express = require(“express”);\nconst app = express();\nconst http = require(“http”).createServer(app);\nconst io = require(“socket.io”)(http);\n\napp.use(express.static(“public”));\n\nlet messages = {\n “Splo\u0161no”: [],\n “Oglasna deska”: []\n};\n\nio.on(“connection”, (socket) => {\n console.log(“Uporabnik povezan”);\n\n socket.emit(“init”, messages);\n\n socket.on(“sendMessage”, (data) => {\n const msg = {\n text: data.text,\n time: new Date().toLocaleTimeString(),\n channel: data.channel\n };\n\n messages[data.channel].push(msg);\n\n io.emit(“newMessage”, msg);\n });\n});\n\nhttp.listen(3000, () => {\n console.log(“Server te\u010de na http:\/\/localhost:3000”);\n});\n\n=============================\n2) public\/index.html\n=============================\n\n\n\n\n\n\nChat<\/title>\n\n<style>\nbody {\n margin: 0;\n font-family: Arial;\n background: #0b3d91;\n color: white;\n display: flex;\n height: 100vh;\n}\n\n.sidebar {\n width: 25%;\n background: #0a2f6b;\n padding: 10px;\n}\n\n.channel {\n padding: 10px;\n margin-bottom: 5px;\n background: #144bb8;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.channel.active {\n background: #1e5fff;\n}\n\n.chat {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.messages {\n flex: 1;\n padding: 10px;\n overflow-y: auto;\n}\n\n.msg {\n margin-bottom: 10px;\n background: #144bb8;\n padding: 8px;\n border-radius: 5px;\n display: inline-block;\n}\n\n.input-area {\n display: flex;\n border-top: 1px solid #1e5fff;\n}\n\ninput {\n flex: 1;\n padding: 10px;\n border: none;\n outline: none;\n background: #0a2f6b;\n color: white;\n}\n\nbutton {\n padding: 10px 20px;\n background: #1e5fff;\n border: none;\n color: white;\n cursor: pointer;\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"sidebar\">\n <div class=\"channel active\" onclick=\"switchChannel('Splo\u0161no')\">Splo\u0161no<\/div>\n <div class=\"channel\" onclick=\"switchChannel('Oglasna deska')\">Oglasna deska<\/div>\n<\/div>\n\n<div class=\"chat\">\n <div class=\"messages\" id=\"messages\"><\/div>\n <div class=\"input-area\">\n <input id=\"input\" placeholder=\"Napi\u0161i sporo\u010dilo...\" \/>\n <button onclick=\"send()\">Po\u0161lji<\/button>\n <\/div>\n<\/div>\n\n<script src=\"\/socket.io\/socket.io.js\"><\/script>\n<script>\n\nlet socket = io();\nlet current = \"Splo\u0161no\";\nlet allMessages = {\"Splo\u0161no\":[],\"Oglasna deska\":[]};\n\nsocket.on(\"init\", (data) => {\n allMessages = data;\n render();\n});\n\nsocket.on(\"newMessage\", (msg) => {\n allMessages[msg.channel].push(msg);\n render();\n});\n\nfunction switchChannel(ch){\n current = ch;\n\n document.querySelectorAll('.channel').forEach(el => el.classList.remove('active'));\n event.target.classList.add('active');\n\n render();\n}\n\nfunction send(){\n let val = document.getElementById(\"input\").value;\n if(!val) return;\n\n socket.emit(\"sendMessage\", {\n text: val,\n channel: current\n });\n\n document.getElementById(\"input\").value=\"\";\n}\n\nfunction render(){\n let c = document.getElementById(\"messages\");\n c.innerHTML=\"\";\n\n allMessages[current].forEach(m=>{\n let d = document.createElement(\"div\");\n d.className=\"msg\";\n d.innerHTML = m.text + \"<div style='font-size:10px;color:#aaccff'>\"+m.time+\"<\/div>\";\n c.appendChild(d);\n });\n}\n\n<\/script>\n\n<\/body>\n<\/html>\n\n=============================\nZAGON:\n=============================\n\n1. npm init -y\n2. npm install express socket.io\n3. node server.js\n4. odpri http:\/\/localhost:3000\n\n=============================\n\u010ce ne dela:\n=============================\n– preveri da je \/public folder\n– da odpira\u0161 localhost (NE file:\/\/)\n– da je port 3000 prost\n\n","protected":false},"excerpt":{"rendered":"<p>============================= FULL WORKING CHAT APP (Node.js + Express + Socket.io) ============================= \ud83d\udcc1 STRUKTURA PROJEKTA: projekt\/ \u251c\u2500\u2500 server.js \u2514\u2500\u2500 public\/ \u2514\u2500\u2500 index.html ============================= 1) server.js ============================= const express = require(“express”); const app = express(); const http = require(“http”).createServer(app); const io = require(“socket.io”)(http); app.use(express.static(“public”)); let messages = { “Splo\u0161no”: [], “Oglasna deska”: [] }; io.on(“connection”, (socket) => […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-269","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":3,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/pages\/269\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/dabudi.si\/index.php\/wp-json\/wp\/v2\/media?parent=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}