Skip to content

Commit 5913e65

Browse files
gusrns48gusrns48
committed
Chore: websocket setting
1 parent 556b8df commit 5913e65

File tree

2 files changed

+121
-59
lines changed

2 files changed

+121
-59
lines changed

‎src/views/meeting/components/MindMapComponent.tsx‎

Lines changed: 121 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import "@xyflow/react/dist/style.css";
1616
import "@/views/meeting/style/mind-map.sass";
1717

1818
// api
19-
import { postScript, endMeeting } from "@/api/meeting/meeting";
19+
import { nameUpdate, postScript, endMeeting } from "@/api/meeting/meeting";
20+
import { getProfile } from "@/api/main/profile";
2021

2122
// component
2223
import UseSpeechToText from "@/views/meeting/components/UseSpeechToText";
@@ -72,51 +73,94 @@ const MindMapComponent = ({
7273

7374
const mindMapRef = useRef<HTMLDivElement>(null);
7475

76+
const clientRef = useRef<Client | null>(null); // WebSocket 클라이언트 저장
77+
7578
const meetingStart = () => {
7679
const client = new Client({
77-
brokerURL: "ws://3.39.11.168:8080/ws", // 서버 WebSocket URL q
80+
brokerURL: "ws://3.39.11.168:8080/ws",
7881
reconnectDelay: 5000,
7982
debug: (str) => {
8083
console.log(str);
8184
},
8285
onConnect: () => {
83-
console.log("연결");
8486
client.subscribe(
85-
`/topic/conference/${conferenceData.projectId}/participants`,
87+
`/topic/conference/${conferenceData.projectId}`,
8688
(message: any) => {
8789
const data: any = JSON.parse(message.body);
88-
console.log(data.participants);
90+
console.log(data);
91+
92+
if (data.event === "liveOn") {
93+
// GPT 응답이 들어온 경우
94+
setSummary((prev) => [
95+
...prev,
96+
{
97+
time: formattedTime,
98+
title: data.summary.title,
99+
item: data.summary.content,
100+
},
101+
]);
102+
103+
setInitialNodes(data.nodes);
104+
105+
const edges = data.nodes
106+
.filter((node: any) => node.parentId)
107+
.map((node: any, index: number) => ({
108+
id: `${index}`,
109+
source: node.parentId!,
110+
target: node.id,
111+
}));
112+
113+
setInitialEdges(edges);
114+
115+
setMainKeyword(
116+
JSON.parse(data.mainKeywords).map((x: any, i: number) => ({
117+
id: i,
118+
value: x,
119+
}))
120+
);
121+
setRecommendKeyword(
122+
JSON.parse(data.recommendedKeywords)
123+
.filter(Boolean)
124+
.map((x: any, i: number) => ({ id: i, value: x }))
125+
);
126+
}
89127
}
90128
);
129+
130+
getProfile().then((res: any) => {
131+
client.publish({
132+
destination: `/app/conference/${conferenceData.projectId}/modify_inviting`,
133+
body: JSON.stringify({
134+
event: "participant_join",
135+
projectId: conferenceData.projectId,
136+
memberId: res.data.data.memberId,
137+
}),
138+
});
139+
});
91140
},
92141
onWebSocketError: (event) => {
93142
console.error("❌ WebSocket 연결 실패:", event);
94143
},
95144
onStompError: (frame) => {
96145
console.error("❌ STOMP 에러:", frame);
97146
},
98-
// onConnect: (conn: any) => {
99-
// console.log('[+] WebSocket 연결이 되었습니다.', conn);
100-
// // client.subscribe(SUB_ENDPOINT, (message: IMessage) => {
101-
// // const receiveData = JSON.parse(message.body);
102-
// // });
103-
// },
104147
});
105148
console.log(client);
106149
client.activate();
150+
clientRef.current = client;
107151
};
108152

109-
// const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
110-
// if (!ref.current) return;
153+
const handleDownload = (title: string, ref: React.RefObject<HTMLDivElement>) => () => {
154+
if (!ref.current) return;
111155

112-
// html2canvas(ref.current).then((canvas) => {
113-
// const link = document.createElement('a');
114-
// link.href = canvas.toDataURL('image/png');
115-
// link.download = title === '' ? '제목없음' : title;
116-
// document.body.appendChild(link);
117-
// link.click();
118-
// });
119-
// };
156+
html2canvas(ref.current).then((canvas) => {
157+
const link = document.createElement('a');
158+
link.href = canvas.toDataURL('image/png');
159+
link.download = title === '' ? '제목없음' : title;
160+
document.body.appendChild(link);
161+
link.click();
162+
});
163+
};
120164

121165
useEffect(() => {
122166
if (finalTranscript !== "") {
@@ -130,50 +174,70 @@ const MindMapComponent = ({
130174
setScriptList((prev) => {
131175
const updated = [...prev, newScript];
132176

133-
if (updated.length >= 7) {
177+
if (updated.length >= 2 && clientRef.current?.connected) {
178+
console.log('스크립트 전송')
134179
const testString = updated.map((item) => item.script).join(" ");
135-
136-
let data = {
180+
const data = {
137181
event: "script",
138182
projectId: conferenceData.projectId,
139183
scription: testString,
140184
};
141-
postScript(conferenceData.projectId, data).then((res: any) => {
142-
setScriptList([]);
143-
144-
setSummary((prev) => [
145-
...prev,
146-
{
147-
time: formattedTime,
148-
title: res.data.data.summary.title,
149-
item: res.data.data.summary.content,
150-
},
151-
]);
152-
153-
setInitialNodes(res.data.data.nodes);
154-
const edges = res.data.data.nodes
155-
.filter((node: any) => node.parentId)
156-
.map((node: any, index: number) => ({
157-
id: `${index}`,
158-
source: node.parentId!,
159-
target: node.id,
160-
}));
161-
162-
setInitialEdges(edges);
163-
setMainKeyword(
164-
JSON.parse(res.data.data.mainKeywords).map(
165-
(x: any, i: number) => ({ id: i, value: x })
166-
)
167-
);
168-
setRecommendKeyword(
169-
JSON.parse(res.data.data.recommendedKeywords)
170-
.filter(Boolean)
171-
.map((x: any, i: number) => ({ id: i, value: x }))
172-
);
185+
186+
// WebSocket 기반 GPT 마인드맵 요청
187+
clientRef.current.publish({
188+
destination: `/app/conference/${conferenceData.projectId}/script`,
189+
body: JSON.stringify(data),
173190
});
191+
192+
console.log(JSON.stringify(data))
193+
194+
setScriptList([]);
174195
}
175196

176-
return updated.length >= 7 ? [] : updated;
197+
// if (updated.length >= 7) {
198+
// const testString = updated.map((item) => item.script).join(" ");
199+
200+
// let data = {
201+
// event: "script",
202+
// projectId: conferenceData.projectId,
203+
// scription: testString,
204+
// };
205+
// postScript(conferenceData.projectId, data).then((res: any) => {
206+
// setScriptList([]);
207+
208+
// setSummary((prev) => [
209+
// ...prev,
210+
// {
211+
// time: formattedTime,
212+
// title: res.data.data.summary.title,
213+
// item: res.data.data.summary.content,
214+
// },
215+
// ]);
216+
217+
// setInitialNodes(res.data.data.nodes);
218+
// const edges = res.data.data.nodes
219+
// .filter((node: any) => node.parentId)
220+
// .map((node: any, index: number) => ({
221+
// id: `${index}`,
222+
// source: node.parentId!,
223+
// target: node.id,
224+
// }));
225+
226+
// setInitialEdges(edges);
227+
// setMainKeyword(
228+
// JSON.parse(res.data.data.mainKeywords).map(
229+
// (x: any, i: number) => ({ id: i, value: x })
230+
// )
231+
// );
232+
// setRecommendKeyword(
233+
// JSON.parse(res.data.data.recommendedKeywords)
234+
// .filter(Boolean)
235+
// .map((x: any, i: number) => ({ id: i, value: x }))
236+
// );
237+
// });
238+
// }
239+
240+
return updated.length >= 2 ? [] : updated;
177241
});
178242

179243
resetTranscript();

‎src/views/meeting/components/SideBar.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ const SideBar = ({
7070
});
7171
}, []);
7272

73-
console.log("프로젝트 아이디", conferenceData.projectId);
74-
7573
return (
7674
<div
7775
className={`side-bar ${isSidebarOpen ? "open" : "closed"}`}

0 commit comments

Comments
 (0)