우리 회사에 오신 것을 환영합니다.
그럼..

CTO: 퀘스트를 하나 드리지요.

음.. 젊으시니까 이거 한번 해보세요.

이걸 모듈화(라이브러리화) 시켜주세요

대신 쓰고 싶은 기술은

다 해보셔도 되요.

절 납득시키는 조건에서요.

프로토타이핑

그래서 준비했습니다. 고객.. 아 아니 CTO님.

고려되었던 기술

• Angular.js
• React.js ( 현재 회사에서 사용 중 )
• Vue.js
• Ember.js

고려되었던 기술

• Angular.js
• React.js ( 현재 회사에서 사용 중 )
• Vue.js
• Ember.js

=> 내 생각에는 가장 쉬운 프래임워크다.

작업환경

• netty + vue.js (현재 회사에서 사용중인 환경)
• node + vue.js (내가 빠르게 만질 수 있는 백엔드 환경)
• firebase + vue.js

작업환경

• netty + vue.js
• node + vue.js
• firebase + vue.js

=> 예제가 있으며 백엔드를 안해도 된다!

짜잔!

https://forchatclient.firebaseapp.com/

OK! 잘 작동하네요.

vue로 진행하시죠!

개발은 실전이야 뉴비얌

아아.. 나는 왜 이리도 모르는 게 많은것인가..

채팅의 구조도 (Vue component)

문제1: 여러개의 채팅방을 보여주면 vue-router는..

채팅 서버의 스팩

• netty 사용
• 동시접속자수 3~5만 사용
• web socket 지원

• netty 사용
• 동시접속자수 3~5만 사용
• web socket 지원

=> 채팅방을 바꿀 때마다 연결 설정!

채팅 서버의 스팩

// routes.js

const changeChatRoom = (to, from, next) => {
  
  // ...

    window.force_disconnect()

  // ...

    window.connect(true)
  
  // ...
  
  }
  next()
}

// main.js

window.connect = function (not_disp_info) {
  try {
    if (use_browser_ws) {
      ws = new WebSocket('ws://' + serverHost + ':' + wsPort + '/chat')
    }
    ws.onopen = function () {
      if (window.chattingApp) {
        window.chattingApp.$store.dispatch('clearMessages')
      }
      if (!not_disp_info) {
        printNotifyMessage('서버와 접속되었습니다.')
      }
      loginUser()
    }

    ws.onclose = function () {
      printErrorMessage('접속이 종료되었습니다.')
    }

  } catch (exception) {
    printErrorMessage('connect Error ' + exception)
  }
}

window.force_disconnect = function () {
  window.is_login_success = false
  try {
    window.is_login = false
    ws.close()
  } catch (e) {
    // console.error('ws force_disconnect error', e)
  }
}

기존 채팅 클라이언트 에서는 링크 이동을 통해

연결을 끊고 다시 시작 하는 방식을 취했지만

SPA로 설계된 Vue로 만든 채팅 클라이언트는

routing 변경이 연속적으로 발생하면

간혹 연결이 끊어진채 연결이 안되거나

연결이 두번 발생하는 사고가 발생합니다.

물론 빈도수가 매우 적으며 재현도 쉽지 않습니다만.. (netty 짱짱맨)

주의하시는게 좋을 것 같습니다.

정리

Web Socket 연결 수를 2개 이상 사용한다면

연결에 관한 로직을 심도있게 설계하거나

vue-router 사용을 다시 생각해보자

문제2: vue는 update를 할때마다 랜더링을 한다.

기존 채팅 클라이언트 에서는 단순한

HTML를 동적으로 쌓아가는 방식을 취했기 때문에

HTML이 생성되는 족족 Static data가 되어

랜더에 영향을 주지 않았지만

제가 만든 SPA로 설계된 Vue로 만든 채팅 클라이언트는

매시지가 Vuex에 쌓이며 메시지 array가 변경되면

Re-Rendering을 진행하기 때문에

Array의 길이(채팅 노드의 수)가 많아지면

과부하가 걸려 랜더링이 늦어지거나

브라우져를 다운시킬 수 있으니 주의하세요.

정리

커다란 Component가 있다면

Static한 공간을 만들어

따로 내용을 보관하던가 삭제하여

랜더에 부하를 주지 않도록 주의해야한다.