웹소켓 - 상대방과 나 구분하기

참고 >> 

2022.06.02 - [TIL] - 260일차(모험 169일차) - 상대방과 나 구분하기  (backend)

2022.06.03 - [TIL] - 261일차(모험 170일차) - 상대방과 나 구분하기   (front)

2022.06.03 - [Project] - 웹소켓 기본 코드

 

 

변경 전

    @OnMessage // 사용자로부터 메시지를 받았을 때, 실행된다.
    public void getMsg(String msg) {
        for (int i = 0; i < session.size(); i++) {
            try {
                session.get(i).getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

 

 

변경 후

@OnMessage // 사용자로부터 메시지를 받았을 때, 실행된다.
public void getMsg(Session recieveSession, String msg) {
    for (int i = 0; i < session.size(); i++) {
        if( !recieveSession.getId().equals(session.get(i).getId()) ) {
            try {
                session.get(i).getBasicRemote().sendText("$" + msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        else {
            try {
                session.get(i).getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }


    }
}

 

메세지를 보낸 사람의 SessionId와 SessionList의 Id가 같지 않으면 상대방이 보낸 메시지

그렇지 않다면 내가 보낸 메시지이다.

상대방이 보낸 메세지는 msg 앞에 $를 표시하도록 했다.

 

예시

 

 

---

입장 표시 다르게 띄우기

 

if (e.data.includes("님이 입장하셨습니다.")) {
    newMsg.className = "chatIntro-msg";
    newMsg.innerText = e.data;
    newMsg.style = "margin: 10px; padding-left:280px; padding : auto; font-size: 16px; background: #aaaaaa";
} else {
        newMsg.className = "chat-msg";
        newMsg.innerText = e.data;
        newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px;"
}

여기서 e.data는 username + " 님이 입장하셨습니다." 

 

if (e.data.includes("님이 입장하셨습니다.")) {}

위 코드를 통해  "님이 입장하셨습니다" 문자열이 포함되면 회색 배경 박스로 변경시켰다.

 

 

ooo가 입장했다는 알림과 메세지를 보낼 때 글이 같은 className으로 되어서

style을 적용하면 채팅 박스가 같은 색상으로 보이게 되므로 이를 구분하여 className을 지정했다.

입장 알림 메세지 className은 chatIntro-msg , 문자 메세지는 chat-msg로 구분했다.

 

 

---

나와 상대 채팅 박스 배경 구분하기

 

let size = $(".chat-msg").length
if (size>0) {
    for (let i = 0; i<size; i++) {
        if (  $("div.chat-msg")[i].innerText[0] == "$") {
            newMsg.innerText = $("div.chat-msg")[i].innerText.split("$")[1]
            newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px; background: #fefefe";
        } else {
            newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px;"
        }
    }
} else {
    console.log("0")
}

 

 

if (size>0) { }

size > 0 으로 해놓은 이유는 처음에 채팅을 시작할 때 아무것도 입력되어있지 않으므로

오류가 발생하기 때문에 if문을 추가했다.

 

 

 

for (let i = 0; i<size; i++) {
    if (  $("div.chat-msg")[i].innerText[0] == "$") {
        newMsg.innerText = $("div.chat-msg")[i].innerText.split("$")[1]
        newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px; background: #fefefe";
    } else {
        newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px;"
    }
}

첫번째 단어가 "$"이면 상대방이 작성한 text이므로 배경을 변경한다.

 

 

 

또한 "$"을 없애기 위해서 아래 코드를 작성했다.

newMsg.innerText = $("div.chat-msg")[i].innerText.split("$")[1]

 

 

 

첫번째 단어가 "$" 가 아닌 경우에는 배경이 없는 박스로 나오게 된다.

 

 

 

 

 

 

마찬가지로 입장 알림 메세지에도 "$"를 지워준다.

let introSize = $(".chatIntro-msg").length
if (introSize>0) {
    for (let i = 0; i<introSize; i++) {
        if (  $(".chatIntro-msg")[i].innerText[0] == "$") {
            newMsg.innerText = $(".chatIntro-msg")[i].innerText.split("$")[1]
        } 
    }
}