이번에는 채팅을 구현하면서 부가적으로 필요하다고 생각된 기능들을 어떻게 구현했는지 설명하려고한다.
Eng-Fluencer는 캠스터디이기 때문에 초반에 방장이 설정되어있다. 방장이 나가거나 방장의 권한을 위임하는 케이스를 대비하여 방장권한 위임기능이 필요했다.
또한, 우리가 준비한 프로젝트는 캠스터디이기 때문에 화상연결 및 채팅이 가능하다. 그런데 채팅이나 화상같이 서로 소통이 가능할 경우에는 악성유저로 인한 사이버 공격이 발생할 수 있다.(방해, 언어폭력, 성추행 등)
이러한 부분을 막기 위해서는 채팅이나 화상연결로 블랙유저를 van할수있는 방법이 필요하다. 팀회의에서 아무래도 해당 부분은 채팅쪽에서 신고 강퇴 같은 기능으로 구현을 하는 것이 맞다고 결론이 났다. 그리하여 웹소켓을 이용해서 악성유저를 강제로 퇴장시키거나 신고하는 기능과 방장을 위임할 수 있는 기능을 구현했다. 그중에서도 오늘은 방장권한을 어떻게 구현했는지 작성하고자 한다.
1. 방장 위임
방장 위임은 방장 권한을 넘겨줄 수 있는 현재 방장과, 방장권한을 위임받을 사람이 있다. 방장권한을 넘겨주기 위해서는 다음과 같이 코드를 작성했다.
먼저 현재 방장에게만 방장권한을 넘겨줄 수 있는 버튼 로직을 구현했다.현재 로컬스토리지에 저장된 자신의 id와 서버에서 받은 방매니저의 아이다가 같으면 해당 버튼이 보이게 하는 방식이였다. 해당 로직은 삼항연산자로 return에서 구현했다.
다음으로는 본격적으로 방장권한을 넘겨주기 위해 웹소켓으로 서버에 해당 내용을 전송할 수 있는 코드를 작성했다. 방장권한을 넘겨주기 위한 함수는 다음과 같이 2단계로 구성했다.
먼저 해당 함수는 실행되면 권한을 위임할 유저의 id와 현재 입장한 방의 아이디를 서버에 전송한다.
// user의 아이디와 현재 속한 방을 키값으로 서버 엔드포인트에 전송
const onSubmitManager = () => {
client.current.publish({
destination: "/pub/chat/message",
headers: { Authorization: Authorization },
//전송할 데이터를 입력
body: JSON.stringify({
type: 6,
message: user.memberId,
roomId: roomId.id,
}),
});
};body에 JSON형식으로 메세지를 보내기위해 JSON.stringify처리를 해주고 사전에 서버와 협의된 6번이라는 type으로 message라는 키에 방장권한을 위임받을 사람의 아이디를 값으로 넣어줬다. 그리고 현재 방의 id도 같이 보내준다.
이거를 실행시키기 위해서 버튼에는 다음과 같이 sweetalert을 이용하여 확인창이 뜨도록 코드를 작성했다. (참고로 sweet alert는 모달창 관련 라이브러리로 사용이 매우 쉬워서 추천하는 라이브러리다.)
const managerBtn = () =>{
Swal.fire({
title: "방장권한을 위임하시겠습니까?",
html: `${user?.memberName}님에게 방장권한을 위임하시겠습니까?`,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
showCancelButton: true,
confirmButtonText: "위임",
cancelButtonText: '취소',
}).then(result => {
if(result.isConfirmed){
onSubmitManager();
Swal.fire('방장을 위임했습니다.','','success');
}
})
}
위의 코드에서 다른 부분은 일종의 설정값을 정하는 것이고 제일 중요한건 .then구문이다. 해당 결과가 만약 확인이면 맨처음 작성한 onSubmitManager로 해당 유저를 방장으로 교체하기 위한 함수를 실행시킨다. 여기까지가 방장권한을 위임하는 과정이다.
방장 권한을 받을 경우의 코딩은 간단하다. onSubmitManager()함수가 구현되면서 서버에 해당 내용을 보내면 서버로부터 방장이 바뀌었다는 메세지가 온다. 그러기 위해서 서버와 5번으로 방장이 바뀔때의 메세지를 받기로 하고 타입이 5번인 상황에서 자신의 로컬스토리지에 저장된 id와 메세지로 받은 아이디 값이 같으면 방장으로서의 권한을 갖도록 구현했다.
코드는 다음과 같다.
if (content.type === 5){
setMemberCount(content?.maxMember)
} 해당 기능을 구현하면서 와 웹소켓 정말 편하구나라는 생각을 했다. 물론 서버쪽에서도 관련된 작업을 다 해주어서 가능했던 일이지만(우리팀 진짜 짱) 처음에는 정말 막막했던 기능이였는데 뚝딱 완성하니까 정말 뿌듯했다.
이후에 포스팅할 신고 및 강퇴기능도 방장 기능처럼 타입을 정하고 해당 유저의 아이디를 서버에 보내서 van처리 하는 방식으로 처리했다. 해당 코드는 다음 포스팅에서 작성하도록 하겠다.
