#28 - AdminLTE 컴포넌트 + Spring WebSocket 예제를 활용한 채팅 기능 구현

그럴싸한 채팅 컴포넌트에 스프링 웹소켓 예제를 붙여서
간단한 유사 채팅 기능을 구현하고 관찰함

Author: djkeh

build.gradle

@@ -25,7 +25,11 @@ dependencies {
     implementation 'org.springframework.boot:spring-boot-starter-security'
     implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
     implementation 'org.springframework.boot:spring-boot-starter-web'
+    implementation 'org.springframework.boot:spring-boot-starter-websocket'
     implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'
+    implementation 'org.webjars:webjars-locator-core'
+    implementation 'org.webjars:sockjs-client:1.0.2'
+    implementation 'org.webjars:stomp-websocket:2.3.3'
     compileOnly 'org.projectlombok:lombok'
     developmentOnly 'org.springframework.boot:spring-boot-devtools'
     runtimeOnly 'com.h2database:h2'

src/main/java/com/fastcampus/projectboardadmin/config/WebSocketConfig.java

@@ -0,0 +1,24 @@
+package com.fastcampus.projectboardadmin.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;
+
+@EnableWebSocketMessageBroker
+@Configuration
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry registry) {
+        registry.enableSimpleBroker("/topic");
+        registry.setApplicationDestinationPrefixes("/app");
+    }
+
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry) {
+        registry.addEndpoint("/chat").withSockJS();
+    }
+
+}

src/main/java/com/fastcampus/projectboardadmin/controller/WebSocketController.java

@@ -0,0 +1,21 @@
+package com.fastcampus.projectboardadmin.controller;
+
+import com.fastcampus.projectboardadmin.dto.websocket.WebSocketMessage;
+import org.springframework.messaging.handler.annotation.MessageMapping;
+import org.springframework.messaging.handler.annotation.SendTo;
+import org.springframework.stereotype.Controller;
+
+import java.security.Principal;
+
+@Controller
+public class WebSocketController {
+
+    @MessageMapping("/hello")
+    @SendTo("/topic/chat")
+    public WebSocketMessage chat(WebSocketMessage message, Principal principal) throws Exception {
+        Thread.sleep(1000); // 대화하는 느낌을 시뮬레이션
+
+        return WebSocketMessage.of("안녕하세요 " + principal.getName() + "! " + message.content() + "라고 하셨나요?");
+    }
+
+}

src/main/java/com/fastcampus/projectboardadmin/dto/websocket/WebSocketMessage.java

@@ -0,0 +1,7 @@
+package com.fastcampus.projectboardadmin.dto.websocket;
+
+public record WebSocketMessage(String content) {
+    public static WebSocketMessage of(String content) {
+        return new WebSocketMessage(content);
+    }
+}

src/main/resources/static/js/app.js

@@ -0,0 +1,52 @@
+let stompClient = null;
+
+function connect() {
+    const socket = new SockJS('/chat');
+    stompClient = Stomp.over(socket);
+    stompClient.connect({}, function (frame) {
+        console.log('Connected: ' + frame);
+        stompClient.subscribe('/topic/chat', function (message) {
+            respondMessage(JSON.parse(message.body).content);
+        });
+    });
+}
+
+function sendMessage() {
+    const message = $('#input-message').val();
+
+    $(".direct-chat-messages").append(`
+        <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+                <span class="direct-chat-name float-left">Uno</span>
+            </div>
+            <div class="direct-chat-text">
+                ${message}
+            </div>
+        </div>
+    `);
+
+    stompClient.send("/app/hello", {}, JSON.stringify({'content': $("#input-message").val()}));
+}
+
+function respondMessage(message) {
+    $(".direct-chat-messages").append(`
+        <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+                <span class="direct-chat-name float-right">Bot</span>
+            </div>
+            <div class="direct-chat-text">
+                ${message}
+            </div>
+        </div>
+    `);
+}
+
+$(function () {
+    $("#chat-form").on('submit', function (e) {
+        e.preventDefault();
+        sendMessage();
+    });
+    $("#chat-form button").click(function(e) {
+        sendMessage();
+    });
+});

src/main/resources/templates/layouts/layout-card-chat.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>공통 카드 (Direct Chat)</title>
+</head>
+<body>
+  <!-- DIRECT CHAT -->
+  <div class="card direct-chat direct-chat-primary" id="layout-card-chat">
+    <div class="card-header">
+      <h3 class="card-title">Direct Chat</h3>
+
+      <div class="card-tools">
+        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+          <i class="fas fa-minus"></i>
+        </button>
+      </div>
+    </div>
+    <!-- /.card-header -->
+    <div class="card-body">
+      <!-- Conversations are loaded here -->
+      <div class="direct-chat-messages">
+        <!-- Message. Default to the left -->
+      </div>
+      <!--/.direct-chat-messages-->
+    </div>
+    <!-- /.card-body -->
+    <div class="card-footer">
+      <form id="chat-form">
+        <div class="input-group">
+          <label for="input-message"></label>
+          <input id="input-message" type="text" name="message" placeholder="Type Message ..." class="form-control">
+          <span class="input-group-append">
+          <button type="button" class="btn btn-primary">Send</button>
+        </span>
+        </div>
+      </form>
+    </div>
+    <!-- /.card-footer-->
+  </div>
+  <!--/.direct-chat -->
+</body>
+</html>

src/main/resources/templates/layouts/layout-card-todolist.html

@@ -5,7 +5,7 @@
   <title>공통 카드 (Todo List)</title>
 </head>
 <body>
-  <div class="card col-6" id="layout-card-todolist">
+  <div class="card" id="layout-card-todolist">
     <div class="card-header">
       <h3 class="card-title">
         <i class="ion ion-clipboard mr-1"></i>

src/main/resources/templates/layouts/layout-main-table.html

@@ -24,7 +24,6 @@ <h1 id="main-header-title" class="m-0">메인 페이지</h1>
     </div>
     <!-- /.content-header -->
 
-<!--    <section id="main-section"></section>-->
     <section class="content">
       <div class="container-fluid">
         <div class="row">
@@ -40,10 +39,17 @@ <h3 id="card-title" class="card-title">카드 제목</h3>
               <!-- /.card-body -->
             </div>
             <!-- /.card -->
+          </section>
+        </div>
+        <!-- /.row -->
 
-            <div class="card col-6" id="layout-card-todolist"></div>
+        <div class="row">
+          <section class="col-6 connectedSortable">
+            <div class="card" id="layout-card-todolist"></div>
+          </section>
+          <section class="col-6 connectedSortable">
+            <div class="card" id="layout-card-chat"></div>
           </section>
-          <!-- /.col -->
         </div>
         <!-- /.row -->
       </div>

src/main/resources/templates/layouts/layout-main-table.th.xml

@@ -7,4 +7,5 @@
   <attr sel="#card-title" th:text="|${title} 게시판|" />
   <attr sel="#main-table" th:replace="${table}" />
   <attr sel="#layout-card-todolist" th:replace="layouts/layout-card-todolist :: #layout-card-todolist" />
+  <attr sel="#layout-card-chat" th:replace="layouts/layout-card-chat :: #layout-card-chat" />
 </thlogic>

src/main/resources/templates/layouts/layout-scripts.html

@@ -12,6 +12,11 @@
   <script src="/js/layout-main-table.js"></script>
   <script src="/js/todolist.js"></script>
 
+  <!-- 채팅용 스크립트 -->
+  <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
+  <script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
+  <script src="/js/app.js"></script>
+
   <script>
     $(document).ready(() => {
       if (sessionStorage.getItem('darkMode') === "true") {
@@ -50,5 +55,17 @@
       }
     });
   </script>
+  <script>
+    $(document).ready(() => {
+      const socket = new SockJS('/chat');
+      stompClient = Stomp.over(socket);
+      stompClient.connect({}, function (frame) {
+        console.log('Chat connected: ' + frame);
+        stompClient.subscribe('/topic/chat', function (webSocketMessage) {
+          respondMessage(JSON.parse(webSocketMessage.body).content);
+        });
+      });
+    });
+  </script>
 </body>
 </html>