{"id":5594,"date":"2018-09-17T13:38:30","date_gmt":"2018-09-17T04:38:30","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5594"},"modified":"2020-05-28T13:22:30","modified_gmt":"2020-05-28T04:22:30","slug":"websocket%ea%b3%bc-web%ec%97%90%ec%84%9c%ec%9d%98-javascript%eb%a5%bc-%ed%86%b5%ed%95%9c-%eb%b0%94%ec%9d%b4%eb%84%88%eb%a6%ac-%eb%8d%b0%ec%9d%b4%ed%84%b0-%ed%86%b5%ec%8b%a0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5594","title":{"rendered":"WebSocket\uacfc Web\uc5d0\uc11c\uc758  Javascript\ub97c \ud1b5\ud55c \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130 \ud1b5\uc2e0"},"content":{"rendered":"<p>\ud06c\uc544! \uc81c\ubaa9 \ud55c\ubc88 \uc694\uc0c1\ud569\ub2c8\ub2e4. JavaScript\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubfd0\ub9cc \uc544\ub2c8\ub77c Java\ub098 \uc11c\ubc84\ub2e8(Node.js \ub4f1)\uc5d0\uc11c\ub3c4 \ud65c\uc6a9\ub418\ub2e4 \ubcf4\ub2c8&#8230; \uc5ec\ud2bc, WebSoket\uacfc \uc6f9\uc5d0\uc11c\uc758 Javascript\ub97c \ud1b5\ud55c \ud1b5\uc2e0\uc758 \uc608\ub85c Binary \ub370\uc774\ud130 \ud0c0\uc785\uc744 \uc8fc\uace0 \ubc1b\ub294 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \uc774 \uae00\uc740 \ud14d\uc2a4\ud2b8 \ud0c0\uc785\uc758 \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\ub294 <a href='http:\/\/www.gisdeveloper.co.kr\/?p=5325'>[jetty\ub97c \uc774\uc6a9\ud55c WebSocket \uc11c\ubc84 \uad6c\ud604\ud558\uae30]<\/a>\ub77c\ub294 \uae00\uc744 \uae30\ubc18\uc73c\ub85c \uc791\uc131\ub41c \uae00\uc785\ub2c8\ub2e4. <\/p>\n<p>WebSocket\uc744 \uc704\ud55c \uc11c\ubc84\ub294 jetty\ub97c \ud65c\uc6a9\ud558\uc600\uc2b5\ub2c8\ub2e4.  \uba3c\uc800 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84 \ub2e8\uc5d0 \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130\uac00\ub97c \uc804\ub2ec\ud558\ub294 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nvar buffer = new ArrayBuffer(8);\r\nvar dataview = new DataView(buffer);\r\n\r\ndataview.setInt32(0, 9438);\r\ndataview.setFloat32(4, 3224.3224);\r\n            \r\nwebSocket.send(buffer);\r\n<\/pre>\n<p>8 Bytes \ud06c\uae30\uc758 \ub370\uc774\ud130 \ub369\uc5b4\ub9ac\ub97c \ub9cc\ub4e4\uace0, \uc774 \ub369\uc5b4\ub9ac \uc548\uc5d0 Int\uc640 Float \ud0c0\uc785\uc5d0 \ub300\ud55c \uac12\uc73c\ub85c \uac01\uac01 9438\uacfc 3224.3224\ub97c \ub123\uc5b4\uc11c \uc6f9\uc18c\ucf13\uc73c\ub85c \uc804\uc1a1\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \uc804\uc1a1\ud558\uba74 \uc11c\ubc84\uac00 \ubc1b\uc544\uc57c \ud558\ub294\ub370, \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc11c\ubc84 \uce21\uc758 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n@Override\r\npublic void onWebSocketBinary(byte[] payload, int offset, int len)\r\n{\r\n    if ((outbound != null) && (outbound.isOpen()))\r\n    {\r\n        InputStream is = new ByteArrayInputStream(payload);\r\n        DataInputStream dis = new DataInputStream(is);\r\n    \t\t\r\n        try {\r\n            int v1 = dis.readInt();\r\n            float v2 = dis.readFloat();\r\n            double result = (double)v1 * (double)v2;\r\n    \t\t\t\r\n            ByteBuffer bb = ByteBuffer.allocate(8);\r\n            bb.putDouble(0, result);\r\n            outbound.getRemote().sendBytes(bb);\r\n        } catch (IOException e) {\r\n            e.printStackTrace();\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>10\ubc88\uacfc 11\ubc88\uc5d0\uc11c \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \ubcf4\ub0b8 int\uc640 float \uac12\uc744 \uc77d\uace0, \uc5c4\uccad\ub098\uac8c \ubcf5\uc7a1\ud55c \uc5f0\uc0b0\uc778 \uacf1\uc758 \uacb0\uacfc \uac12\uc744 16\ubc88 \ucf54\ub4dc\uc5d0\uc11c \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \uc804\ub2ec\ud558\uace0 \uc788\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc774\uc81c \uc544\ub798\ub294 \ub2e4\uc2dc \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84\uac00 \uacc4\uc0b0\ud55c \uc18c\uc911\ud55c \uacb0\uacfc\ub97c \ubc1b\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nwebSocket.onmessage = function (message) {\r\n    var blob = message.data;\r\n    var fileReader = new FileReader();\r\n\r\n    fileReader.onload = function (event) {\r\n        var arrayBuffer = event.target.result;\r\n        var dataview = new DataView(arrayBuffer);\r\n        var answer = dataview.getFloat64(0);\r\n\r\n        alert(\"Server> : \" + answer);\r\n    };\r\n\r\n    fileReader.readAsArrayBuffer(blob);\r\n};\r\n<\/pre>\n<p>\uc11c\ubc84\ub85c\ubd80\ud130 \ubc1b\ub294 \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130\ub294 blob \ud615\uc2dd\uc73c\ub85c \ubc1b\uc2b5\ub2c8\ub2e4. \uc774 \ub370\uc774\ud130\ub294 FileReader\ub97c \ud1b5\ud574 \uc77d\uc5b4 \ud574\uc11d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc0c1\uc73c\ub85c \uc6f9\uc18c\ucf13\uc5d0\uc11c \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\ub294 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uae00\uc744 \uc815\ub9ac\ud55c \uae00\uc774\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud06c\uc544! \uc81c\ubaa9 \ud55c\ubc88 \uc694\uc0c1\ud569\ub2c8\ub2e4. JavaScript\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubfd0\ub9cc \uc544\ub2c8\ub77c Java\ub098 \uc11c\ubc84\ub2e8(Node.js \ub4f1)\uc5d0\uc11c\ub3c4 \ud65c\uc6a9\ub418\ub2e4 \ubcf4\ub2c8&#8230; \uc5ec\ud2bc, WebSoket\uacfc \uc6f9\uc5d0\uc11c\uc758 Javascript\ub97c \ud1b5\ud55c \ud1b5\uc2e0\uc758 \uc608\ub85c Binary \ub370\uc774\ud130 \ud0c0\uc785\uc744 \uc8fc\uace0 \ubc1b\ub294 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \uc774 \uae00\uc740 \ud14d\uc2a4\ud2b8 \ud0c0\uc785\uc758 \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\ub294 [jetty\ub97c \uc774\uc6a9\ud55c WebSocket \uc11c\ubc84 \uad6c\ud604\ud558\uae30]\ub77c\ub294 \uae00\uc744 \uae30\ubc18\uc73c\ub85c \uc791\uc131\ub41c \uae00\uc785\ub2c8\ub2e4. WebSocket\uc744 \uc704\ud55c \uc11c\ubc84\ub294 jetty\ub97c \ud65c\uc6a9\ud558\uc600\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \ud074\ub77c\uc774\uc5b8\ud2b8\uac00 \uc11c\ubc84 \ub2e8\uc5d0 \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130\uac00\ub97c \uc804\ub2ec\ud558\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5594\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;WebSocket\uacfc Web\uc5d0\uc11c\uc758  Javascript\ub97c \ud1b5\ud55c \ubc14\uc774\ub108\ub9ac \ub370\uc774\ud130 \ud1b5\uc2e0&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5594","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5594"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5594\/revisions"}],"predecessor-version":[{"id":9577,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5594\/revisions\/9577"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5594"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}