{"id":3961,"date":"2023-07-09T21:18:23","date_gmt":"2023-07-09T12:18:23","guid":{"rendered":"https:\/\/attacktube.com\/?p=3961"},"modified":"2023-07-23T15:53:29","modified_gmt":"2023-07-23T06:53:29","slug":"%e3%80%90node-js%e3%80%91socket-io-%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%b3%e3%83%bc%e3%83%892%ef%bd%9e%e8%b6%85%e7%b0%a1%e6%98%93%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa","status":"publish","type":"post","link":"https:\/\/attacktube.com\/?p=3961","title":{"rendered":"\u3010Node.js\u3011Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e(room\u3092\u4f7f\u3046)"},"content":{"rendered":"\n<p>Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e<br>\u3053\u306e\u30b3\u30fc\u30c9\u306froom\u3092\u4f7f\u3046\u4f8b\u3067\u3042\u308b\u3002<br>Socket.IO\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306b\u306f\u3001HTTP\u30b5\u30fc\u30d0\u30fc\u3092\u7acb\u3066\u3066Socket.IO\u3092\u7d71\u5408\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<br>\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-3461056110605997\" crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3461056110605997\" data-ad-slot=\"3137443461\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<br>\n\n\n\n<p>index.html<\/p>\n\n\n\n<pre><code>\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n\n&lt;head&gt;\n  &lt;title&gt;Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;h1&gt;Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e&lt;\/h1&gt;\n\n  http:\/\/192.168.2.100:3000\/?code=100a\n  &lt;br&gt;\n  code=100a\u306e\u3088\u3046\u306b\u30af\u30a8\u30ea\u3092\u4ed8\u3051\u3066\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\n  \u30af\u30a8\u30ea\u306f\u91cd\u8907\u3057\u306a\u3044\u3082\u306e\u3068\u3059\u308b\u3002\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;handlename&quot; placeholder=&quot;\u540d\u524d&quot;&gt;\n  &lt;\/div&gt;\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;roomInput&quot; placeholder=&quot;\u30eb\u30fc\u30e0\u540d&quot;&gt;\n    &lt;button onclick=&quot;joinRoom()&quot;&gt;\u30eb\u30fc\u30e0\u306b\u53c2\u52a0&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;messageInput&quot; placeholder=&quot;\u30e1\u30c3\u30bb\u30fc\u30b8&quot;&gt;\n    &lt;button onclick=&quot;sendMessage()&quot;&gt;\u9001\u4fe1&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;ul id=&quot;messageList&quot;&gt;&lt;\/ul&gt;\n\n  &lt;script src=&quot;\/socket.io\/socket.io.js&quot;&gt;&lt;\/script&gt;\n  &lt;script&gt;\n  &lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n\n&lt;head&gt;\n  &lt;title&gt;Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u8d85\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;h1&gt;Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u8d85\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e&lt;\/h1&gt;\n\n  http:\/\/192.168.2.100:3000\/?code=100a\n  &lt;br&gt;\n  code=100a\u306e\u3088\u3046\u306b\u30af\u30a8\u30ea\u3092\u4ed8\u3051\u3066\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\n  \u30af\u30a8\u30ea\u306f\u91cd\u8907\u3057\u306a\u3044\u3082\u306e\u3068\u3059\u308b\u3002\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;handlename&quot; placeholder=&quot;\u540d\u524d&quot;&gt;\n  &lt;\/div&gt;\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;roomInput&quot; placeholder=&quot;\u30eb\u30fc\u30e0\u540d&quot;&gt;\n    &lt;button onclick=&quot;joinRoom()&quot;&gt;\u30eb\u30fc\u30e0\u306b\u53c2\u52a0&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;div&gt;\n    &lt;input type=&quot;text&quot; id=&quot;messageInput&quot; placeholder=&quot;\u30e1\u30c3\u30bb\u30fc\u30b8&quot;&gt;\n    &lt;button onclick=&quot;sendMessage()&quot;&gt;\u9001\u4fe1&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;ul id=&quot;messageList&quot;&gt;&lt;\/ul&gt;\n\n  &lt;script src=&quot;\/socket.io\/socket.io.js&quot;&gt;&lt;\/script&gt;\n  &lt;script&gt;\n\n    \/\/ key\u304csocketID,\u5024\u304ccode\n    let socketID_code_c = new Map();\n    \/\/ key\u304ccode,\u5024\u304croom\n    let code_room_c = new Map();\n    \/\/ key\u304ccode,\u5024\u304chandlename\n    let code_handlename_c = new Map();\n\n    const socket = io();\n\n    \/\/ \u30eb\u30fc\u30e0\u306b\u53c2\u52a0\n    function joinRoom() {\n\n      let handlename = document.getElementById(&#039;handlename&#039;).value;\n      handlename = handlename === &#039;&#039; ? &#039;\u540d\u7121\u3057\u3055\u3093&#039; : handlename;\n\n      let room = document.getElementById(&#039;roomInput&#039;).value;\n\n      const searchParams = new URLSearchParams(location.search);\n\n      const code = searchParams.get(&quot;code&quot;);\n\n      if (searchParams !== null &amp;&amp; code !== null &amp;&amp; room !== &#039;&#039;) {\n\n        \/\/ \u30b5\u30fc\u30c1\u60c5\u5831\u306e\u305d\u308c\u305e\u308c\u306e\u30ad\u30fc\u306b\u5bfe\u5fdc\u3059\u308b\u5024\u3092\u3001\n        \/\/ URLSearchParams\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306eget()\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u53d6\u5f97\u53ef\u80fd\u3067\u3042\u308b\u3002\n        console.log(&quot;code = &quot; + searchParams.get(&quot;code&quot;)); \/\/ URLUtils.searchParams\n\n        socket.emit(&#039;joinRoom&#039;, {\n          room,\n          code,\n          handlename\n        });\n\n      }\n\n    }\n\n    \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\n    function sendMessage() {\n\n      const room = document.getElementById(&#039;roomInput&#039;).value;\n\n      const searchParams = new URLSearchParams(location.search);\n\n      let code = searchParams.get(&quot;code&quot;);\n\n      if (searchParams !== null &amp;&amp; code !== null) {\n        const room = document.getElementById(&#039;roomInput&#039;).value;\n        const message = document.getElementById(&#039;messageInput&#039;).value;\n        socket.emit(&#039;sendMessage&#039;, {\n          room,\n          message,\n          code\n        });\n      }\n\n    }\n\n    \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\n    socket.on(&#039;receiveMessage&#039;, (data) =&gt; {\n\n      const messageList = document.getElementById(&#039;messageList&#039;);\n      \/\/ \u65b0\u3057\u3044li\u8981\u7d20\u3092\u4f5c\u6210\u3059\u308b\u3002li\u8981\u7d20\u306f\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30ea\u30b9\u30c8\u30a2\u30a4\u30c6\u30e0\u3068\u3057\u3066\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u3002\n      const li = document.createElement(&#039;li&#039;);\n\n      const {\n        message,\n        code,\n        socketID\n      } = data\n      console.log(message + &quot; &quot; + code);\n\n      console.log(&quot;socketID_code_c.get(&quot; + socketID + &quot;) = &quot; + socketID_code_c.get(socketID));\n      console.log(&quot;code_room_c.get(&quot; + code + &quot;) = &quot; + code_room_c.get(code));\n      console.log(&quot;code_handlename_c.get(&quot; + code + &quot;) = &quot; + code_handlename_c.get(code));\n\n      li.innerHTML = code_handlename_c.get(code) + &quot;@chat\\n&lt;br&gt;&quot; + message;\n      messageList.appendChild(li);\n\n    });\n\n    \/\/ socketID\u7b49\u3092\u53d7\u4fe1\n    socket.on(&#039;receive_socketID&#039;, (data) =&gt; {\n\n      console.log(data);\n\n      const {\n        socketID,\n        room,\n        code,\n        handlename,\n        socketID_codeObject,\n        code_roomObject,\n        code_handlenameObject\n      } = data;\n\n      console.log(&quot;socketID = &quot; + socketID);\n      console.log(&quot;code = &quot; + code);\n      console.log(&quot;room = &quot; + room);\n\n      code_handlename_c = new Map(Object.entries(code_handlenameObject));\n      code_room_c = new Map(Object.entries(code_roomObject));\n      socketID_code_c = new Map(Object.entries(socketID_codeObject));\n\n      console.log(&quot;code_handlename_c = &quot; + code_handlename_c.get(code));\n      console.log(&quot;code_room_c = &quot; + code_room_c.get(code));\n      console.log(&quot;socketID_code_c = &quot; + socketID_code_c.get(socketID));\n\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>server_http.js<\/p>\n\n\n\n<pre><code>\nconst hostname = &#039;192.168.2.100&#039;;\nconst port = 3000;\n\nconst http = require(&#039;http&#039;);\nconst socketIO = require(&#039;socket.io&#039;);\nconst fs = require(&#039;fs&#039;);\n\nconst server = http.createServer((req, res) =&gt; {\n  fs.readFile(&#039;.\/index.html&#039;, &#039;utf-8&#039;, (error, data) =&gt; {\n    res.writeHead(200, {\n      &#039;Content-Type&#039;: &#039;text\/html;charset=utf-8&#039;\n    });\n    res.write(data);\n    res.end();\n  })\n});\n\nconst io = require(&#039;socket.io&#039;)(server, {});\n\n\/\/ \u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\nserver.listen(port, hostname, () =&gt; {\n  console.log(`Server running at http:\/\/${hostname}:${port}\/`);\n});\n\n\/\/ key\u304csocketID,value\u304ccode\nlet socketID_code = new Map();\n\/\/ key\u304ccode,value\u304croom\nlet code_room = new Map();\n\/\/ key\u304ccode,value\u304chandlename\nlet code_handlename = new Map();\n\n\/\/ \u63a5\u7d9a\u6642\u306e\u51e6\u7406\nio.on(&#039;connection&#039;, (socket) =&gt; {\n  console.log(`\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306eID: ${socket.id} \u304c\u63a5\u7d9a\u3057\u307e\u3057\u305f\u3002`);\n\n  \/\/ \u30eb\u30fc\u30e0\u3078\u306e\u53c2\u52a0\n  socket.on(&#039;joinRoom&#039;, (data) =&gt; {\n    const {\n      room,\n      code,\n      handlename\n    } = data;\n    socket.join(room);\n    console.log(`\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306eID: ${socket.id}, code = ${code}, \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u30eb\u30fc\u30e0 ${room} \u306b\u53c2\u52a0\u3057\u307e\u3057\u305f\u3002`);\n    const socketID = socket.id;\n\n    socketID_code.set(socketID, code);\n    code_room.set(code, room);\n    code_handlename.set(code, handlename);\n\n    const socketID_codeObject = Object.fromEntries(socketID_code.entries());\n    const code_roomObject = Object.fromEntries(code_room.entries());\n    const code_handlenameObject = Object.fromEntries(code_handlename.entries());\n\n    io.to(room).emit(&#039;receive_socketID&#039;, {\n      socketID,\n      room,\n      code,\n      handlename,\n      socketID_codeObject,\n      code_roomObject,\n      code_handlenameObject\n    }); \/\/ \u540c\u3058\u30eb\u30fc\u30e0\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\n\n  });\n\n  \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u9001\u4fe1\n  socket.on(&#039;sendMessage&#039;, (data) =&gt; {\n    const {\n      room,\n      message,\n      code\n    } = data;\n    const socketID = socket.id;\n    console.log(`code = ${code}, \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\uff08\u30eb\u30fc\u30e0 ${room}\uff09: ${message}`);\n\n    \/\/ \u540c\u3058\u30eb\u30fc\u30e0\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1 \u65b9\u6cd5(1)\n    \/\/io.to(room).emit(&#039;receiveMessage&#039;, message); \n\n    \/\/ \u540c\u3058\u30eb\u30fc\u30e0\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1 \u65b9\u6cd5(2) \u3053\u3053\u304b\u3089\n    \/\/ \u30eb\u30fc\u30e0\u5185\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306eID\u30ea\u30b9\u30c8\u3092\u53d6\u5f97\n    \/\/ clients\u306fmap\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u98a8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\n    const clients = io.sockets.adapter.rooms.get(room);\n\n    console.log(`room = ${room}, clients.size = ${clients.size}`);\n\n    if (clients) {\n      clients.forEach(clientId =&gt; {\n        console.log(`${room} \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306eID: clientId = ${clientId}, code = ${socketID_code.get(clientId)}`)\n        \/\/ \u5404\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u500b\u5225\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\n        io.to(clientId).emit(&#039;receiveMessage&#039;, {\n          message,\n          code,\n          socketID\n        });\n      });\n    }\n\n    \/\/ \u540c\u3058\u30eb\u30fc\u30e0\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1 \u65b9\u6cd5(2) \u3053\u3053\u307e\u3067\n\n  });\n\n  \/\/ \u5207\u65ad\u6642\u306e\u51e6\u7406\n  socket.on(&#039;disconnect&#039;, () =&gt; {\n    console.log(`\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u304c\u5207\u65ad\u3057\u307e\u3057\u305f\u3002${socket.id}`);\n  });\n\n});\n<\/code><\/pre>\n\n\n\n<script type=\"text\/javascript\">\njQuery(function($){\n$(\".jp-video\").hide();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Socket.IO \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9(2)\uff5e\u7c21\u6613\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\uff5e\u3053\u306e\u30b3\u30fc\u30c9\u306froom\u3092\u4f7f\u3046\u4f8b\u3067\u3042\u308b\u3002Socket.IO\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306b\u306f\u3001HTTP\u30b5\u30fc\u30d0\u30fc\u3092\u7acb\u3066\u3066Socket.IO\u3092\u7d71\u5408\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3961","post","type-post","status-publish","format-standard","hentry","category-node-js"],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/3961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3961"}],"version-history":[{"count":8,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/3961\/revisions"}],"predecessor-version":[{"id":4257,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/3961\/revisions\/4257"}],"wp:attachment":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}