{"id":35128,"date":"2023-05-28T11:30:30","date_gmt":"2023-05-28T02:30:30","guid":{"rendered":"https:\/\/8gfg.shop\/blog\/?p=35128"},"modified":"2023-05-28T11:30:30","modified_gmt":"2023-05-28T02:30:30","slug":"building-real-time-web-applications-with-spring-boot-and-websocket","status":"publish","type":"post","link":"https:\/\/8gfg.shop\/blog\/development\/building-real-time-web-applications-with-spring-boot-and-websocket","title":{"rendered":"Building Real-Time Web Applications with Spring Boot and WebSocket"},"content":{"rendered":"

\uc2a4\ud504\ub9c1 \ubd80\ud2b8\uc640 \uc6f9\uc18c\ucf13\uc744 \ud65c\uc6a9\ud55c \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\ucd95<\/h1>\n

\uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ud1b5\uc2e0\uc740 \ud604\uc7ac \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774\ub294 \uc0ac\uc6a9\uc790\uc640 \uc11c\ubc84 \uac04\uc758 \uc9c0\uc5f0 \uc2dc\uac04\uc744 \ucd5c\uc18c\ud654\ud558\uace0, \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc694\uad6c \uc0ac\ud56d\uc744 \ucda9\uc871\uc2dc\ud0a4\ub294 \ub370 \uac00\uc7a5 \uc801\ud569\ud55c \uae30\uc220 \uc911 \ud558\ub098\uac00 \uc6f9\uc18c\ucf13\uc785\ub2c8\ub2e4. \uc2a4\ud504\ub9c1 \ubd80\ud2b8\ub294 \uc774\ub7ec\ud55c \uc694\uad6c \uc0ac\ud56d\uc744 \ucda9\uc871\uc2dc\ud0a4\uae30 \uc704\ud55c \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uba70, \uc774\ub97c \uc774\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc774 \ubb38\uc11c\uc5d0\uc11c\ub294 \uc2a4\ud504\ub9c1 \ubd80\ud2b8\uc640 \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc6f9\uc18c\ucf13\uacfc \uc2a4\ud504\ub9c1 \ubd80\ud2b8\uc758 \uae30\uc220\uc801\uc778 \uc774\ud574<\/h2>\n

\uc6f9\uc18c\ucf13\uc740 HTML5\uc5d0\uc11c \uc0c8\ub86d\uac8c \ucd94\uac00\ub41c \ud504\ub85c\ud1a0\ucf5c\ub85c, \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04\uc758 \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ud1b5\uc2e0\uc774 \uac00\ub2a5\ud574\uc9d1\ub2c8\ub2e4. \uc2a4\ud504\ub9c1 \ubd80\ud2b8\ub294 \uc774\ub7ec\ud55c \uc6f9\uc18c\ucf13\uc744 \uc9c0\uc6d0\ud558\uae30 \uc704\ud574 spring-websocket<\/code>\uc774\ub77c\ub294 \ubaa8\ub4c8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n

\uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub824\uba74, \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubaa8\ub450\uc5d0\uac8c \uc6f9\uc18c\ucf13 \ud504\ub85c\ud1a0\ucf5c\uc744 \uc9c0\uc6d0\ud558\ub294 \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc2a4\ud504\ub9c1 \ubd80\ud2b8\ub294 \uc774\ub97c \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d @Controller<\/code>, @MessageMapping<\/code>, @SubscribeMapping<\/code> \ub4f1\uc758 \uc5b4\ub178\ud14c\uc774\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n

\uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ud1b5\uc2e0\uc744 \uc704\ud55c \uc2a4\ud504\ub9c1 \ubd80\ud2b8\uc640 \uc6f9\uc18c\ucf13\uc758 \ud65c\uc6a9 \ubc29\ubc95<\/h2>\n

1. \uc758\uc874\uc131 \ucd94\uac00<\/h3>\n

\uba3c\uc800, pom.xml<\/code> \ud30c\uc77c\uc5d0 \uc544\ub798\uc640 \uac19\uc774 spring-boot-starter-websocket<\/code> \uc758\uc874\uc131\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n

\n    org.springframework.boot\n    spring-boot-starter-websocket\n<\/code><\/pre>\n
2. WebSocketConfigurer \uad6c\ud604<\/h3>\n
\ub2e4\uc74c\uc73c\ub85c, WebSocketConfigurer<\/code> \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud558\uc5ec registerWebSocketHandlers()<\/code> \uba54\uc11c\ub4dc\ub97c \uc624\ubc84\ub77c\uc774\ub4dc\ud569\ub2c8\ub2e4. \uc774 \uba54\uc11c\ub4dc\uc5d0\uc11c\ub294 WebSocket \ud578\ub4e4\ub7ec\uc640 Interceptor\ub97c \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/p>\n
@Configuration\n@EnableWebSocket\npublic class WebSocketConfig implements WebSocketConfigurer {\n\n    @Override\n    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {\n        registry.addHandler(myHandler(), \"\/myHandler\").addInterceptors(myInterceptor());\n    }\n\n    @Bean\n    public WebSocketHandler myHandler() {\n        return new MyHandler();\n    }\n\n    @Bean\n    public HandshakeInterceptor myInterceptor() {\n        return new MyInterceptor();\n    }\n\n}<\/code><\/pre>\n
3. WebSocketHandler \uad6c\ud604<\/h3>\n
\ub2e4\uc74c\uc73c\ub85c, WebSocketHandler<\/code> \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud558\uc5ec \uc2e4\uc81c \ub370\uc774\ud130 \ucc98\ub9ac\ub97c \ub2f4\ub2f9\ud558\ub294 \ud578\ub4e4\ub7ec\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
public class MyHandler implements WebSocketHandler {\n\n    @Override\n    public void afterConnectionEstablished(WebSocketSession session) throws Exception {\n        \/\/ \uc5f0\uacb0\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc218\ub9bd\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \uba54\uc11c\ub4dc\n    }\n\n    @Override\n    public void handleMessage(WebSocketSession session, WebSocketMessage message) throws Exception {\n        \/\/ \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c\ubd80\ud130 \uba54\uc2dc\uc9c0\ub97c \ubc1b\uc558\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \uba54\uc11c\ub4dc\n    }\n\n    @Override\n    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {\n        \/\/ \uc804\uc1a1 \uc911 \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \uba54\uc11c\ub4dc\n    }\n\n    @Override\n    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {\n        \/\/ \uc5f0\uacb0\uc774 \uc885\ub8cc\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \uba54\uc11c\ub4dc\n    }\n\n    @Override\n    public boolean supportsPartialMessages() {\n        return false;\n    }\n\n}<\/code><\/pre>\n
4. \ud074\ub77c\uc774\uc5b8\ud2b8 \uad6c\ud604<\/h3>\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c WebSocket \uc5f0\uacb0\uc744 \uc218\ub9bd\ud558\uace0 \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\ub294 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
var socket = new WebSocket(\"ws:\/\/localhost:8080\/myHandler\");\n\nsocket.onopen = function(event) {\n    \/\/ \uc5f0\uacb0\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc218\ub9bd\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\n};\n\nsocket.onmessage = function(event) {\n    \/\/ \uc11c\ubc84\ub85c\ubd80\ud130 \uba54\uc2dc\uc9c0\ub97c \ubc1b\uc558\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\n};\n\nsocket.onclose = function(event) {\n    \/\/ \uc5f0\uacb0\uc774 \uc885\ub8cc\ub418\uc5c8\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\n};\n\nsocket.onerror = function(event) {\n    \/\/ \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \ud638\ucd9c\ub418\ub294 \ud568\uc218\n};\n\nfunction sendMessage() {\n    socket.send(\"Hello, World!\");\n}<\/code><\/pre>\n
\uacb0\ub860<\/h2>\n
\uc774 \ubb38\uc11c\uc5d0\uc11c\ub294 \uc2a4\ud504\ub9c1 \ubd80\ud2b8\uc640 \uc6f9\uc18c\ucf13\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc2a4\ud504\ub9c1 \ubd80\ud2b8\ub294 spring-websocket<\/code> \ubaa8\ub4c8\uc744 \ud1b5\ud574 \uc6f9\uc18c\ucf13\uc744 \uc9c0\uc6d0\ud558\uba70, @Controller<\/code>, @MessageMapping<\/code>, @SubscribeMapping<\/code> \ub4f1\uc758 \uc5b4\ub178\ud14c\uc774\uc158\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \uc27d\uac8c \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uc774\ub97c \uc774\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\ub294 \uc2e4\uc2dc\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
Spring Boot\uc640 WebSocket\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ubc29\ubc95.<\/p>\n","protected":false},"author":1,"featured_media":12882,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1957],"tags":[2089,5898,2080,2105,97,5932,2144,906],"class_list":["post-35128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-applications","tag-backend","tag-building","tag-java","tag-real","tag-spring-boot","tag-web","tag-world"],"acf":[],"_links":{"self":[{"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/posts\/35128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/comments?post=35128"}],"version-history":[{"count":1,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/posts\/35128\/revisions"}],"predecessor-version":[{"id":35228,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/posts\/35128\/revisions\/35228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/media\/12882"}],"wp:attachment":[{"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/media?parent=35128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/categories?post=35128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/8gfg.shop\/blog\/wp-json\/wp\/v2\/tags?post=35128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}