Skip to content

Commit 3baa54b

Browse files
071yoon071yoon
authored
Merge pull request #289 from SWM-FIRE/dev
merge dev to main
2 parents 9da7e93 + c305621 commit 3baa54b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1309
-435
lines changed

‎src/adapters/event.enum.ts

+11
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@
2222
* @property {string} VIDEO_STATE_CHANGE - video state change event
2323
* @property {string} AUDIO_STATE_CHANGE - audio state change event
2424
* @property {string} EXCEPTION - exception event
25+
*
26+
* @property {string} JOIN_LOBBY - new user joined event
27+
* @property {string} NEW_USER_JOINED_LOBBY - new user joined event to all users in the lobby except the new user
28+
* @property {string} EXISTING_LOBBY_USERS - existing users in the lobby
29+
* @property {string} LEAVE_LOBBY - user trigger when user intends to leave the lobby
30+
* @property {string} LEFT_LOBBY - user left lobby successfully in the Server Side
2531
*/
2632
export const SOCKET_EVENT = {
2733
JOIN_ROOM: 'joinRoom',
@@ -44,6 +50,11 @@ export const SOCKET_EVENT = {
4450
AUDIO_STATE_CHANGE: 'audioStateChange',
4551
EXCEPTION: 'exception',
4652
DISCONNECT: 'disconnect',
53+
JOIN_LOBBY: 'joinLobby',
54+
NEW_USER_JOINED_LOBBY: 'newUserJoinedLobby',
55+
EXISTING_LOBBY_USERS: 'existingUsers',
56+
LEAVE_LOBBY: 'leaveLobby',
57+
LEFT_LOBBY: 'LeftLobby',
4758
} as const;
4859

4960
export type EVENT = typeof SOCKET_EVENT[keyof typeof SOCKET_EVENT];

‎src/adapters/friendSocket.ts

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* eslint-disable no-unused-vars */
2+
import { io } from 'socket.io-client';
3+
import directMessage, {
4+
newMessageInterface,
5+
message,
6+
} from 'src/interface/directMessage.interface';
7+
import { getDate } from '../utils/getDate';
8+
import { API } from '../config';
9+
10+
const friendSocket = { socket: null };
11+
12+
const generateFriend = () => {
13+
if (!friendSocket.socket)
14+
friendSocket.socket = localStorage.getItem('access_token')
15+
? io(`${API.SOCKET_FRIEND as string}`, {
16+
transports: ['websocket', 'polling'],
17+
query: { token: localStorage.getItem('access_token') },
18+
})
19+
: null;
20+
};
21+
22+
const deleteSocket = () => {
23+
friendSocket.socket = null;
24+
};
25+
26+
const syncFriend = (
27+
setMessage: ({
28+
uid,
29+
messages,
30+
}: {
31+
uid: number;
32+
messages: newMessageInterface[];
33+
}) => void,
34+
) => {
35+
friendSocket.socket?.on('friend:sync-all', (data: directMessage[]) => {
36+
data.forEach((singleData) => {
37+
if (singleData.messages.length === 0) return;
38+
// 가장 최근에 온 순서로 정렬
39+
const filteredMessage = singleData.messages
40+
? singleData.messages.sort((a, b) => {
41+
return Number(a.createdAt) - Number(b.createdAt);
42+
})
43+
: [];
44+
45+
// 채팅을 보낼 때 같은 군집으로 보낼지 여부를 결정
46+
// 앞의 message와 비교해서 내가 저번에 보냈고, 같은 분에 속해있다면 true 아니면 false
47+
48+
const newMessageType: newMessageInterface[] = [];
49+
newMessageType.push({
50+
...filteredMessage[0],
51+
isHide: false,
52+
hideTime: false,
53+
});
54+
55+
for (let i = 1; i < filteredMessage.length; i += 1) {
56+
const prev = filteredMessage[i - 1];
57+
const cur = filteredMessage[i];
58+
59+
const {
60+
day: prevDay,
61+
hour: prevHour,
62+
min: prevMin,
63+
} = getDate(prev.createdAt);
64+
const {
65+
day: curDay,
66+
hour: curHour,
67+
min: curMin,
68+
} = getDate(cur.createdAt);
69+
70+
if (
71+
cur.from === prev.from &&
72+
cur.to === prev.to &&
73+
curDay === prevDay &&
74+
curHour === prevHour &&
75+
curMin === prevMin
76+
) {
77+
newMessageType.push({ ...cur, isHide: true, hideTime: false });
78+
newMessageType[i - 1].hideTime = true;
79+
} else {
80+
newMessageType.push({ ...cur, isHide: false, hideTime: false });
81+
}
82+
}
83+
84+
newMessageType.reverse();
85+
86+
setMessage({
87+
uid: singleData.friend.uid,
88+
messages: newMessageType,
89+
});
90+
});
91+
});
92+
};
93+
94+
const recvDirectMessage = (
95+
setMessages: ({
96+
uid,
97+
messages,
98+
}: {
99+
uid: number;
100+
messages: newMessageInterface[];
101+
}) => void,
102+
uid: number,
103+
messages: { [key: string]: newMessageInterface[] },
104+
) => {
105+
friendSocket.socket?.on('directMessage', (data: message) => {
106+
const targetUid = data.from === uid ? data.to : data.from;
107+
const myChatRoom = messages[targetUid];
108+
109+
// 채팅방에 메세지가 없었을 때
110+
if (myChatRoom.length === 0) {
111+
setMessages({
112+
uid: targetUid,
113+
messages: [
114+
{
115+
...data,
116+
isHide: false,
117+
hideTime: false,
118+
},
119+
],
120+
});
121+
return;
122+
}
123+
124+
const {
125+
day: prevDay,
126+
hour: prevHour,
127+
min: prevMin,
128+
} = getDate(messages[targetUid][0].createdAt);
129+
const { day: curDay, hour: curHour, min: curMin } = getDate(data.createdAt);
130+
131+
if (
132+
data.from === messages[targetUid][0].from &&
133+
data.to === messages[targetUid][0].to &&
134+
curDay === prevDay &&
135+
curHour === prevHour &&
136+
curMin === prevMin
137+
) {
138+
myChatRoom.unshift({ ...data, isHide: true, hideTime: false });
139+
myChatRoom[1].hideTime = true;
140+
} else {
141+
myChatRoom.unshift({ ...data, isHide: false, hideTime: false });
142+
}
143+
144+
setMessages({
145+
uid: targetUid,
146+
messages: myChatRoom,
147+
});
148+
});
149+
};
150+
151+
const sendDirectMessage = (message: string, to: number) => {
152+
friendSocket.socket?.emit('directMessage', {
153+
message,
154+
to,
155+
createdAt: Date.now().toString(),
156+
});
157+
};
158+
159+
export default friendSocket;
160+
161+
export {
162+
generateFriend,
163+
deleteSocket,
164+
syncFriend,
165+
recvDirectMessage,
166+
sendDirectMessage,
167+
};

‎src/adapters/getSocketData.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import connectedUsersStore from 'src/stores/room/connectedUsersStore';
33
import messageStore from 'src/stores/room/messagesStore';
44
import lobbyMessageStore from 'src/stores/lobbyMessageStore';
55
import roomSocket from './roomSocket';
6-
import lobbySocket from './lobbySocket';
6+
import { lobbySocket } from './lobbySocket';
77

88
const getSocketData = (roomId: string) => {
99
const { connectedUsers: roomConnected } = connectedUsersStore();

‎src/adapters/lobbySocket.ts

+55-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,64 @@
11
import { io } from 'socket.io-client';
22
import { API } from '../config';
3+
import { SOCKET_EVENT } from './event.enum';
34

4-
const lobbySocket = { socket: null };
5+
const lobbySocket = {
6+
socket: null,
7+
};
8+
9+
const generateLobbySocket = (token) => {
10+
lobbySocket.socket = io(`${API.SOCKET_LOBBY as string}`, {
11+
transports: ['websocket', 'polling'],
12+
query: { token },
13+
});
14+
lobbySocket.socket?.connect();
15+
};
516

6-
const generateSocket = () => {
7-
lobbySocket.socket = localStorage.getItem('access_token')
8-
? io(`${API.SOCKET_LOBBY as string}`, {
9-
transports: ['websocket', 'polling'],
10-
query: { token: localStorage.getItem('access_token') },
11-
})
12-
: null;
17+
const initSocketConnection = (token) => {
18+
if (lobbySocket.socket === null) {
19+
generateLobbySocket(token);
20+
}
21+
lobbySocket.socket.connect();
1322
};
1423

15-
const deleteSocket = () => {
16-
lobbySocket.socket = null;
24+
const emitJoinLobby = (getMe) => {
25+
getMe().then((res) => {
26+
lobbySocket.socket.emit(SOCKET_EVENT.JOIN_LOBBY, { uid: res.data.uid });
27+
});
1728
};
1829

19-
export default lobbySocket;
30+
const onNewUserJoinedLobby = (func) => {
31+
lobbySocket.socket?.on(SOCKET_EVENT.NEW_USER_JOINED_LOBBY, (data) =>
32+
func(data),
33+
);
34+
};
35+
36+
const onExistingUsers = (func) => {
37+
lobbySocket.socket?.on(SOCKET_EVENT.EXISTING_LOBBY_USERS, (data) =>
38+
func(data),
39+
);
40+
};
2041

21-
export { generateSocket, deleteSocket };
42+
const leaveLobby = () => {
43+
lobbySocket.socket?.emit(SOCKET_EVENT.LEAVE_LOBBY);
44+
lobbySocket.socket?.off(SOCKET_EVENT.JOIN_LOBBY);
45+
lobbySocket.socket?.off(SOCKET_EVENT.NEW_USER_JOINED_LOBBY);
46+
lobbySocket.socket?.off(SOCKET_EVENT.EXISTING_LOBBY_USERS);
47+
lobbySocket.socket?.off(SOCKET_EVENT.LEFT_LOBBY);
48+
lobbySocket.socket?.disconnect();
49+
};
50+
51+
const onLeftLobby = (func) => {
52+
lobbySocket.socket?.on(SOCKET_EVENT.LEFT_LOBBY, (data) => func(data));
53+
};
54+
55+
export {
56+
lobbySocket,
57+
generateLobbySocket,
58+
emitJoinLobby,
59+
initSocketConnection,
60+
onNewUserJoinedLobby,
61+
onExistingUsers,
62+
leaveLobby,
63+
onLeftLobby,
64+
};

‎src/adapters/useDirectMessage.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useEffect } from 'react';
2+
import directMessageStore from 'src/stores/directMessageStore';
3+
import userStore from 'src/stores/userStore';
4+
import friendSocket, { generateFriend, syncFriend } from './friendSocket';
5+
6+
const useDirectMessage = () => {
7+
const { setMessages } = directMessageStore();
8+
const { uid, isLogin } = userStore();
9+
10+
useEffect(() => {
11+
generateFriend();
12+
syncFriend(setMessages);
13+
return () => {
14+
friendSocket.socket?.off('friend:sync-all');
15+
};
16+
}, [setMessages, uid, isLogin]);
17+
};
18+
19+
export default useDirectMessage;

‎src/adapters/youtubeSocket.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { API } from '../config';
33
import youtubeSearch from '../interface/youtubeSearch.interface';
44

55
const youtubeSocket = {
6-
socket: io(`${API.YOUTUBE_PLAYLIST as string}`, {
7-
transports: ['websocket', 'polling'],
8-
query: { token: localStorage.getItem('access_token') },
9-
}),
6+
socket: localStorage.getItem('access_token')
7+
? io(`${API.YOUTUBE_PLAYLIST as string}`, {
8+
transports: ['websocket', 'polling'],
9+
query: { token: localStorage.getItem('access_token') },
10+
})
11+
: null,
1012
};
1113

1214
const generateYoutubeSocket = () => {

‎src/api/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ const createRoom = (
7676
tags: string[],
7777
total: number,
7878
theme: string,
79+
isPublic: boolean,
80+
password: string,
7981
) => {
8082
const room = {
8183
moderator,
@@ -84,6 +86,8 @@ const createRoom = (
8486
tags,
8587
total,
8688
theme,
89+
isPublic,
90+
password,
8791
};
8892
return authorizationRequest.post(API.ROOM, room);
8993
};

‎src/assets/svg/Lock.svg

+4
Loading

‎src/components/atoms/chatting/SendChat.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
22
import styled from 'styled-components';
33
import { ReactComponent as MessageSend } from '../../../assets/svg/MessageSend.svg';
44
import roomSocket from '../../../adapters/roomSocket';
5-
import lobbySocket from '../../../adapters/lobbySocket';
5+
import { lobbySocket } from '../../../adapters/lobbySocket';
66

77
export default function SendChat({
88
roomId,

0 commit comments

Comments
 (0)