{"id":5325,"date":"2018-07-23T16:33:01","date_gmt":"2018-07-23T07:33:01","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5325"},"modified":"2020-05-28T13:46:47","modified_gmt":"2020-05-28T04:46:47","slug":"jetty%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-websocket-%ec%84%9c%eb%b2%84-%ea%b5%ac%ed%98%84%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5325","title":{"rendered":"jetty\ub97c \uc774\uc6a9\ud55c WebSocket \uc11c\ubc84 \uad6c\ud604\ud558\uae30"},"content":{"rendered":"<p>\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 Servlet Container \uc774\uc678\ub3c4 \uc5ec\ub7ec\uac00\uc9c0 \uc11c\ubc84 \uae30\ub2a5\uc744 \ub0b4\uc7a5\ud560 \uc218 \uc788\ub294 jetty \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud574 WebSocket \uc11c\ubc84\ub97c \uad6c\ud604\ud558\ub294 \ucf54\ub4dc\uc5d0 \ub300\ud55c \ubf08\ub300\ub97c \uc815\ub9ac\ud55c\ub2e4. WebSocket\ub294 HTML5\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 \uae30\ub2a5\uc73c\ub85c \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294 \uc0c1\ud0dc\uc5d0\uc11c \uc0c1\ud638\uac04\uc5d0 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ub2c8 \ubc1b\uac70\ub2c8 \ud560 \uc218 \uc788\ub294 \uae30\uc220\uc774\ub2e4. WebSocket\uc740 \uadf8 \ub9c9\uac15\ud55c \ud1b5\uc2e0 \uae30\ub2a5\uc5d0 \ube44\ud574 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \ucf54\ub4dc\uac00 \ub9e4\uc6b0 \uc791\ub2e4. \uadf8\ub798\uc11c\uc778\uc9c0 \ubb54\uac00 \ubd80\uc871\ud55c \ub290\ub08c\uc774 \ub4dc\ub294\ub370, \uc77c\ub2e8 \uae30\ubcf8\uc801\uc778\uac70 \uc815\ub9ac\ud558\uace0 \ubd80\uc871\ud55c \ub290\ub08c\uc774 \ub4dc\ub294 \uc774\uc720\ub294 \ub098\uc911\uc5d0 \ud30c\uc545\ud574 \ubcf4\uc790.<\/p>\n<p>\uba3c\uc800 \uc11c\ubc84 \ub2e8\uc758 \ucf54\ub4dc\uc774\ub2e4. Server\ub97c \uad6c\ub3d9\ud558\ub294 \ud074\ub798\uc2a4\uc640 WebSocket\ub97c \ud1b5\ud574 \uc811\uc18d\ud558\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \ub098\ud0c0\ub0b4\ub294 Session \ubc94\uc704\uc758 \ud074\ub798\uc2a4\uc778\ub370, \uba3c\uc800 Server\ub97c \uad6c\ub3d9\ud558\ub294 \ud074\ub798\uc2a4\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">\r\nimport org.eclipse.jetty.server.Server;\r\nimport org.eclipse.jetty.server.handler.ContextHandler;\r\nimport org.eclipse.jetty.websocket.server.WebSocketHandler;\r\nimport org.eclipse.jetty.websocket.servlet.WebSocketServletFactory;\r\n\r\npublic class test_webSocket {\r\n    public static void main(String[] args) {\r\n        Server server = new Server(8080);\r\n\t\t\r\n        WebSocketHandler wsHandler = new WebSocketHandler() {\r\n            @Override\r\n            public void configure(WebSocketServletFactory factory) {\r\n                factory.register(MyEchoSocket.class);\r\n            };\r\n        };\r\n\r\n        ContextHandler context = new ContextHandler();\r\n        context.setContextPath(\"\/echoServer\");\r\n        context.setHandler(wsHandler);\r\n\t\t\r\n        server.setHandler(context);\r\n\r\n        try {\r\n            server.start();\r\n            server.join();\r\n        } catch (Exception e) {\r\n            e.printStackTrace();\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>\uadf8\ub9ac\uace0 \ub2e4\uc74c\uc740 \uc11c\ubc84\uc5d0 \uc811\uc18d\ud558\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8(Session \uac1d\uccb4\ub85c \uad6c\ubd84) \ub9c8\ub2e4 \uc0dd\uc131\ub418\ub294 Echo \uae30\ub2a5\uc744 \uac16\ub294 MyEchoSocket \ud074\ub798\uc2a4\uc774\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">\r\nimport org.eclipse.jetty.websocket.api.Session;\r\nimport org.eclipse.jetty.websocket.api.WebSocketListener;\r\n\r\npublic class MyEchoSocket implements WebSocketListener {\r\n    private Session outbound;\r\n\t\r\n    public MyEchoSocket() {\r\n        System.out.println(\"class loaded \" + this.getClass());\r\n    }\r\n\r\n    @Override\r\n    public void onWebSocketConnect(Session session) {\r\n        this.outbound = session;\t\t\r\n    }\r\n\r\n    @Override\r\n    public void onWebSocketError(Throwable cause)\r\n    {\r\n        cause.printStackTrace(System.err);\r\n    }\r\n\r\n    @Override\r\n    public void onWebSocketText(String message)\r\n    {\r\n        if ((outbound != null) && (outbound.isOpen()))\r\n        {\r\n            String echoMessage = outbound.hashCode() + \" : \" + message;\r\n            outbound.getRemote().sendString(echoMessage, null);\r\n        }\r\n    }\r\n\r\n    @Override\r\n    public void onWebSocketBinary(byte[] payload, int offset, int len)\r\n    {\r\n        \/\/.\r\n    }\r\n\r\n    @Override\r\n    public void onWebSocketClose(int statusCode, String reason)\r\n    {    \t\r\n    \tSystem.out.println(\"Close, statusCode = \" + statusCode + \", reasone = \" + reason);\r\n        this.outbound = null;\r\n    }\t\r\n}\r\n<\/pre>\n<p>\uc694\uc998 \uc6f9\uc774 \uadf8\ub807\ub4ef\uc774 WebSocket \uae30\uc220\uc740 Binary \ub370\uc774\ud130\ub3c4 \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \uc911\uc694\ud55c \uac83\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud558\ub098\uac00 \uc811\uc18d\uc744 \ud558\uba74 \uc704\uc758 \ud074\ub798\uc2a4\uac00 \ub9e4\ubc88 \uc0dd\uc131\ub41c\ub2e4\ub294 \uac83\uc774\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 Session \uac1d\uccb4\ub97c \ud1b5\ud574 \ub098\ud0c0\ub0b4\uc9c0\uba70, \uc774 \uac1d\uccb4\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\ub2e4.<\/p>\n<p>\uc11c\ubc84\ub97c \uc0b4\ud3b4\ubd24\uc73c\ub2c8, \uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74..<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <title><\/title>\r\n<\/head>\r\n<body style=\"margin: 35px\">\r\n    <form>\r\n        <input id=\"messageField\" type=\"text\" \/>\r\n        <input onclick=\"sendMsg();\" value=\"send\" type=\"button\" \/>\r\n    <\/form>\r\n\r\n    <div id=\"msg-box\" style=\"width:500px;height:400px;background:#eee;overflow:auto;margin-top:5px;\"><\/div>\r\n\r\n    <script>\r\n        ...\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<p>\uc704\uc758 13\ubc88 \ubd80\ubd84\uc5d0 \ub4e4\uc5b4\uac00\ub294 js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n        var webSocket = new WebSocket(\"ws:\/\/localhost:8080\/echoServer\/\");\r\n        var msgField = document.getElementById(\"messageField\");\r\n        var divMsg = document.getElementById(\"msg-box\");\r\n\r\n        function sendMsg() {\r\n            var msgToSend = msgField.value;\r\n\r\n            webSocket.send(msgToSend);\r\n\r\n            divMsg.innerHTML += \"<div style='color:red'>Client> \" + msgToSend + \"<\/div>\";\r\n\r\n            msgField.value = \"\";\r\n        }\r\n\r\n        webSocket.onmessage = function (message) {\r\n            divMsg.innerHTML += \"Server> : \" + message.data;\r\n        }\r\n\r\n        webSocket.onopen = function () {\r\n            alert(\"connection opened\");\r\n        }\r\n\r\n        webSocket.onclose = function () {\r\n            alert(\"connection closed\");\r\n        }\r\n\r\n        webSocket.onerror = function (message) {\r\n            alert(\"error: \" + message);\r\n        }\r\n<\/pre>\n<p>\uc11c\ubc84\ub97c \uae30\ub3d9\ud55c \ub4a4, \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc2e4\ud589\ud558\uace0 \uba54\uc138\uc9c0\ub97c \ub0a0\ub9ac\uba74, \ud574\ub2f9 \uba54\uc138\uc9c0\uac00 \uba54\uc544\ub9ac\ub85c \ub3cc\uc544\uc624\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/07\/websocket.png\" alt=\"\" width=\"1375\" height=\"1180\" class=\"aligncenter size-full wp-image-5327\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 Servlet Container \uc774\uc678\ub3c4 \uc5ec\ub7ec\uac00\uc9c0 \uc11c\ubc84 \uae30\ub2a5\uc744 \ub0b4\uc7a5\ud560 \uc218 \uc788\ub294 jetty \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud574 WebSocket \uc11c\ubc84\ub97c \uad6c\ud604\ud558\ub294 \ucf54\ub4dc\uc5d0 \ub300\ud55c \ubf08\ub300\ub97c \uc815\ub9ac\ud55c\ub2e4. WebSocket\ub294 HTML5\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 \uae30\ub2a5\uc73c\ub85c \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294 \uc0c1\ud0dc\uc5d0\uc11c \uc0c1\ud638\uac04\uc5d0 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ub2c8 \ubc1b\uac70\ub2c8 \ud560 \uc218 \uc788\ub294 \uae30\uc220\uc774\ub2e4. WebSocket\uc740 \uadf8 \ub9c9\uac15\ud55c \ud1b5\uc2e0 \uae30\ub2a5\uc5d0 \ube44\ud574 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \ucf54\ub4dc\uac00 \ub9e4\uc6b0 \uc791\ub2e4. \uadf8\ub798\uc11c\uc778\uc9c0 \ubb54\uac00 \ubd80\uc871\ud55c \ub290\ub08c\uc774 \ub4dc\ub294\ub370, \uc77c\ub2e8 \uae30\ubcf8\uc801\uc778\uac70 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5325\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;jetty\ub97c \uc774\uc6a9\ud55c WebSocket \uc11c\ubc84 \uad6c\ud604\ud558\uae30&#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":[105,60,88],"tags":[],"class_list":["post-5325","post","type-post","status-publish","format-standard","hentry","category-html5","category-java","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5325","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=5325"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5325\/revisions"}],"predecessor-version":[{"id":9590,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5325\/revisions\/9590"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5325"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}