[Update] Update ChatMessage template

src/main/resources/templates/chat/roomdetail.html

@@ -44,13 +44,7 @@ <h2>{{chatRoom.name}}</h2>
 <!-- JavaScript -->
 <script src="/webjars/vue/2.5.16/dist/vue.min.js"></script>
 <script src="/webjars/axios/0.17.1/dist/axios.min.js"></script>
-<script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
-<script src="/webjars/stomp-websocket/2.3.3-1/stomp.min.js"></script>
 <script>
-    // websocket & stomp initialize
-    var sock = new SockJS("/ws/chat");
-    var ws = Stomp.over(sock);
-    var reconnect = 0;
     // vue.js
     var vm = new Vue({
         el: '#app',
@@ -62,14 +56,16 @@ <h2>{{chatRoom.name}}</h2>
             content: '',
             messages: [],
             hasJoined: false,
+            ws: null,
+            reconnect: 0
         },
         created() {
             this.chatRoomId = localStorage.getItem('wschat.chatRoomId');
             this.accessToken = localStorage.getItem('wschat.accessToken');
             this.hasJoined = localStorage.getItem('wschat.hasJoined') === 'true';
-            localStorage.removeItem("wschat.chatRoomId")
-            localStorage.removeItem("wschat.accessToken")
-            localStorage.removeItem("wschat.hasJoined")
+            localStorage.removeItem("wschat.chatRoomId");
+            localStorage.removeItem("wschat.accessToken");
+            localStorage.removeItem("wschat.hasJoined");
             this.findRoom();
             this.fetchUserInfo();
         },
@@ -119,14 +115,13 @@ <h2>{{chatRoom.name}}</h2>
             },
             sendMessage: function () {
                 console.log('sendMessage.senderUserUrl = ' + this.senderUserUrl);
-                this.ws.send("/publish/message", {
-                    'Authorization': 'Bearer ' + this.accessToken
-                }, JSON.stringify({
+                const message = JSON.stringify({
                     chatMessageType: 'TALK',
                     chatRoomId: this.chatRoomId,
                     senderUserUrl: this.senderUserUrl,
                     content: this.content
-                }));
+                });
+                this.ws.send(message);
                 this.content = '';
             },
             recvMessage: function (recv) {
@@ -137,16 +132,15 @@ <h2>{{chatRoom.name}}</h2>
                     "senderNickname": recv.chatMessageType == 'JOIN' || recv.chatMessageType == 'LEAVE' ? '[알림]' : recv.senderNickname,
                     "senderProfileImgUrl": recv.senderProfileImgUrl,
                     "content": recv.content,
-                })
+                });
             },
             sendSystemMessage: function (type) {
-                ws.send("/publish/message", {
-                    'Authorization': 'Bearer ' + this.accessToken
-                }, JSON.stringify({
+                const message = JSON.stringify({
                     chatMessageType: type,
                     chatRoomId: this.chatRoomId,
                     senderUserUrl: this.senderUserUrl,
-                }));
+                });
+                this.ws.send(message);
             },
             joinChatRoom: function () {
                 console.log('hasJoined = ', this.hasJoined);
@@ -157,31 +151,32 @@ <h2>{{chatRoom.name}}</h2>
             },
             connect: function () {
                 console.log('Attempting to connect...');
-                this.ws = Stomp.over(new SockJS("/ws/chat"));
-                this.ws.connect({
-                    'Authorization': 'Bearer ' + this.accessToken
-                }, (frame) => {
-                    console.log('Connected: ' + frame);
-                    this.ws.subscribe("/subscribe/" + this.chatRoomId, (message) => {
-                        var recv = JSON.parse(message.body);
-                        this.recvMessage(recv);
-                    }, {
-                        'Authorization': 'Bearer ' + this.accessToken
-                    });
+                this.ws = new WebSocket(`ws://${window.location.host}/ws/chat`);
+                this.ws.onopen = () => {
+                    console.log('Connected');
                     this.joinChatRoom();
-                }, (error) => {
+                };
+                this.ws.onmessage = (event) => {
+                    const recv = JSON.parse(event.data);
+                    console.log('recv = ', recv);
+                    this.recvMessage(recv);
+                };
+                this.ws.onclose = (event) => {
+                    console.log('Disconnected', event);
                     if (this.reconnect++ <= 5) {
                         setTimeout(() => {
                             console.log("Attempting reconnect...");
                             this.connect();
                         }, 10 * 1000);
                     }
-                });
+                };
+                this.ws.onerror = (error) => {
+                    console.error("WebSocket error:", error);
+                };
             }
         }
     });
 
-
     function leaveChatRoom() {
         axios.delete(`/api/chat/rooms/${vm.chatRoomId}/leave`, {
             headers: {
@@ -202,4 +197,4 @@ <h2>{{chatRoom.name}}</h2>
     }
 </script>
 </body>
-</html>
+</html>