feat: set WebsocketConfig and front-test-bed

k-twitter · Oct 14, 2023 · 127403b · 127403b
1 parent aa765bc
commit 127403b
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 1 deletion.
diff --git a/front-test-bed/README.md b/front-test-bed/README.md
@@ -0,0 +1,13 @@
+# Websocket Simple Test
+
+1. ## Click `Edit Configurations...`
+![Edit-Configurations](editConfig.png)
+
+2. ## Input `dev` in 'Active profiles'
+![Alt text](setProfile.png)
+
+> dev 프로필로 실행하면 h2 db를 사용해 MySQL의 실행 없이 간단한 테스트가 가능합니다.
+
+3. ## Run!
+
+4. ## Open `front-test-bed/index.html`
diff --git a/front-test-bed/app.js b/front-test-bed/app.js
@@ -0,0 +1,60 @@
+const stompClient = new StompJs.Client({
+    brokerURL: 'ws://localhost:8080/ws-stomp'
+});
+
+stompClient.onConnect = (frame) => {
+    setConnected(true);
+    console.log('Connected: ' + frame);
+    stompClient.subscribe('/sub/greetings', (greeting) => {
+        showGreeting(JSON.parse(greeting.body).content);
+    });
+};
+
+stompClient.onWebSocketError = (error) => {
+    console.error('Error with websocket', error);
+};
+
+stompClient.onStompError = (frame) => {
+    console.error('Broker reported error: ' + frame.headers['message']);
+    console.error('Additional details: ' + frame.body);
+};
+
+function setConnected(connected) {
+    $("#connect").prop("disabled", connected);
+    $("#disconnect").prop("disabled", !connected);
+    if (connected) {
+        $("#conversation").show();
+    }
+    else {
+        $("#conversation").hide();
+    }
+    $("#greetings").html("");
+}
+
+function connect() {
+    stompClient.activate();
+}
+
+function disconnect() {
+    stompClient.deactivate();
+    setConnected(false);
+    console.log("Disconnected");
+}
+
+function sendName() {
+    stompClient.publish({
+        destination: "/pub/hello",
+        body: JSON.stringify({'name': $("#name").val()})
+    });
+}
+
+function showGreeting(message) {
+    $("#greetings").append("<tr><td>" + message + "</td></tr>");
+}
+
+$(function () {
+    $("form").on('submit', (e) => e.preventDefault());
+    $( "#connect" ).click(() => connect());
+    $( "#disconnect" ).click(() => disconnect());
+    $( "#send" ).click(() => sendName());
+});
diff --git a/front-test-bed/editConfig.png b/front-test-bed/editConfig.png
diff --git a/front-test-bed/index.html b/front-test-bed/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello WebSocket</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="/main.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@stomp/[email protected]/bundles/stomp.umd.min.js"></script>
+    <script src="app.js"></script>
+</head>
+<body>
+<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
+    enabled. Please enable
+    Javascript and reload this page!</h2></noscript>
+<div id="main-content" class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="connect">WebSocket connection:</label>
+                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
+                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div class="col-md-6">
+            <form class="form-inline">
+                <div class="form-group">
+                    <label for="name">What is your name?</label>
+                    <input type="text" id="name" class="form-control" placeholder="Your name here...">
+                </div>
+                <button id="send" class="btn btn-default" type="submit">Send</button>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <table id="conversation" class="table table-striped">
+                <thead>
+                <tr>
+                    <th>Greetings</th>
+                </tr>
+                </thead>
+                <tbody id="greetings">
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/front-test-bed/setProfile.png b/front-test-bed/setProfile.png
diff --git a/sns_service/src/main/kotlin/joryu/sns_service/chat/config/WebSocketConfig.kt b/sns_service/src/main/kotlin/joryu/sns_service/chat/config/WebSocketConfig.kt
@@ -0,0 +1,24 @@
+package joryu.sns_service.chat.config
+
+import org.springframework.context.annotation.Configuration
+import org.springframework.messaging.simp.config.MessageBrokerRegistry
+import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker
+import org.springframework.web.socket.config.annotation.StompEndpointRegistry
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer
+
+
+@Configuration
+@EnableWebSocketMessageBroker
+class WebSocketConfig : WebSocketMessageBrokerConfigurer {
+
+    override fun configureMessageBroker(config: MessageBrokerRegistry) {
+        config.enableSimpleBroker("/sub")
+        config.setApplicationDestinationPrefixes("/pub")
+    }
+
+    override fun registerStompEndpoints(registry: StompEndpointRegistry) {
+        registry
+            .addEndpoint("/ws-stomp")
+            .setAllowedOriginPatterns("*")
+    }
+}
diff --git a/sns_service/src/main/kotlin/joryu/sns_service/chat/controller/GreetingController.kt b/sns_service/src/main/kotlin/joryu/sns_service/chat/controller/GreetingController.kt
@@ -0,0 +1,18 @@
+package joryu.sns_service.chat.controller
+
+import joryu.sns_service.chat.message.GreetingMessage
+import joryu.sns_service.chat.message.HelloMessage
+import org.springframework.messaging.handler.annotation.MessageMapping
+import org.springframework.messaging.handler.annotation.SendTo
+import org.springframework.stereotype.Controller
+
+@Controller
+class GreetingController {
+
+    @MessageMapping("/hello")
+    @SendTo("/sub/greetings")
+    fun greeting(message: HelloMessage): GreetingMessage {
+        Thread.sleep(100)
+        return GreetingMessage("Hello, " + message.name + "!");
+    }
+}
diff --git a/sns_service/src/main/kotlin/joryu/sns_service/chat/message/GreetingMessage.kt b/sns_service/src/main/kotlin/joryu/sns_service/chat/message/GreetingMessage.kt
@@ -0,0 +1,5 @@
+package joryu.sns_service.chat.message
+
+data class GreetingMessage (
+    val content: String
+)
diff --git a/sns_service/src/main/kotlin/joryu/sns_service/chat/message/HelloMessage.kt b/sns_service/src/main/kotlin/joryu/sns_service/chat/message/HelloMessage.kt
@@ -0,0 +1,5 @@
+package joryu.sns_service.chat.message
+
+data class HelloMessage (
+    val name: String
+)
diff --git a/sns_service/src/main/resources/application.yaml b/sns_service/src/main/resources/application.yaml
@@ -4,7 +4,6 @@ spring:
     password: 1234
     url: jdbc:mysql://localhost:33061/sns-db?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC&useLegacyDatetimeCode=false
     driver-class-name: com.mysql.cj.jdbc.Driver
-
   jpa:
     hibernate:
       ddl-auto: create
@@ -13,9 +12,37 @@ spring:
         show_sql: true
         format_sql: true
         dialect: org.hibernate.dialect.MySQL8Dialect
+  profiles:
+    group:
+      dev: "local"
+    active: local
 
 management:
   endpoints:
     web:
       exposure:
         include: "prometheus"
+
+---
+
+spring:
+  config:
+    activate:
+      on-profile: "local"
+  datasource:
+    driver-class-name: org.h2.Driver
+    url: jdbc:h2:mem:testdb;MODE=MySQL;
+    username: sa
+    password:
+  jpa:
+    hibernate:
+      ddl-auto: create-drop
+    logging.level:
+      org.hibernate.SQL: debug
+    properties:
+      hibernate:
+        show_sql: true
+  data:
+    redis:
+      host: localhost
+      port: 6379