261일차(모험 170일차) - 상대방과 나 구분하기

서버를 실행시키고 브라우저 console창으로 test 해본뒤에 작성했다.

혹시 몰라서 코드로도 console을 출력해서 잘 진행되는지 확인했다.

 

let size = $(".chat-msg").length
if (size>0) { 
    for (let i = 0; i<size; i++) {
        console.log(" = = = = = = = = = = = = = = = = ")
        console.log("i : " + i)
        console.log("length : " + size)
        console.log("첫번째 단어는? : " + $("div.chat-msg")[i].innerText[0] )
        console.log("전체 메세지 : " + $("div.chat-msg")[i].innerText )
        console.log(" = = = = = = = = = = = = = = = = ")
        
        if (  $("div.chat-msg")[i].innerText[0] == "$") { // 첫번째 단어가 "$"이면
            newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px; background: #fefefe";
            // 박스 칠해주기(하얀색)
            
        } else {
            newMsg.style = "margin-left: 10px; margin : 4px; font-size: 18px;"
            // 박스 없는 버전
        }
    }

}

 

 

if (size>0) { }

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

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

 

 

 

나와 상대를 구분하기위해 상대는 앞에 $ 가 표시되어있다.

*$ 표시는 서버에서 작성한 것이다. >> 260일차(모험 169일차) - 상대방과 나 구분하기

 

 

 

 

$ 표시되어있는걸 없애본다.

$만 빼면 되므로 $를 기준으로 나눠서 그 이후만 가져오면 된다.

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

 

 

 

최종

 

이제 내가 보낸 글은 오른쪽에 상대가 보낸 글은 왼쪽으로 띄우게 해야겠다.