{"componentChunkName":"component---src-templates-blog-post-js","path":"/nodejs/socket.io/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"ce1374a5-2c22-5409-8546-b4236f605a99","excerpt":"💎 목차 설치를 하며 코드를 보며 생각 해보며 ⚙️ 설치를 하며 ⬆ 목차 😳 코드를 보며 ▸ event \n  소켓 연결  소켓 연결 해지  소켓 에러 ▸ data \n \n  데이터 전송  데이터 수신 ▸ broadcast \n  자신을 제외한 전체에게 데이터 전송 ⬆ 목차 🤔 생각해 보며 ▸ server \n ▸ client \n \n 해당 소스는 실시간 채팅 예시 소스입니다. 에서 data에 type을 지정하여 css를 컨트롤 를 통한 데이터 전송 컨트롤 ⬆ 목차 출처 GitHub > socket…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.67567567567568%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABcSAAAXEgFnn9JSAAAB80lEQVQoz43Sz2vTYBwG8G8SmpQkFUVdmeCYXdcmbmxL2r1517T5YcGhO4heRHcQQQQPChYUJ8hcZ8eGyjwq9iSIIv4L3hRFV0Hnwd1kf4YI8UnWCkInvvCB8L55nzxvEgqOMcHzHPHcDYuWPxvik195chkX/cChWBAyyas59Phnnu5+MKm5YfzRdyCQfN+hsw0bN5n0Ohom10nCxiGLhyXrL6IjtPjOpOWNmJHoHxiyQT9g4fWX49T8ZJZXvxcPDpGnYP5ZEDo1tJuszjiH29GIhoYDzY6pNDto2NktsM7WqxXnzflb1qXWVyOC55Vp/hDNt9CsMXtqehvXZx78KPpLH80FHHXvP48c1lkJASOnL5cmWl+MR2tbxTlu8zmELKF5oT7Lbh7NcrW1WTAW3xvHr77KyVEU0bCtCtje0xtCHEjc4jR/26KVb3g3OIrncnKrNtW8Mq22LyZ31i4coBONATpkpHd2irRrQ6HCuDC/YAkrm4Z0521B9KuuYJfGJF3XRsHXdT0nybRPVsVBQaI92DYGLujgwBAUILvzlfF78Cke/zaUTqdJURSSZVnXNM2GGYgDrsE9WIcr0IY1eAon4X53/e+BNoSAnlFVVTnm9mMpDwwmug0noQy57lx8PdU3MJVKJS0RRqIoUiaTof8dvwHH/IASeROmTwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"logo\"\n        title=\"logo\"\n        src=\"/static/c71ec07ba412515e3b8fc0e6acb08f82/fcda8/logo.png\"\n        srcset=\"/static/c71ec07ba412515e3b8fc0e6acb08f82/12f09/logo.png 148w,\n/static/c71ec07ba412515e3b8fc0e6acb08f82/e4a3f/logo.png 295w,\n/static/c71ec07ba412515e3b8fc0e6acb08f82/fcda8/logo.png 590w,\n/static/c71ec07ba412515e3b8fc0e6acb08f82/efc66/logo.png 885w,\n/static/c71ec07ba412515e3b8fc0e6acb08f82/c83ae/logo.png 1180w,\n/static/c71ec07ba412515e3b8fc0e6acb08f82/58354/logo.png 1396w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<center><strong style=\"font-size: 20px;\">실시간</strong>으로 상호작용하는 서비스</center>\n<h2 id=\"-목차\" style=\"position:relative;\"><a href=\"#-%EB%AA%A9%EC%B0%A8\" aria-label=\" 목차 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>💎 목차</strong></h2>\n<ul>\n<li><a href=\"#%EF%B8%8F-%EC%84%A4%EC%B9%98%EB%A5%BC-%ED%95%98%EB%A9%B0\">설치를 하며</a></li>\n<li><a href=\"#-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B3%B4%EB%A9%B0\">코드를 보며</a></li>\n<li><a href=\"#-%EC%83%9D%EA%B0%81%ED%95%B4-%EB%B3%B4%EB%A9%B0\">생각 해보며</a></li>\n</ul>\n<h2 id=\"️-설치를-하며\" style=\"position:relative;\"><a href=\"#%EF%B8%8F-%EC%84%A4%EC%B9%98%EB%A5%BC-%ED%95%98%EB%A9%B0\" aria-label=\"️ 설치를 하며 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>⚙️ 설치를 하며</strong></h2>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ npm install express\n\n$ npm install http\n\n$ npm install socket.io</code></pre></div>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<h2 id=\"-코드를-보며\" style=\"position:relative;\"><a href=\"#-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B3%B4%EB%A9%B0\" aria-label=\" 코드를 보며 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>😳 코드를 보며</strong></h2>\n<h3 id=\"▸-event\" style=\"position:relative;\"><a href=\"#%E2%96%B8-event\" aria-label=\"▸ event permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ event</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 63.51351351351351%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACUklEQVQ4y52TSU7jQBRAfQCkQAIkJLbjJI4z2InJACItMohrsADEPVixAEIkhMQJOAJhwYYjILHkACAxiSkgseH1rzh005tGoqTnX79cfvWrbGtPT088Pz8zGLzy+vqVwR8GA0HGPvmcMxwf8fLygnJp6vL29oZqHx8fP0K19/d3Hh8f0ZT97OyMra0tujs77Ci2t4MobI8I8m4Qu1263aC/u7vL5uYm/X5/WLWmqjs4OCAUnsR0Cug5l5SdIm3Eccw4GX2GeCzKZMIiEk8STRgY2QIJ02I8FGJiYgJN01hZWQmEasv7+/voCZ28XyY3X8ev+dSrZWpekXqpSMVzcXJ5rJQslMmQsbNkJKYkt22bqakp1tfXubu7C4R7e3tMy2A2X8StzuNVfEpunpqSFXPknSyO62O7FbIitkWm6zqmaWJZFuFwmNXVVW5vb78Ip6fJyWSnVMKuVyj4Hgtzs1RFWHNz+G4B28ljJpMkBcMwvxFKhbmCPJR1sAyDpKAnEsR1k3gyhS5npkRKYsg9Ff8rjEWjOAWPcmOR6uICVTnDX3UfzytRrszhzc5RkAXT6fRQlBxVqvJIJMLa2tpfYa/XIzQ+TkZuGpbJTEZi2pLDT2GZOik9jilnFpVFY7HYPyRkF2NjYywvLwcv5eHhgcPDQ9rtNktLS3TaHVqLTVrNJk2JzVZrSEtQc1qj/mfe6XRoNBpsbGxwc3ODdn9/z8XFBaenpxwdHQ0/0P7xsdDnWBjm33BycsL5+TnX19fBllWpV1dXXF5e/gj1rKpO/Xq/AYe7eYLURKmwAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"1\"\n        title=\"1\"\n        src=\"/static/b83ba57a61efd18af783373a7a757409/fcda8/1.png\"\n        srcset=\"/static/b83ba57a61efd18af783373a7a757409/12f09/1.png 148w,\n/static/b83ba57a61efd18af783373a7a757409/e4a3f/1.png 295w,\n/static/b83ba57a61efd18af783373a7a757409/fcda8/1.png 590w,\n/static/b83ba57a61efd18af783373a7a757409/efc66/1.png 885w,\n/static/b83ba57a61efd18af783373a7a757409/97bfd/1.png 1078w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li><code class=\"language-text\">connect</code> 소켓 연결</li>\n<li><code class=\"language-text\">disconnect</code> 소켓 연결 해지</li>\n<li><code class=\"language-text\">error</code> 소켓 에러</li>\n</ul>\n<br />\n<h3 id=\"▸-data\" style=\"position:relative;\"><a href=\"#%E2%96%B8-data\" aria-label=\"▸ data permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ data</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.45945945945946%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABH0lEQVQoz52RsY6CQBRF+QllGVzN4m4stliGxG34GwaG7L/RUWjgH6jojC2h0ahAwxR3543uRluLk8s7vLmZgNV1HcZxxKgUlBrNsxqv+ecfHM13qNt76jmfz7AulwuGoUevRdfp7Ht0/TUN2j84mu/RbhgGUI8prKoKiZQQiYSUCeJYIBECsYgQ6SQvoghSe0ohU8Qa8kn6Y3bSNEVd16bYyrIME8fF63IFbznH3HXgaeaODdthYG8fYPYE7zMH7MWGq/doly08LFafYO4M0+kUm83mWpjnOb7Xa3D/C77PwTmHzykDBJTa8yD4d2Y2+LczPsIwRFmW5jtau90O2+0WdNNnKYoC+/0ep9MJ1uFwQNu2aJrmaej88Xg0P+UXiu2ZWJKBaw8AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/97523a4c13737db5136ffd242a3e7f2d/fcda8/2.png\"\n        srcset=\"/static/97523a4c13737db5136ffd242a3e7f2d/12f09/2.png 148w,\n/static/97523a4c13737db5136ffd242a3e7f2d/e4a3f/2.png 295w,\n/static/97523a4c13737db5136ffd242a3e7f2d/fcda8/2.png 590w,\n/static/97523a4c13737db5136ffd242a3e7f2d/efc66/2.png 885w,\n/static/97523a4c13737db5136ffd242a3e7f2d/105d8/2.png 1170w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 40.54054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABb0lEQVQoz5XRu07CUBzH8a6sRAzGcImxLW3kYr0NJMaFTYut+hIw8xoaJh5ATEhYeQlWNhiYuAzcB2Ap+XpORSXRmDh8+js5/3/+56RHWSwWLJdLNpsNnrD54uF5H3vf6f1K9q/Xa+QsRX6k2WzGdDr9yK3ZJ7Hv17b133zOUUajEY1Gg9s7m4eHR9y8LeRxRN7ZNnbe4d5xcR+fcF2XvKjtchyHXC5HpVJhtVqhdLtdyuUye+FD0tkbrGyWyzOLs0wa07rCuLjmSDdRTzJEIhH290OEQt/C4TCBQIBisch8Pkdpt9s8v7xwIApq6oRjyyJ1miIj1ufpJIamoiUMjGSaWCzmD41Go35K8XicYDBIoVBgPB6jdDod/7qGYWAKuqqiaxqaoG5T13VfIpH4wTRN/4BSqcRkMkHp9/u0Wi3q9Tqv1SrVtzeqMv+hVqvRbDaR76HIF5JXHQ6H9Ho95AF/kT27fXI9GAz8YfIfvgNr77eJNBDfSgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/08630f2c1ba34f7a506c4008cd671ee1/fcda8/3.png\"\n        srcset=\"/static/08630f2c1ba34f7a506c4008cd671ee1/12f09/3.png 148w,\n/static/08630f2c1ba34f7a506c4008cd671ee1/e4a3f/3.png 295w,\n/static/08630f2c1ba34f7a506c4008cd671ee1/fcda8/3.png 590w,\n/static/08630f2c1ba34f7a506c4008cd671ee1/efc66/3.png 885w,\n/static/08630f2c1ba34f7a506c4008cd671ee1/105d8/3.png 1170w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li><code class=\"language-text\">socket.emit(&#39;Event&#39;, data)</code> 데이터 전송</li>\n<li><code class=\"language-text\">socket.on(&#39;Event&#39;,function(data))</code> 데이터 수신</li>\n</ul>\n<br />\n<h3 id=\"▸-broadcast\" style=\"position:relative;\"><a href=\"#%E2%96%B8-broadcast\" aria-label=\"▸ broadcast permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ broadcast</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 29.72972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIUlEQVQY052PS07CUBSGuwVJjA7sgzpwYC2Vt8QF4A7UOStgG9KuhAWwDtoOcUB4JEB4jAC5fJ4WBZk6+HLy//nOyb3acrnka7tFKcVut/uDSkl6JVkp6ZQ689TP3O/3bDYbklvaarXis9cj7HaJo5AoFKJIiAmFOI7TPpYuyZHk1PklOvj9fp/kljabzXh9e+fOyZGv1HisPlMsFch7LhXBde5xCyXcnEc55+C5D3hl8cpPeKUqxWoN0zBoNpus12u0wWBAvf7C5dU1lm1jWDamZYqkYwm6foNuWuiylGRDF6zskax9SyZzQaPROLxwPB7TbrdptT4IfB/fbwn+iSA4z0fn5AXidDodkt9q8/mcyWTCcDj8N6PRiOl0ymKx4Bs9lV47Ud45vAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"4\"\n        title=\"4\"\n        src=\"/static/dd34e27c09dd264af4b028898300ebc0/fcda8/4.png\"\n        srcset=\"/static/dd34e27c09dd264af4b028898300ebc0/12f09/4.png 148w,\n/static/dd34e27c09dd264af4b028898300ebc0/e4a3f/4.png 295w,\n/static/dd34e27c09dd264af4b028898300ebc0/fcda8/4.png 590w,\n/static/dd34e27c09dd264af4b028898300ebc0/efc66/4.png 885w,\n/static/dd34e27c09dd264af4b028898300ebc0/c83ae/4.png 1180w,\n/static/dd34e27c09dd264af4b028898300ebc0/b67f3/4.png 1338w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li><code class=\"language-text\">socket.broadcast.emit(&#39;Event&#39;, data)</code> 자신을 제외한 전체에게 데이터 전송</li>\n</ul>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<h2 id=\"-생각해-보며\" style=\"position:relative;\"><a href=\"#-%EC%83%9D%EA%B0%81%ED%95%B4-%EB%B3%B4%EB%A9%B0\" aria-label=\" 생각해 보며 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>🤔 생각해 보며</strong></h2>\n<h3 id=\"▸-server\" style=\"position:relative;\"><a href=\"#%E2%96%B8-server\" aria-label=\"▸ server permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ server</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 83.78378378378379%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVQ4y6VTTU/bQBTMlUtBaeMEYsf2etfeXX8kJATagkKhP44kQv0ziDsEbpBI0CMnOEEv8A+mb7dWISqtgnoYved1djIz77ny9PSEu7s73N7e/jceHx9RMc23w0McjkcYj0Y4OBhiOBxiRP14PF4Y5s7NzQ0q5+fncOoNuJ6PeqOB1YaDVaeGD++reLe8jOUFsLKygqWlJRwfH6NyNpmAS431j9v4vL2JjV4HqZLgUYQwDBcCYwyu65aEZxP4jEMXbax3O8izFJ1Coej1EbLI/rDVasHzWmh5nu1fQ4PclYRnEFJCpSkSnUJLAZnmiFUKEZX/XhJ5ltj7N+GELKu8QG9jHVmb7Pa2kBMyLaE5gxQR2WeWbGGFEReIhABnASJSFIYBgdlzk2Xg+38l+pOQFDK6mG9sochTtFWCSKaIdJuUdxBQjs1mEx5laeC6TZurieGl/TmFnudSfhny/ie0u107GMHJaqIQk2oRxxD0nsUSMVURJ5AUR0RRvEI4QRCEUDRlrRTSREAkGlzRRSIM/Ba9DxBQBH5ZzXNIMfgvophTaMKWWYGCFGbdPtr9TbuLRgmLuLXs/rbbfNX2HKHvB7SHNGFanUxryCRGQsseJ4ndxTDwf4F6o9Ce2fMAzKgmzE+ZJhsrbXOUaQalFRSRCjP5RNrViSlTkx8vczR7KgW34JxjbW2t3MPTU/ulMFpiLkJrp1ar0fddR93Cee4dxz7b6jyfG3XVahVHR0eoXFxcYH//Kwa7u9jb+4JdqoPB4M3Y2dnByckJKg8PP/D9+hqXl5eYTqdvxmw2s/Xq6gr39/f4CYUmgH+XIa28AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"server\"\n        title=\"server\"\n        src=\"/static/73b2dae467018d07a18d534fd2c89b78/fcda8/server.png\"\n        srcset=\"/static/73b2dae467018d07a18d534fd2c89b78/12f09/server.png 148w,\n/static/73b2dae467018d07a18d534fd2c89b78/e4a3f/server.png 295w,\n/static/73b2dae467018d07a18d534fd2c89b78/fcda8/server.png 590w,\n/static/73b2dae467018d07a18d534fd2c89b78/efc66/server.png 885w,\n/static/73b2dae467018d07a18d534fd2c89b78/c83ae/server.png 1180w,\n/static/73b2dae467018d07a18d534fd2c89b78/ca3c3/server.png 1850w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<h3 id=\"▸-client\" style=\"position:relative;\"><a href=\"#%E2%96%B8-client\" aria-label=\"▸ client permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ client</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 77.70270270270271%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACUklEQVQ4y6VTS1LbQBTUGVzItmR9LWksjUYfC/MxqSQXCmV7wwW4EQUmWcANMKuwY0UV9gJTFdv7ztP4AyTlpEgWXa0ZzbTV3c/KbDbDfD7HfPYDM4J8XiyW/A4s6E6ppTw9PeH6+hoXF0Ncfv2G4eUlhsPhP+Hx8RHK3d137Hc/wPRj+GEM23Gh6zoahoFGo0TjrzDobL1ex9XVFZTRaITOQRe2H8KyLJi2TWzKQ4bRgGmaf0R5x6Y7mqbh/Pwcyu3tLfI8hxumyA8/4ejjZxx1CuwVBRhP4PkBHMeG4zbhEjcdh3gNW4qVKF1tBAu67LAYLZFB8AhZ1IIQAjxtI2Y+WBCARTF44EG0ArnHAx8t30PTdeRXbr5QWt4/lJZt0yAbBnSZnQ6jzGdjz5DPhmEueYW17beW222YDv16p4tOniL0XNheQIetZegSusz0tWgptMZvGWr1Gposgh/nEHkHaZKAk/2Eh4hisl/sIySOVrZDYnObYJZlMtSAxsbnGRhlGScpiXIkMYdIMgQiR9Pzl8W4y1K2CI6olF24jMNpeiSsyZeapm+4TqyX0BvQV/NZRmC+sv0iSKXs7h3AZgJxXiAli2XLacgQcY5Yts6Q0Lrcl62zFrwolX8Ci0TfziEJ7lHL5RyKdmeLIK0JOb2T+TFG0aQUQUBiFs2pI8vbjE0sElTrOqrqDnZUdQP1l/XLvirPVqsqarWaRKVSwdnZGZT7+3ucnp7i+PgLBoMB+v3+u9Hr9XBycoKbmxsoz8/PmEwmeHh4+C+Mx2NMp1P8BGxIgsEmEJP6AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"client 1\"\n        title=\"client 1\"\n        src=\"/static/81abb61a7bd3b89ad404543258352a1e/fcda8/client.1.png\"\n        srcset=\"/static/81abb61a7bd3b89ad404543258352a1e/12f09/client.1.png 148w,\n/static/81abb61a7bd3b89ad404543258352a1e/e4a3f/client.1.png 295w,\n/static/81abb61a7bd3b89ad404543258352a1e/fcda8/client.1.png 590w,\n/static/81abb61a7bd3b89ad404543258352a1e/efc66/client.1.png 885w,\n/static/81abb61a7bd3b89ad404543258352a1e/c83ae/client.1.png 1180w,\n/static/81abb61a7bd3b89ad404543258352a1e/d0ab7/client.1.png 1532w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 149.32432432432435%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD2UlEQVRIx6VWy04iWxT1B4zJtcOlKKj3+0VRVEFBgYDI7R70vQPjwH/y8RtOvSb6A878Bp0Z40ATNQ40mqy7TyHdaoNN9x3sVHHCWax19lr7sHB3d4fHx0c8Pz/j6enpt4rtfXh4wO3tLRZubm5wfHyMfw8OcHh4RHX4S3V0dIQD2ntycoL7+3ssnJ+fYzQcolwswFAk8DyPYrGIIsd9ryIHjpte5XIZi4uL2NzcHAOenZ5iMFxDRdbgVGvQTROOqcPSFLiGllfVNqEoCiqVCgRBeFOyLGN5eRkbGxu4vr7GwikBrv31GaoTIAhDhK4Nz7Vg0GfLdgncIHAVCm2UJOkHQLb2BvDs7Ay9Xg+yYqA1/IKs30enm6FVq2IlTVDzCZRY6qqSs2Egr5n+AJgzpDMURAmm48IguYYiQ5UEaKaTr3OlEvhy5Q3Q5H06YC7Zh+e5+XkZJFXzQji+jzCOx+xEAqEGlKlpEzD2nCq5TzKLJR5xb4Rmb4h09BXZ6DPWRhn+/meAQb+FNIlhez5Uw4QoirMZTgA/Lf8BJ6yj1hnArcUk3YRl6XBdYmyZ0CwXpuvDoGIgHwKypgh8BaETUqcjhLUImqahRKx5nskcSy3zpbzmklz4s0BnpaPZ7KDV7cM0dHjUICbvvVU+bMo3wEIBqqzC1k3oZOJ808vG14zm8uEEkDGMogaSNINOkj1Tg0oWmgY0F6AiK2Rim4A1yJII8Z28X2ZoaiYxTNBMW3Cpsy6doa1rb2wyNyBHE0agTaZuUwy1fIrIQoVYzmY32zYrKxCoIcyHOsXP9jz4vgPLD/N6z/DDLE8ANbeK7pevGI666A3a6KyNUM96ULWJdSrz2SbP8miUh1+lAaurEiTKrUiM88FAw5Ung7MjKM+VZTZgV4fgVQdRK0O92cynjul6FDsLgW/DD1xY1BxmJZ0Gx0+zzCRXiFG11UOU1NFI62hmKaKqixpVNUngOTY0lQatbswHWJZUBEmKoNFCLesjbcWU8QY6WYx66MM2jBxgrvG1whhKMjxKiRu34dcTJHUX7YyYNiNimMLygvmNzRjKNJ3b5MeUpKZZA3HSIF8KNHFK+U3IGjLJ9euazrDbhUApadNd0u1EdIYxQmIlyxJE2iBRDCU6N5FUfC9phm0IcLi6mkt2AjKyZcCljlpkH4N12/EQUATZ7WdXI9hBjQIwnt7sR2YO2E+0yNPwZBK5SX270F/eKZ4cV3x5cvl3meylpSWsr6+PAS8uLrC3t4etrS3s7u5iZ2fng9p9VeM1tmd7exv7+/u4uroa/7dhL5eXl/+rGAbD+g9VRXrjX2tQSQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"client 2\"\n        title=\"client 2\"\n        src=\"/static/1d034f4efab7004bd0335f2f916c7555/fcda8/client.2.png\"\n        srcset=\"/static/1d034f4efab7004bd0335f2f916c7555/12f09/client.2.png 148w,\n/static/1d034f4efab7004bd0335f2f916c7555/e4a3f/client.2.png 295w,\n/static/1d034f4efab7004bd0335f2f916c7555/fcda8/client.2.png 590w,\n/static/1d034f4efab7004bd0335f2f916c7555/efc66/client.2.png 885w,\n/static/1d034f4efab7004bd0335f2f916c7555/c83ae/client.2.png 1180w,\n/static/1d034f4efab7004bd0335f2f916c7555/133ae/client.2.png 1424w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li>\n<p>해당 소스는 실시간 채팅 예시 소스입니다.</p>\n<ol>\n<li><code class=\"language-text\">socket.emit(&#39;Event&#39;, data)</code>에서 data에 type을 지정하여 css를 컨트롤</li>\n<li><code class=\"language-text\">socket.broadcast(&#39;Event&#39;, data)</code>를 통한 데이터 전송 컨트롤</li>\n</ol>\n</li>\n</ul>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<br />\n<blockquote>\n<p>출처</p>\n<p><a href=\"https://github.com/bynodejs/socket.io\" target=\"_blank\">GitHub > socket.io</a></p>\n</blockquote>\n<h1 id=\"여러분의-댓글이-큰힘이-됩니다-๑̀ㅂ́و✧\" style=\"position:relative;\"><a href=\"#%EC%97%AC%EB%9F%AC%EB%B6%84%EC%9D%98-%EB%8C%93%EA%B8%80%EC%9D%B4-%ED%81%B0%ED%9E%98%EC%9D%B4-%EB%90%A9%EB%8B%88%EB%8B%A4-%E0%B9%91%CC%80%E3%85%82%CC%81%D9%88%E2%9C%A7\" aria-label=\"여러분의 댓글이 큰힘이 됩니다 ๑̀ㅂ́و✧ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>여러분의 댓글이 큰힘이 됩니다. (๑•̀ㅂ•́)و✧</h1>","frontmatter":{"title":" 실시간 통신 🗣 ▻ socket.io ","date":"September 10, 2019"}}},"pageContext":{"slug":"/nodejs/socket.io/","previous":{"fields":{"slug":"/nodejs/exceljs/"},"frontmatter":{"title":" 스프레드 시트 📊 ▻ exceljs ","category":"Node Js"}},"next":{"fields":{"slug":"/nodejs/dotenv/"},"frontmatter":{"title":" 환경변수 관리 🔒 ▻ dotenv ","category":"Node Js"}}}},"staticQueryHashes":["3128451518","3956431471"]}