delight

브라우저를 끄지 않고 서버만 재 실행하는 상태로 기능들을 추가해왔는데 test를 하면서 문제가 되었던 부분이 생겼다. 채팅 url에서 서버를 재 시작하고 새로고침을 하면 로그인 후에 바로 채팅 창으로 넘어간다. 그런데 새로고침 이전에는 a로 로그인을 진행했으나 서버 재시작 후 s로 로그인을 하면 a로 인지하거나 null로 진행이 되버린다. js에서 sessionStorage.setItem()으로 닉네임을 저장했는데 그 값이 여전히 남아있던 것이다. 그래서 자동 로그인 기능에 대해 생각해보게 되었고 구글링을 통해 다른 사람들이 구현해 놓은 코드들을 보았다. 오늘은 가볍게 코드를 짜보는걸로 했다. 코드들 가운데 nickname 값을 서버에서 세션 혹은 쿠키로 저장을 하는 코드를 보고 연습용 project에 ..

슬랙을 사용해보면 나 외의 다른 사람들이 입력할 때 누군가가 입력중이다 라고 띄워져 있다. 그것을 나도 한번 넣어볼까 싶어서 코드를 작성했다. 1. 입력창 변화 감지하기 input 창에 글을 쓰기 시작하면 입력 중 알림이 떠야하고 아닌 경우에는 뜨지 않아야 한다. 아래 글을 참고하여 작성했다. 출처 : Javascript - JQuery를 이용해서 Input 값 변경 실시간 감지 $("#inputBox").on("propertychange change keyup paste input", function() {} 2. 메세지 띄우기 입력 창의 변화가 생기면 메세지를 띄워야 한다. 이전에 채팅 msg 코드와 같이 div를 새로 만들어서 그 안에 text 값을 입력해 띄웠다. let parentLoading ..

줄바꿈 설정하기 텍스트가 box에 맞게 작성되기 위해서 아래 코드를 작성했다. (+ 색상 변경 및 내가 보낸 msg는 오른쪽에서 띄우도록 magin-left 설정) word-wrap: break-word; 출처 : 줄바꿈 속성(LineBreak Property) [add] css 정리 [#43] 문제점 발견 중간에 입장하게 되면 내가 보낸 msg로 뜨는 현상 콘솔창으로 확인해봤지만 className은 정확했고 css부분에서 채팅 msg css로 적용이 되었다. 알고보니 채팅msg 적용하는 if문에 해당하면 상대가 보낸 msg이고 아닐 경우 내가 보낸 msg로 css를 설정했는데 if문의 조건이 className이 맞는지 여부였고 className이 맞지 않아 else문으로 빠져 실행된 것이었다. if (..

참고 >> 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(); } } } 변경 후 @OnMes..

서버를 실행시키고 브라우저 console창으로 test 해본뒤에 작성했다. 혹시 몰라서 코드로도 console을 출력해서 잘 진행되는지 확인했다. let size = $(".chat-msg").length if (size>0) { for (let i = 0; i0) { } size>0으로 해놓은 이유는 처음에 채팅을 시작할 때 아무것도 입력되어있지 않으므로 오류가 발생하기 때문에 if문을 추가했다. 나와 상대를 구분하기위해 상대는 앞에 $ 가 표시되어있다. *$ 표시는 서버에서 작성한 것이다. >> 260일차(모험 169일차) - 상대방과 나 구분하기 $ 표시되어있는걸 없애본다. $만 빼면 되므로 $를 기준으로 나눠서 그 이후만 가져오면 된다. newMsg.innerText = $("div.chat-ms..

WebSocketController 더보기 @RequiredArgsConstructor @RestController public class WebSocketController { private final WebSocketService webSocketService; @GetMapping("/websocket/count") // 접속자 수 띄우기 public int userCount() { return webSocketService.userCount(); } } WebSocketService 더보기 @RequiredArgsConstructor @Service @ServerEndpoint("/websocket") //websocket 핸들러를 구현하기 위해서 기본적으로 TextWebSocketHandler를..

처음에 웹 소켓 재 연결 관련해서 계속 찾아보다가 답이 안나올 것 같아서 다른걸 먼저 하기로 했다. 상대방과 구분하는 코드를 작성했는데 이 코드를 활용해서 front에서 어떻게 띄울지 고민해야겠다. 서버에서 상대방과 나를 구분하는 코드를 작성 출처 : WebSocket으로 실시간 채팅 구현하기.(springboot) 메세지를 보낸 사람의 SessionId와 SessionList의 Id가 같지 않으면 상대방이 보낸 메시지, 아이디가 같다면 내가 보낸 메시지 코드 보기 : [add] 상대방과 나 채팅 구분하기 [#37] #58 상대방과 나의 채팅 칸 색을 다르게 해서 띄우고 싶었다. 그런데 ooo가 입장했다는 알림과 메세지를 보낼 때 글이 같은 className으로 되어서 style을 적용하면 채팅 박스가 ..

웹 소켓 재 연결 관련해서 이것저것 검색해 보다가 socket.io와 ws를 보게 되었다. 이 둘의 차이는 아래와 같다. 특히 4번째,,, - socket.io는 추가적인 설치를 해야 한다. ws에서는 new WebSocket('서버주소/네임스페이스')으로 객체를 생성을 바로 사용 - ws는 string형으로 데이터를 전송한다. - ws에는 룸이 없다. - socket.io는 계속해서 연결을 시도한다. 출처 : 웹소켓 Socket.io와 WS의 차이 ws는 한번 연결이 끊어지면 복구되지 않아서 같은 기능을 구현하려면 추가적인 코드가 필요하다고 한다. 여러가지 글들을 보면서 ws는 간단하게 사용할 때 socket.io는 규모가 있는 서비스에서 사용하면 좋은 것 같다. 웹소켓이 끊기면 다시 재 접속하는 코드..

프로젝트 milestone week no.4 (05.31~ 06.06) - 웹 소켓 오류 해결하기 어제 글 참고! >> 257일차(모험 166일차) - 분석 일단 서버와 클라이언트를 분리하는 코드를 주석처리하고 controller를 작성하여 채팅 구현을 했던 것을 service로 넘겨서 controller는 ajax와 통신하는 것으로 구현 + 누군가 나가면 나갔다는 표시가 뜨지 않았다. 그래서 채팅방 나가기 버튼을 생성해서 그 버튼을 이용해 나가는 사람은 바로 나갔다는 표시가 뜨게 작성할 수 있었다. 그러나 해당 버튼을 통해 나가지 않으면 여전히 상대방이 나갔다는 것을 알 수 없다. 현재 구현하려고 하는 것은 웹 소켓이 끊기고 다시 재연결 해주는 코드를 작성해보고 있다.

보호되어 있는 글입니다.