yjryu / 3D_AI_System star
박현정 박현정 07-29
250729 박현정 채팅 소켓 통신 기능 추가
@9a7dde31b79da78efbc9db45e8356590367e5c3f
e50c60b
9a7dde3
client/views/pages/subPage/FeedBack.vue
--- client/views/pages/subPage/FeedBack.vue
+++ client/views/pages/subPage/FeedBack.vue
@@ -79,6 +79,8 @@
 
 import dayjs from 'dayjs';
 
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import 'dayjs/locale/ko'; // 한국어 locale 불러오기
 
+import SockJS from 'sockjs-client';
 
+import { Client } from '@stomp/stompjs';
 
 
 dayjs.extend(relativeTime);
 
 dayjs.locale('ko');
@@ -163,6 +165,9 @@
 
                 ],
 
 
             replyText: '',
 
+            socket: null,
 
+            stompClient: null,
 
+            connectedRoomId: null,
 
 
         };
 
     },
@@ -178,18 +183,31 @@
 
         //     }
 
         // },
 
         async submitReply() {
 
-            if (!this.replyText.trim()) return;
 
-            try {
 
-            await axios.post(`/api/feedback/${this.replyingFeedbackId}/reply`, {
 
-                reply: this.replyText
 
+            // if (!this.replyText.trim()) return;
 
+            // try {
 
+            // await axios.post(`/api/feedback/${this.replyingFeedbackId}/reply`, {
 
+            //     reply: this.replyText
 
+            // });
 
+            // alert('회신이 전송되었습니다.');
 
+            // this.replyText = '';
 
+            // this.selectedFeedback = null;
 
+            // this.replyingFeedbackId = null;
 
+            // } catch (err) {
 
+            // console.error('회신 실패:', err);
 
+            // }
 
+            if (!this.replyText.trim() || !this.stompClient) return;
 
+
 
+            const msg = {
 
+                chatRoomId: this.selectedFeedback.chatRoomId,
 
+                senderId: this.getMemId,
 
+                msgContent: this.replyText,
 
+            };
 
+
 
+            this.stompClient.publish({
 
+                destination: "/pub/chat.sendMessage",
 
+                body: JSON.stringify(msg)
 
             });
 
-            alert('회신이 전송되었습니다.');
 
             this.replyText = '';
 
-            this.selectedFeedback = null;
 
-            this.replyingFeedbackId = null;
 
-            } catch (err) {
 
-            console.error('회신 실패:', err);
 
-            }
 
         },
 
 
         replyTo(feedback) {
@@ -246,11 +264,38 @@
 
                     }));
 
 
                     this.replyTo(feedback);
 
+                    this.connectToChatRoom(feedback.chatRoomId);
 
                 })
 
                 .catch(error => {
 
                     console.error('채팅 조회 실패: ', error);
 
                 })
 
         },
 
+        connectToChatRoom(roomId) {
 
+            if (this.stompClient && this.connectedRoomId === roomId) return;
 
+
 
+            const socket = new SockJS('http://localhost:10911/ws');
 
+
 
+            const client = new Client({
 
+                webSocketFactory: () => socket,
 
+                onConnect: () => {
 
+                client.subscribe(`/sub/chat.room.${roomId}`, (message) => {
 
+                    const msg = JSON.parse(message.body);
 
+                    this.feedbackChatList.push({
 
+                    id: msg.chatMsgId,
 
+                    user: msg.senderName,
 
+                    content: msg.msgContent,
 
+                    time: dayjs().fromNow()
 
+                    });
 
+                });
 
+
 
+                // 연결 완료 시점에만 설정
 
+                this.stompClient = client;
 
+                this.connectedRoomId = roomId;
 
+                },
 
+            });
 
+
 
+            client.activate();
 
+        },
 
     },
 
     watch: {},
 
     computed: {
e50c60b
9a7dde3
package-lock.json
--- package-lock.json
+++ package-lock.json
@@ -7,6 +7,7 @@
 
       "dependencies": {
 
         "@babel/cli": "7.19.3",
 
         "@babel/core": "7.19.3",
 
+        "@stomp/stompjs": "^7.1.1",
 
         "axios": "^1.10.0",
 
         "babel-loader": "8.2.5",
 
         "css-loader": "6.7.1",
@@ -17,6 +18,7 @@
 
         "fs": "0.0.1-security",
 
         "new-line": "^1.1.1",
 
         "pg": "8.8.0",
 
+        "sockjs-client": "^1.6.1",
 
         "url-loader": "4.1.1",
 
         "vue": "3.5.13",
 
         "vue-loader": "^17.0.0",
@@ -415,6 +417,12 @@
 
       "engines": {
 
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
 
       }
 
+    },
 
+    "node_modules/@stomp/stompjs": {
 
+      "version": "7.1.1",
 
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.1.1.tgz",
 
+      "integrity": "sha512-chcDs6YkAnKp1FqzwhGvh3i7v0+/ytzqWdKYw6XzINEKAzke/iD00dNgFPWSZEqktHOK+C1gSzXhLkLbARIaZw==",
 
+      "license": "Apache-2.0"
 
     },
 
     "node_modules/@tootallnate/once": {
 
       "version": "2.0.0",
@@ -2078,6 +2086,15 @@
 
         "node": ">=0.8.x"
 
       }
 
     },
 
+    "node_modules/eventsource": {
 
+      "version": "2.0.2",
 
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
 
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=12.0.0"
 
+      }
 
+    },
 
     "node_modules/express": {
 
       "version": "4.18.1",
 
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
@@ -2193,6 +2210,18 @@
 
       "license": "MIT",
 
       "engines": {
 
         "node": ">= 4.9.1"
 
+      }
 
+    },
 
+    "node_modules/faye-websocket": {
 
+      "version": "0.11.4",
 
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
 
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
 
+      "license": "Apache-2.0",
 
+      "dependencies": {
 
+        "websocket-driver": ">=0.5.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=0.8.0"
 
       }
 
     },
 
     "node_modules/file-loader": {
@@ -2795,6 +2824,12 @@
 
       "engines": {
 
         "node": ">= 0.8"
 
       }
 
+    },
 
+    "node_modules/http-parser-js": {
 
+      "version": "0.5.10",
 
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
 
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
 
+      "license": "MIT"
 
     },
 
     "node_modules/http-proxy-agent": {
 
       "version": "5.0.0",
@@ -4562,6 +4597,12 @@
 
         "url": "https://github.com/sponsors/ljharb"
 
       }
 
     },
 
+    "node_modules/querystringify": {
 
+      "version": "2.2.0",
 
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
 
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
 
+      "license": "MIT"
 
+    },
 
     "node_modules/quick-lru": {
 
       "version": "4.0.1",
 
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
@@ -4761,6 +4802,12 @@
 
       "engines": {
 
         "node": ">=0.10.0"
 
       }
 
+    },
 
+    "node_modules/requires-port": {
 
+      "version": "1.0.0",
 
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
 
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
 
+      "license": "MIT"
 
     },
 
     "node_modules/resolve": {
 
       "version": "1.22.10",
@@ -5166,6 +5213,34 @@
 
       "engines": {
 
         "node": ">= 6.0.0",
 
         "npm": ">= 3.0.0"
 
+      }
 
+    },
 
+    "node_modules/sockjs-client": {
 
+      "version": "1.6.1",
 
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
 
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "debug": "^3.2.7",
 
+        "eventsource": "^2.0.2",
 
+        "faye-websocket": "^0.11.4",
 
+        "inherits": "^2.0.4",
 
+        "url-parse": "^1.5.10"
 
+      },
 
+      "engines": {
 
+        "node": ">=12"
 
+      },
 
+      "funding": {
 
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
 
+      }
 
+    },
 
+    "node_modules/sockjs-client/node_modules/debug": {
 
+      "version": "3.2.7",
 
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
 
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "ms": "^2.1.1"
 
       }
 
     },
 
     "node_modules/socks": {
@@ -5773,6 +5848,16 @@
 
         "url": "https://opencollective.com/webpack"
 
       }
 
     },
 
+    "node_modules/url-parse": {
 
+      "version": "1.5.10",
 
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
 
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "querystringify": "^2.1.1",
 
+        "requires-port": "^1.0.0"
 
+      }
 
+    },
 
     "node_modules/util-deprecate": {
 
       "version": "1.0.2",
 
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6095,6 +6180,29 @@
 
         "url": "https://opencollective.com/webpack"
 
       }
 
     },
 
+    "node_modules/websocket-driver": {
 
+      "version": "0.7.4",
 
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
 
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
 
+      "license": "Apache-2.0",
 
+      "dependencies": {
 
+        "http-parser-js": ">=0.5.1",
 
+        "safe-buffer": ">=5.1.0",
 
+        "websocket-extensions": ">=0.1.1"
 
+      },
 
+      "engines": {
 
+        "node": ">=0.8.0"
 
+      }
 
+    },
 
+    "node_modules/websocket-extensions": {
 
+      "version": "0.1.4",
 
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
 
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
 
+      "license": "Apache-2.0",
 
+      "engines": {
 
+        "node": ">=0.8.0"
 
+      }
 
+    },
 
     "node_modules/which": {
 
       "version": "2.0.2",
 
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
e50c60b
9a7dde3
package.json
--- package.json
+++ package.json
@@ -2,6 +2,7 @@
 
   "dependencies": {
 
     "@babel/cli": "7.19.3",
 
     "@babel/core": "7.19.3",
 
+    "@stomp/stompjs": "^7.1.1",
 
     "axios": "^1.10.0",
 
     "babel-loader": "8.2.5",
 
     "css-loader": "6.7.1",
@@ -12,6 +13,7 @@
 
     "fs": "0.0.1-security",
 
     "new-line": "^1.1.1",
 
     "pg": "8.8.0",
 
+    "sockjs-client": "^1.6.1",
 
     "url-loader": "4.1.1",
 
     "vue": "3.5.13",
 
     "vue-loader": "^17.0.0",
Add a comment
List