{"id":4668,"date":"2022-02-06T12:45:37","date_gmt":"2022-02-06T03:45:37","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=4668"},"modified":"2024-10-12T12:09:59","modified_gmt":"2024-10-12T03:09:59","slug":"websocket-2","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=4668","title":{"rendered":"WebSocket with NodeJS"},"content":{"rendered":"<h1>WebSocket with NodeJS<\/h1>\n<p><a href=\"https:\/\/curryyou.tistory.com\/348\">\ucc38\uc870<\/a><\/p>\n<h2>\ud2b9\uc9d5<\/h2>\n<p>http \ud1b5\uc2e0 \uae30\ubc18\uc758 \uc2e4\uc2dc\uac04 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uc704\ud55c \ud504\ub85c\ud1a0\ucf5c\uc774\ub2e4.<\/p>\n<p>\uc9c0\uc18d\uc801\uc778 \uc5f0\uacb0\ub85c \ucc44\ud305\ub4f1\uc758 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc774 \uac00\ub2a5\ud558\ub2e4.<\/p>\n<p>\ucc98\uc74c \uc5f0\uacb0\uc2dc\uc5d0\ub294 http(s) \ud1b5\uc2e0\uc744 \uc774\uc6a9\ud574 \uc5f0\uacb0 \ubc0f \uc778\uc99d \uc218\ud589 \ud6c4, ws(s) \ud1b5\uc2e0\uc744 \uc218\ud589\ud55c\ub2e4.<\/p>\n<h2>\uad6c\ud604<\/h2>\n<h3>nodejs<\/h3>\n<pre><code class=\"language-bash\">npm install express\nnpm install ws<\/code><\/pre>\n<p>app.js<\/p>\n<pre><code class=\"language-javascript\">const path = require(&quot;path&quot;);\nconst express = require(&#039;express&#039;);\n\n\/\/ ========================================================\n\/\/ Web Server\nconst app = express();\n\napp.use(&quot;\/&quot;, (req, res)=&gt;{\n    res.sendFile(path.join(__dirname, &#039;.\/index.html&#039;));\n})\n\nconst HTTPServer = app.listen(30001, ()=&gt;{\n    console.log(&quot;Server is open at port:30001&quot;);\n});\n\n\/\/ ========================================================\n\/\/ WebSocekt Server\nconst wsModule = require(&#039;ws&#039;);\n\nconst webSocketServer = new wsModule.Server({\n        server: HTTPServer, \/\/ WebSocket\uc11c\ubc84 HTTP\uc11c\ubc84 \uc9c0\uc815\n        \/\/ port: 30002      \/\/ \ubcc4\ub3c4 ws(s) \ud3ec\ud2b8 \ud560\ub2f9 \uac00\ub2a5\n    }\n);\n\n\/\/ ========================================================\n\/\/ WebSocket Server Event\nwebSocketServer.on(&#039;connection&#039;, (ws, request)=&gt;{\n\n    \/\/ ====================================================\n    \/\/ event : connection\n    const ip = request.headers[&#039;x-forwarded-for&#039;] || request.connection.remoteAddress;\n    console.log(`\uc0c8\ub85c\uc6b4 \ud074\ub77c\uc774\uc5b8\ud2b8[${ip}] \uc811\uc18d`);\n\n    if(ws.readyState === ws.OPEN){\n        ws.send(`\ud074\ub77c\uc774\uc5b8\ud2b8[${ip}] \uc811\uc18d\uc744 \ud658\uc601\ud569\ub2c8\ub2e4 from \uc11c\ubc84`);\n    }\n\n    \/\/ ====================================================\n    \/\/ event : message\n    ws.on(&#039;message&#039;, (msg)=&gt;{\n        console.log(`\ud074\ub77c\uc774\uc5b8\ud2b8[${ip}]\uc5d0\uac8c \uc218\uc2e0\ud55c \uba54\uc2dc\uc9c0 : ${msg}`);\n        ws.send(&#039;\uba54\uc2dc\uc9c0 \uc798 \ubc1b\uc558\uc2b5\ub2c8\ub2e4! from \uc11c\ubc84&#039;)\n    })\n\n    \/\/ ====================================================\n    \/\/ event : error\n    ws.on(&#039;error&#039;, (error)=&gt;{\n        console.log(`\ud074\ub77c\uc774\uc5b8\ud2b8[${ip}] \uc5f0\uacb0 \uc5d0\ub7ec\ubc1c\uc0dd : ${error}`);\n    })\n\n    \/\/ ====================================================\n    \/\/ event : close\n    ws.on(&#039;close&#039;, ()=&gt;{\n        console.log(`\ud074\ub77c\uc774\uc5b8\ud2b8[${ip}] \uc6f9\uc18c\ucf13 \uc5f0\uacb0 \uc885\ub8cc`);\n    })\n});<\/code><\/pre>\n<p>index.html<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\uc6f9\uc18c\ucf13&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;\uc6f9\uc18c\ucf13 \ud14c\uc2a4\ud2b8&lt;\/h1&gt;\n\n    &lt;button id=&quot;btn_send&quot;&gt;\uba54\uc2dc\uc9c0 \uc804\uc1a1&lt;\/button&gt;\n    &lt;button id=&quot;btn_close&quot;&gt;\uc5f0\uacb0 \ub04a\uae30&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n    \/\/ ====================================================\n    \/\/ connect\n    const webSocket = new WebSocket(&quot;ws:\/\/localhost:30001&quot;);\n\n    \/\/ ====================================================\n    \/\/ on open\n    webSocket.onopen = () =&gt; {\n        console.log(&quot;\uc6f9\uc18c\ucf13\uc11c\ubc84\uc640 \uc5f0\uacb0 \uc131\uacf5&quot;);\n    };\n\n    \/\/ ====================================================\n    \/\/ receive message\n    webSocket.onmessage = function (event) {\n        console.log(`\uc11c\ubc84 \uc6f9\uc18c\ucf13\uc5d0\uac8c \ubc1b\uc740 \ub370\uc774\ud130: ${event.data}`);\n    }\n\n    \/\/ ====================================================\n    \/\/ on close\n    webSocket.onclose = function() {\n        console.log(&quot;\uc11c\ubc84 \uc6f9\uc18c\ucf13 \uc5f0\uacb0 \uc885\ub8cc&quot;);\n    }\n\n    \/\/ ====================================================\n    \/\/ on error\n    webSocket.onerror = function(event) {\n        console.log(event)\n    }\n\n    let count = 1;\n    document.getElementById(&quot;btn_send&quot;).onclick = function() {\n        if(webSocket.readyState === webSocket.OPEN) {\n            \/\/ ============================================\n            \/\/ send\n            webSocket.send(`\uc99d\uac00\ud558\ub294 \uc22b\uc790\ub97c \ubcf4\ub0c5\ub2c8\ub2e4 =&gt; ${count}`);\n            count++;\n        }else{\n            alert(&quot;\uc5f0\uacb0\ub41c \uc6f9\uc18c\ucf13 \uc11c\ubc84\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.&quot;);\n        }\n    }\n\n    document.getElementById(&quot;btn_close&quot;).onclick = function() {\n        if(webSocket.readyState === webSocket.OPEN) {\n            \/\/ ============================================\n            \/\/ close\n            webSocket.close();\n        }else{\n            alert(&quot;\uc5f0\uacb0\ub41c \uc6f9\uc18c\ucf13 \uc11c\ubc84\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.&quot;);\n        }\n    }\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<pre><code class=\"language-bash\">node .\\app.js<\/code><\/pre>\n<p><a href=\"http:\/\/localhost:30001\/index.html\">http:\/\/localhost:30001\/index.html<\/a> \ub85c \uc811\uc18d\ud55c\ub2e4.<\/p>\n<h3>wss<\/h3>\n<p><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=2585\">\uc5ec\uae30<\/a> \ub97c \ucc38\uc870\ud558\uc5ec \uc778\uc99d\uc11c\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n<pre><code class=\"language-javascript\">var path = require(&quot;path&quot;);\nvar express = require(&#039;express&#039;);\nvar https = require(&#039;https&#039;);\nvar fs = require(&#039;fs&#039;);\n\nvar options = {\n    key: fs.readFileSync(&#039;c:\/dev\/ssl\/server.key&#039;),\n    cert: fs.readFileSync(&#039;c:\/dev\/ssl\/server.crt&#039;)\n};\n\n\/\/ ========================================================\n\/\/ Web Server\nvar app = express();\n\napp.use(&quot;\/&quot;, (req, res)=&gt;{\n    res.sendFile(path.join(__dirname, &#039;.\/index.html&#039;));\n});\n\nvar HTTPServer = https.createServer(options, app).listen(30001, ()=&gt;{\n    console.log(&quot;Server is open at port:30001&quot;);\n});\n\n......<\/code><\/pre>\n<pre><code class=\"language-javascript\">const webSocket = new WebSocket(&quot;wss:\/\/localhost:30001&quot;);<\/code><\/pre>\n<p>\uc11c\ubc84 https \uad6c\uc131 \ud6c4, \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c wss \ub85c protocol \ub9cc \ubcc0\uacbd\ud558\ub294 \uac83\uc73c\ub85c \uc124\uc815\uc774 \ub05d\ub09c\ub2e4.<\/p>\n<h2>\uc790\uc138\ud788 \ubcf4\uae30<\/h2>\n<p>\uc544\ub798 \uc774\ubbf8\uc9c0\ub294 \ud06c\ub86c F12 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc774\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.skyer9.pe.kr\/wordpress\/wp-content\/uploads\/2022\/02\/2022-02-06-01.png\" alt=\"\" \/><\/p>\n<h3>Request<\/h3>\n<ul>\n<li>\n<p>Origin: <a href=\"http:\/\/localhost:30001\">http:\/\/localhost:30001<\/a><\/p>\n<p>http \uc5d0\uc11c \uc791\ub3d9\ud558\uace0 \uc788\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/li>\n<li>\n<p>Connection: Upgrade, Upgrade: websocket<\/p>\n<p>Request(\uc694\uccad) \uc774 Connection \uc740 Upgrade \uc774\uba70, websocket \uc73c\ub85c\uc758 Request \uc784\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n<\/li>\n<li>\n<p>Sec-WebSocket-Key: mTuFxS6DMwJM5mZdX4Unqw==<\/p>\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc804\uc1a1\ud558\ub294 \uc778\uc99d\ud0a4\uc774\ub2e4.<\/p>\n<\/li>\n<\/ul>\n<h3>Response<\/h3>\n<ul>\n<li>\n<p>Connection: Upgrade, Upgrade: websocket<\/p>\n<p>Connection \uc774 websocket \uc73c\ub85c Upgrade \ub418\uc5c8\uc74c\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n<\/li>\n<li>\n<p>Sec-WebSocket-Accept: Bydyccj7Nx7\/rGF3r5eJDJ0hIYE=<\/p>\n<p>\ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc804\uc1a1\ud55c \uc778\uc99d\ud0a4\uc5d0 \ub300\ud55c Response Key \uc774\ub2e4.<\/p>\n<\/li>\n<\/ul>\n<h3>General<\/h3>\n<ul>\n<li>\n<p>Request URL: ws:\/\/localhost:30001\/<\/p>\n<p>\ucd5c\uc885\uc801\uc73c\ub85c ws \ud504\ub85c\ud1a0\ucf5c\ub85c \uc804\ud658\ub418\uc5c8\uace0, \ub354 \uc774\uc0c1 \ud06c\ub86c\uc740 \ub370\uc774\ud0c0\ub97c \ud45c\uc2dc\ud574 \uc8fc\uc9c0 \uc54a\ub294\ub2e4.<br \/>\n(http \ud504\ub85c\ud1a0\ucf5c\uc774 \uc5c6\uc73c\ubbc0\ub85c&#8230;)<\/p>\n<\/li>\n<\/ul>\n<h3>ws \uc811\uc18d \uc774\ud6c4\uc5d0\ub294?<\/h3>\n<p>ws \ud504\ub85c\ud1a0\ucf5c \ubcc0\ud658 \uc774\ud6c4\uc5d0\ub294 0x00 ~ 0xFF \uc0ac\uc774\uc5d0 UTF8 \ub370\uc774\ud0c0(\ud14d\uc2a4\ud2b8 or \ubc14\uc774\ub108\ub9ac) \ub97c \uc804\uc1a1\ud55c\ub2e4\ub294 \uaddc\uc57d \uc774\uc678\uc5d0 \uc138\ubd80 \uaddc\uc57d\uc774 \uc5c6\ub2e4.<\/p>\n<p>\uc989, \uc774\ubbf8\uc9c0 \ub610\ub294 \ub3d9\uc601\uc0c1\uc744 \ubcf4\ub0b4\uace0 \uc2f6\uc73c\uba74 \uc790\uccb4\uc801\uc73c\ub85c protocol \uc744 \uc815\ud558\uace0,<br \/>\n\uadf8 protocol \uc5d0 \ub530\ub77c \ub370\uc774\ud0c0\ub97c \uc804\uc1a1\ud558\uace0 \uc218\uc2e0\ud558\uac8c \ub41c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebSocket with NodeJS \ucc38\uc870 \ud2b9\uc9d5 http \ud1b5\uc2e0 \uae30\ubc18\uc758 \uc2e4\uc2dc\uac04 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uc704\ud55c \ud504\ub85c\ud1a0\ucf5c\uc774\ub2e4. \uc9c0\uc18d\uc801\uc778 \uc5f0\uacb0\ub85c \ucc44\ud305\ub4f1\uc758 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc774 \uac00\ub2a5\ud558\ub2e4. \ucc98\uc74c \uc5f0\uacb0\uc2dc\uc5d0\ub294 http(s) \ud1b5\uc2e0\uc744 \uc774\uc6a9\ud574 \uc5f0\uacb0 \ubc0f \uc778\uc99d \uc218\ud589 \ud6c4, ws(s) \ud1b5\uc2e0\uc744 \uc218\ud589\ud55c\ub2e4. \uad6c\ud604 nodejs npm install express npm install ws app.js const path = require(&quot;path&quot;); const express = require(&#039;express&#039;); \/\/ ======================================================== \/\/ Web Server const\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=4668\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-4668","post","type-post","status-publish","format-standard","hentry","category-linux"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4668"}],"version-history":[{"count":12,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4668\/revisions"}],"predecessor-version":[{"id":9486,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4668\/revisions\/9486"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}