Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] 소켓 통신 프론트 적용 - 추후 리팩토링 필요 #3

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

[Feature] 소켓 통신 프론트 적용 - 추후 리팩토링 필요 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@stomp/stompjs": "^6.1.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
Expand All @@ -12,6 +13,7 @@
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"rxjs": "^7.5.6",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/Box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function Box(props) {

const goSetting = () =>{props.history.push(`/setting/${props.username}`);}
const addFriend = () => {
api.friendAdd(username, props.friendId)
api.friendAdd(props.friendId)
.then((response) => {
if(!response.data.success) {
alert('변경 중 문제가 생겼습니다.');
Expand All @@ -40,7 +40,7 @@ function Box(props) {
};

const deleteFriend = () => {
api.friendDelete(username, props.friendId)
api.friendDelete(props.friendId)
.then((response) => {
if(!response.data.success) {
alert('변경 중 문제가 생겼습니다.');
Expand Down
9 changes: 5 additions & 4 deletions src/components/FriendAddDelButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ function FriendAddDelButton(props) {
const [isFriend, setIsFriend] = useState(false);

useEffect(() => {
api.friendCheck(props.username, props.friendId)
api.friendCheck(props.friendId)
.then(response => {
setIsFriend(response.data.friend);
console.log("is friend", response);
setIsFriend(response.data.data.friend);
})
.catch(error => {
if (error.request) {
Expand All @@ -25,7 +26,7 @@ function FriendAddDelButton(props) {
},[]);

const addFriend = () => {
api.friendAdd(props.username, props.friendId)
api.friendAdd(props.friendId)
.then((response) => {
if(!response.data.success) {
alert('변경 중 문제가 생겼습니다.');
Expand All @@ -43,7 +44,7 @@ function FriendAddDelButton(props) {
};

const deleteFriend = () => {
api.friendDelete(props.username, props.friendId)
api.friendDelete(props.friendId)
.then((response) => {
if(!response.data.success) {
alert('변경 중 문제가 생겼습니다.');
Expand Down
5 changes: 3 additions & 2 deletions src/pages/chat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ function ChatListPage(props) {
const {data} = response.data
setChatList(data.chatrooms);
if(response.data.success) setLoading((isloading)=>(isloading-1));
//if(response.data.success) setLoading(isloading-1); 이러면 작동 안하나? 무한루프도나....
// if(response.data.success) setLoading(isloading-1); //이러면 작동 안하나? 무한루프도나....
else alert('요청한 사용자가 존재하지 않습니다');
})
.catch(error => {
if (error.request) {alert('서버에서 응답이 오지 않습니다.');}
else{alert('채팅목록 조회 중 문제가 생겼습니다.')}
})
}
useEffect(getChatroom);
useEffect(()=> getChatroom(), []);
useEffect(()=> {
if(refreshInterval && refreshInterval > 0){
const interval = setInterval(getChatroom, refreshInterval);
Expand All @@ -39,6 +39,7 @@ function ChatListPage(props) {
}
}
})

return (
<>
<Header title="채팅 목록">
Expand Down
138 changes: 73 additions & 65 deletions src/pages/chatting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,49 @@ import colors from "../util/colors"
import Wrapper from "../components/container/Wrapper";
import Content from "../components/container/Content";
import { Space } from "../styles/style";
import {webSocket, alerts} from "../util/stomp"

import * as api from "../util/api";

function ChattingPage(props) {
const { username, opponent } = useParams();
const [chatroomid, setChatroomid] = useState(-1);
const [mesasgeList, setMessageList] = useState([]);
const [messageList, setMessageList] = useState([]);
const [isloading, setLoading] = useState(3);
const [newMessage, setNewMessage] = useState('');
const [time, setTime] = useState(-1);
const [customTime, setCustomTime] = useState(false);
const [messageCount, setMessageCount] = useState(0);
// const [messageCount, setMessageCount] = useState(0);
const [opponentInfo, setOpponentInfo] = useState([]);
const [countRefreshInterval] = useState(1000);
const [messageRefreshInterval] = useState(10000);
const [doScroll, setDoScroll] = useState(false);
const [refreshInterval, setRefreshInterval] = useState(10000);
var messagesEnd = React.createRef();
const socket = webSocket(username);
const [rendezvous, setRendezvous] = useState({});

const scrollToBottom = () => {
if (doScroll === true) {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth" });
setDoScroll(false);
}
}
// 채팅 목록 뒤로 가기
const goChatList = () => props.history.push(`/chat/${username}`);

// // 가장 최근 메시지로 스크롤링
// const scrollToBottom = () => {
// if (doScroll === true) {
// window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth" });
// setDoScroll(false);
// }
// }

// 랑데뷰 시간 이벤트 핸들러
const handleTime = (event) => {
setTime(parseInt(event.target.value));
}
// 메시지 이벤트 핸들러
const handleMessage = (event) => {
setNewMessage(event.target.value);
}

// 상대방 정보 조회
const getOpponentInfo = () => {
api.user(opponent)
api.friendInfo(opponent)
.then(response => {
setOpponentInfo(response.data.data);
if (response.data.success) { setLoading((isloading) => (isloading - 1)); }
Expand All @@ -55,40 +64,42 @@ function ChattingPage(props) {
})
}

// 메시지 전송 기능
const sendNewMessage = () => {
while (chatroomid === -1) initializePage();
api.chatSend(chatroomid.toString(), newMessage, time)
.then(() => {
getMessageCount()
})
}

const getMessageCount = () => {
api.messageCount(chatroomid)
.then(response => {
setMessageCount(response.data.data.messageCount);
})
.catch(error => {
if (error.request) { alert('서버에서 응답이 오지 않습니다.'); }
else { alert('메시지 수 확인이 되지 않습니다.') };
})
socket.publish({
destination: '/pub/chat/message',
body: JSON.stringify({
chatroomId: chatroomid,
senderId: username,
receiverId: opponent,
content: newMessage,
rendezvousTime: time
}),
headers: {
'content-type': 'application/json'
}
});
}

const getMessages = () => {
api.chatList(chatroomid)
api.chatList(chatroomid, 0)
.then(response => {
const {data} = response.data
if (messageCount !== data.messageList.length) {
setMessageCount(data.messageList.length)
}
setMessageList(data.messageList);
const currentTime = new Date();
data.messageList.filter(message => new Date(message.rendezvousTime) > currentTime && message.rendezvousFlag==true)
.forEach(message => {addRendezvous(new Date(message.rendezvousTime))});
setDoScroll(true);
if (response.data.success) { setLoading((isloading) => (isloading - 1)); }
else alert('요청한 사용자가 존재하지 않습니다');
})
.catch(error => {
if (error.request) { alert('서버에서 응답이 오지 않습니다.'); }
else { alert('메시지 조회 중에 문제가 생겼습니다.') };
else {
console.log("message request failed with error", error);
alert('메시지 조회 중에 문제가 생겼습니다.')
};
})
}

Expand All @@ -108,42 +119,45 @@ function ChattingPage(props) {
})
}

const [rendezvous, setRendezvous] = useState({});
const addRendezvous = (time) => {
setRendezvous(list => ({ ...list, [time]: true }));
setRendezvous(list => ({ ...list, [time]: false }));
};
const checkRendezvous = () => {
const nowDate = new Date();
if (!(Object.keys(rendezvous).length === 0)) {
for (let time of Object.keys(rendezvous)) {
if (time < nowDate) {
setRendezvous(list => ({ ...list, [time]: false }));
if (Date.parse(time) < nowDate) {
setRendezvous(list => ({ ...list, [time]: true }));
}
}
}
}
setInterval(checkRendezvous, 1000);

useEffect(()=> {
alerts.onMessage().subscribe((message)=> {
addMessage(message);
});
}, []);

const goChatList = () => props.history.push(`/chat/${username}`);
useEffect(() => {
if (countRefreshInterval && countRefreshInterval > 0 && messageRefreshInterval && messageRefreshInterval > 0) {
const interval = setInterval(getMessageCount, countRefreshInterval);
const interval2 = setInterval(getMessages, messageRefreshInterval);
useEffect(initializePage, [chatroomid, username, opponent]);
useEffect(getOpponentInfo, [opponent]);
useEffect(getMessages, [chatroomid, username]);
useEffect(()=> {
if(refreshInterval && refreshInterval > 0){
const interval = setInterval(checkRendezvous, refreshInterval);
return () => {
clearInterval(interval);
clearInterval(interval2);
};
}
}
}, [countRefreshInterval, messageRefreshInterval, chatroomid]);

useEffect(initializePage, [chatroomid, username, opponent]);
useEffect(getOpponentInfo, [opponent]);
useEffect(getMessageCount, [messageCount, chatroomid, username]);
useEffect(getMessages, [messageCount, chatroomid, username]);
useEffect(scrollToBottom, [mesasgeList, doScroll]);

})

const addMessage = (message) => {
if(message.rendezvousFlag == true){
addRendezvous(new Date(message.rendezvousTime));
}
setMessageList(ml => [...ml,message]);
}

if (isloading > 0) {
return (
<>
Expand All @@ -152,19 +166,18 @@ function ChattingPage(props) {
);
}


return (
<>
<Header back title={opponentInfo.name} friendAddDel username={username} friendId={opponent} userFunction={goChatList}>
</Header>
<Wrapper paddingBottom="240px">
<Content minHeight="calc(100vh - 290px)" gray>
<div></div>
{mesasgeList.map((message) => {
{messageList.map((message) => {
if (message.senderId === username) {
if (message.rendezvousFlag === true) {
return (
<Message receive readOrNot={message.readTime} rendezvous={message.rendezvousLocation + ", " + message.rendezvousTime.substr(11, 8)}
<Message key={message.messageId} receive readOrNot={message.readTime} rendezvous={message.rendezvousLocation + ", " + message.rendezvousTime.substr(11, 8)}
date={message.sendTime.substr(0, 10)} time={message.sendTime.substr(11, 8)}>
{message.content}
</Message>
Expand All @@ -180,17 +193,12 @@ function ChattingPage(props) {
}
else {
if (message.rendezvousFlag === true) {
const nowDate = new Date();
const rendezvousDate = new Date(message.rendezvousTime);
addRendezvous(rendezvousDate);
if (rendezvousDate > nowDate) {
return (
<Message hide={rendezvous[rendezvousDate]} send readOrNot={message.readTime} rendezvous={message.rendezvousLocation + ", " + message.rendezvousTime.substr(11, 8)}
date={message.sendTime.substr(0, 10)} time={message.sendTime.substr(11, 8)}>
{message.content}
</Message>
)
}
return (
<Message send readOrNot={message.readTime} rendezvous={message.rendezvousLocation + ", " + message.rendezvousTime.substr(11, 8)}
date={message.sendTime.substr(0, 10)} time={message.sendTime.substr(11, 8)}>
{rendezvous[new Date(message.rendezvousTime)]?"hiden message":message.content}
</Message>
)
}
else {
return (
Expand Down
Loading