TIL 61일차_ChatterBox

오늘은 ChatterBox 스프린트를 진행하면서
advanced 과제인
서버에 어떤 새로운 메시지가 등록된 경우, 브라우저에서 새로고침을 하지 않더라도, 서버에서 계속 메시지를 받아오기
를 구현한 것을 기록해보려 한다.

접근방법

1. 처음에는

단순히 setInterval를 써서 1초마다 새로 렌더하면 되지않을까? 생각했다.
근데 이렇게하면 새로운 메시지가 등록되지 않아도 계속해서 렌더할 뿐만아니라,
전체메시지가 계속 렌더되므로, 메시지창이 깜빡 깜빡 깜빡...
매우 보기 좋지 않았다.

2. id??

다음으로는, 서버에 POST했을 때 리턴되는 id값을 쓰면 어떨까?
라는 생각을 했다.
id값이 변하면, 변한 id의 메시지를 렌더하도록 하는 것이다.
그러나 get했을 때 id정보가 담겨있지 않아서 id로 접근하는것은 힘들었다.

3. 객체에 배열길이를 저장해서 사용하자

새로운 메시지가 등록되면 변하는 값이 무엇이 있을까 생각하다가
get으로 받는 response의 배열의 길이를 사용하자는 생각을 했다.
결국은 이 방법으로 기능을 구현했다. 😎

코드

const app = {
  // ... 생략 //
  dataLen: 0,
  init: () => {
    app.addEventHandlers();
    app.fetchOnlySameRoom(app.renderAllMessage);
    setInterval(app.renewData, 1000);
  },

renderMessage: ({ username, text, roomname, date }) => {
       // ... 생략 //
    app.dataLen += 1;
  },

chatterBox 페이지는
2개의 채팅room이 있고,
room을 고를때마다 데이터를 get해서 render하는 페이지다.

따라서 메시지 하나를 render할때마다 dataLen를 1씩 증가시켜줬다.

그리고,
room을 바꿀때마다 랜더가 새로되므로
dataLen 도 초기화시켜줬다.

 handleRoom: () => {
    app.clearMessages();
    app.fetchOnlySameRoom((json) => {
      app.dataLen = 0;
      app.renderAllMessage(json);
    });
  },

마지막으로,
setInterval 안에 콜백함수로 넣을 renewData를 작성해줬다.

renewData: () => {
    app.fetchOnlySameRoom((json) => {
    //버그로 비교연산자를 !== 에서 < 로 수정
      if (app.dataLen < json.length) {
        app.renderMessage(json[json.length - 1]);
      }
    });
  },

기능 확인

• 버그발견!
  아주 가끔 메시지를 입력하고 POST버튼을 클릭했을 때
  계속해서 render되는 버그를 발견했다.
  아마 클릭이벤트와 setInterval의 주기가 타이밍이 맞으면,
  renewData함수안의 app.dataLen와 json.length를 비교하는 부분이
  계속해서 true로 작동하는 것 같다.
  일단은 비교연산자를 !==에서 < 로 바꿔놨다.
  이건 다시한번봐서 수정해야겠다.