{"id":2333,"date":"2025-09-25T06:00:13","date_gmt":"2025-09-25T06:00:13","guid":{"rendered":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/?page_id=2333"},"modified":"2025-09-25T06:24:56","modified_gmt":"2025-09-25T06:24:56","slug":"h11-vestlusruum","status":"publish","type":"page","link":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/h11-vestlusruum\/","title":{"rendered":"H11: Vestlusruum"},"content":{"rendered":"\n<ol class=\"wp-block-list\">\n<li>Loome Vestlusruum Node projekt.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"762\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/E0A13CAA-D1E9-4A25-80D5-A64C978D7A83.png\" alt=\"\" class=\"wp-image-2339\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/E0A13CAA-D1E9-4A25-80D5-A64C978D7A83.png 658w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/E0A13CAA-D1E9-4A25-80D5-A64C978D7A83-259x300.png 259w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/E0A13CAA-D1E9-4A25-80D5-A64C978D7A83-130x150.png 130w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Installime ws ja loome failid.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-1024x550.png\" alt=\"\" class=\"wp-image-2342\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-1024x550.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-300x161.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-768x413.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-150x81.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23-1536x826.png 1536w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C5D84D5C-98E8-49BE-BCCC-9C04D7B30C23.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>index.js:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const http = require('http');\nconst fs = require('fs');\nconst ws = new require('ws');\n\nconst wss = new ws.Server({noServer: true});\n\nfunction accept(req, res) {\n    if (req.url === '\/ws' &amp;&amp; req.headers.upgrade &amp;&amp;\n        req.headers.upgrade.toLowerCase() === 'websocket' &amp;&amp;\n        req.headers.connection.match(\/\\bupgrade\\b\/i)\n    ) {\n        wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);\n    } else if (req.url === '\/') {\n        fs.createReadStream('.\/index.html').pipe(res);\n    } else {\n        res.writeHead(404);\n        res.end();\n    }\n}\n\nconst clients = new Set();\n\nfunction onSocketConnect(ws) {\n    clients.add(ws);\n    ws.on('message', function(message) {\n        message = message.slice(0, 50);\n        for(let client of clients) {client.send(message);}\n    });\n    ws.on('close', function() {\n        log(`connection closed`);\n        clients.delete(ws);\n    });\n}\n\nlet log;\n\nif (!module&#91;\"parent\"&#93;) {\n    log = console.log;\n    http.createServer(accept).listen(8080);\n} else {\n    log = function() {};\n    \/\/ log = console.log;\n    exports.accept = accept;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">http<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">require<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;http&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">fs<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">require<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;fs&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">ws<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">require<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;ws&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">wss<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> ws.<\/span><span style=\"color: #B392F0\">Server<\/span><span style=\"color: #E1E4E8\">({noServer: <\/span><span style=\"color: #79B8FF\">true<\/span><span style=\"color: #E1E4E8\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">accept<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">req<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #FFAB70\">res<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (req.url <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;\/ws&#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><span style=\"color: #E1E4E8\"> req.headers.upgrade <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        req.headers.upgrade.<\/span><span style=\"color: #B392F0\">toLowerCase<\/span><span style=\"color: #E1E4E8\">() <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;websocket&#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&amp;&amp;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        req.headers.connection.<\/span><span style=\"color: #B392F0\">match<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">\/<\/span><span style=\"color: #F97583\">\\b<\/span><span style=\"color: #DBEDFF\">upgrade<\/span><span style=\"color: #F97583\">\\b<\/span><span style=\"color: #9ECBFF\">\/<\/span><span style=\"color: #F97583\">i<\/span><span style=\"color: #E1E4E8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        wss.<\/span><span style=\"color: #B392F0\">handleUpgrade<\/span><span style=\"color: #E1E4E8\">(req, req.socket, Buffer.<\/span><span style=\"color: #B392F0\">alloc<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">), onSocketConnect);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (req.url <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;\/&#39;<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        fs.<\/span><span style=\"color: #B392F0\">createReadStream<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;.\/index.html&#39;<\/span><span style=\"color: #E1E4E8\">).<\/span><span style=\"color: #B392F0\">pipe<\/span><span style=\"color: #E1E4E8\">(res);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        res.<\/span><span style=\"color: #B392F0\">writeHead<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">404<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        res.<\/span><span style=\"color: #B392F0\">end<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">clients<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">Set<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onSocketConnect<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">ws<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    clients.<\/span><span style=\"color: #B392F0\">add<\/span><span style=\"color: #E1E4E8\">(ws);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ws.<\/span><span style=\"color: #B392F0\">on<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;message&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">message<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        message <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> message.<\/span><span style=\"color: #B392F0\">slice<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">50<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">for<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> client <\/span><span style=\"color: #F97583\">of<\/span><span style=\"color: #E1E4E8\"> clients) {client.<\/span><span style=\"color: #B392F0\">send<\/span><span style=\"color: #E1E4E8\">(message);}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    ws.<\/span><span style=\"color: #B392F0\">on<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;close&#39;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">`connection closed`<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        clients.<\/span><span style=\"color: #B392F0\">delete<\/span><span style=\"color: #E1E4E8\">(ws);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> log;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #79B8FF\">module<\/span><span style=\"color: #E1E4E8\">&#91;<\/span><span style=\"color: #9ECBFF\">&quot;parent&quot;<\/span><span style=\"color: #E1E4E8\">&#93;) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    log <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> console.log;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    http.<\/span><span style=\"color: #B392F0\">createServer<\/span><span style=\"color: #E1E4E8\">(accept).<\/span><span style=\"color: #B392F0\">listen<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">8080<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">} <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">() {};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #6A737D\">\/\/ log = console.log;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #79B8FF\">exports<\/span><span style=\"color: #E1E4E8\">.accept <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> accept;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>index.html:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!doctype html>\n&lt;form name=\"publish\">\n    &lt;input type=\"text\" name=\"message\" maxlength=\"50\"\/>\n    &lt;input type=\"submit\" value=\"Send\"\/>\n&lt;\/form>\n \n&lt;div id=\"messages\">&lt;\/div>\n \n&lt;script>\n    let url = location.host == 'localhost' ?\n        'ws:\/\/localhost:8080\/ws' : location.host == 'javascript.local' ?\n            `ws:\/\/javascript.local\/article\/websocket\/chat\/ws` :\n            `wss:\/\/javascript.info\/article\/websocket\/chat\/ws`;\n    let socket = new WebSocket(url);\n \n    document.forms.publish.onsubmit = function() {\n        let outgoingMessage = this.message.value;\n \n        socket.send(outgoingMessage);\n        return false;\n    };\n \n    socket.onmessage = function(event) {\n        let incomingMessage = event.data;\n        showMessage(incomingMessage);\n    };\n    socket.onclose = event => console.log(`Closed ${event.code}`);\n \n    function showMessage(message) {\n        let messageElem = document.createElement('div');\n        messageElem.textContent = message;\n        document.getElementById('messages').prepend(messageElem);\n    }\n&lt;\/script><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">doctype<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;publish&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;message&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">maxlength<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;50&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">value<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Send&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;messages&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> url <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> location.host <\/span><span style=\"color: #F97583\">==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;localhost&#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #9ECBFF\">&#39;ws:\/\/localhost:8080\/ws&#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">:<\/span><span style=\"color: #E1E4E8\"> location.host <\/span><span style=\"color: #F97583\">==<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&#39;javascript.local&#39;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">?<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #9ECBFF\">`ws:\/\/javascript.local\/article\/websocket\/chat\/ws`<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">            <\/span><span style=\"color: #9ECBFF\">`wss:\/\/javascript.info\/article\/websocket\/chat\/ws`<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> socket <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">WebSocket<\/span><span style=\"color: #E1E4E8\">(url);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    document.forms.publish.<\/span><span style=\"color: #B392F0\">onsubmit<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> outgoingMessage <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #E1E4E8\">.message.value;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        socket.<\/span><span style=\"color: #B392F0\">send<\/span><span style=\"color: #E1E4E8\">(outgoingMessage);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">false<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    socket.<\/span><span style=\"color: #B392F0\">onmessage<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">event<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> incomingMessage <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> event.data;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #B392F0\">showMessage<\/span><span style=\"color: #E1E4E8\">(incomingMessage);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    socket.<\/span><span style=\"color: #B392F0\">onclose<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FFAB70\">event<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=&gt;<\/span><span style=\"color: #E1E4E8\"> console.<\/span><span style=\"color: #B392F0\">log<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">`Closed ${<\/span><span style=\"color: #E1E4E8\">event<\/span><span style=\"color: #9ECBFF\">.<\/span><span style=\"color: #E1E4E8\">code<\/span><span style=\"color: #9ECBFF\">}`<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">showMessage<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">message<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> messageElem <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> document.<\/span><span style=\"color: #B392F0\">createElement<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;div&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        messageElem.textContent <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> message;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        document.<\/span><span style=\"color: #B392F0\">getElementById<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;messages&#39;<\/span><span style=\"color: #E1E4E8\">).<\/span><span style=\"color: #B392F0\">prepend<\/span><span style=\"color: #E1E4E8\">(messageElem);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>N\u00e4eme et kasutajad saavad saada teadet <code>index.html<\/code>&#8216;st serverisse.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"255\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-1024x255.png\" alt=\"\" class=\"wp-image-2354\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-1024x255.png 1024w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-300x75.png 300w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-768x192.png 768w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-150x37.png 150w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9-1536x383.png 1536w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/C65E7120-4C0F-483A-9BCF-30E20CB241D9.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>index.js: index.html:<\/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-2333","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/comments?post=2333"}],"version-history":[{"count":22,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2333\/revisions"}],"predecessor-version":[{"id":2364,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2333\/revisions\/2364"}],"wp:attachment":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/media?parent=2333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}