Frontend

실행 커멘드

1. npm i ⇒ repo 설치
2. npm run serve ⇒ 개발용 라이브 페이지

기술 스택

1. JavaScript
2. Vue.js
3. Socket.io
4. Peer.js

화면정의서

기본 설계

1. Vue.js를 통해 각 Page별 component 제작
2. 각 Page를 router를 통해 유기적인 웹 페이지로 구성
3. vuex의 store를 통해 로그인 정보를 저장
4. socket.io의 state를 통해 채팅방의 채널 정보와 메세지 정보를 저장
5. axios를 통해 HTTPS Request 전송 및 Respons 수신
6. Peer.js를 통해 영상 회의와 음성 회의는 P2P 통신으로 구현

라우터 구성

💡 { path: '/', name: 'login,', component: ***LoginPage***},

{ path: '/find', name: 'find,', component: PwFind},

{ path: '/create', name: 'SignUp', component: SignUp},

{ path: '/main', name: 'main', component: MainPage},

{ path: '/chat', name: 'chat', component: ChatPage}

각 페이지 별 구성

LoginPage

역할: 웹페이지의 첫 페이지이자 로그인을 위한 화면

>

• 상단의 로그인 글씨를 위한 공간

• 중앙의 로그인을 위한 id 입력창, pw 입력창, 체크 img, 그리고 로그인 버튼을 위한 공간
• id의 길이가 4이상, pw의 길이가 6이상일 때에만 체크 이미지 표시
• id의 type은 text, pw의 type은 password로 설정하여 id는 보이게, pw는 보이지않게 설정
• pw의 input 에 @keyup.enter 이벤트를 추가하여 엔터키를 누를 때 로그인 함수 호출
• 로그인 버튼에 @click 이벤트를 추가하여 클릭할 때 로그인 함수 호출

• 회원가입 Page인 SignUp 페이지로 이동시켜 주는 router-link
• 비밀번호 찾기 Page인 PwFind 페이지로 이동시켜주는 router-link

Script

• login() : serverURL을 불러와서 axios.get()를 통해 HTTP Requset를 serverURL+’/login’ 에 보내 Response에 따라 실패한다면 alert 발생, 성공한다면 해당 정보를 웹에 저장하고 ***router***.push("/main") 으로 MainPage로 진입
• connect() : serverURL을 불러와서 socket.io를 통해 Socket 연결, console.log()

PwFind

역할: ID의 PW를 찾기 위한 페이지

• 아이디 찾기를 위한 id 입력창, 찾기 버튼을 위한 공간
• id의 input 에 @keyup.enter 이벤트를 추가하여 엔터키를 누를 때 pw 찾기 함수 호출
• 찾기 버튼에 @click 이벤트를 추가하여 클릭할 때 pw 찾기 함수 호출
• alert 통해 해당 아이디가 존재하지 않음과 입력한 아이디의 비밀번호를 표시
• router.push(’/’) 를 통해 로그인 페이지로 이동

Script

• find(): axios.get() 을 통해 HTTP Requset를 serverURL+’/login/find’ 에 보내 Response에 따라 alert 발생 후 LoginPage로 진입

SignUp

역할: 회원가입을 위한 화면

Script

• create() : id 길이 4 이상, pw 길이 6 이상, 닉네임 길이 3 이상 이라면 axios.post() 를 통해 HTTP Requset를 serverURL+’/login/create’ 에 보내 Response의 state에 따라 alert 발생 후 LoginPage로 진입

MainPage

<div id="video-chat-remote-users" v-for="user in this.getUserList"/>

> > > 비디오 On/Off > 화상/음성 채팅 시작 >

• 해당 채팅방의 사용자들의 닉네임과 화상채팅창을 표현하는 창
• 각 채팅방 참가자들의 닉네임을 video 태그의 id로 삼아 MideaStream 재생
• 하단에 닉네임을 label 태그를 만들어 삽입

• 사용자의 비디오인 localvideo 를 재생하는 창
• stream 이벤트 혹은 startStream 함수에서 getUserMedia 를 통해 받아온 MediaStream 을 재생한다.

• 해당 채팅방의 채팅을 표현하는 창
• input 을 통해 메세지를 입력받아 sendMessage 함수를 통해 Socket.io로 채팅방 서버에 전송한다.

• 화상 채팅할 때, video를 키거나 끄는 switchVideoCall 함수를 호출한다.
• 화상 채팅 혹은 음성채팅을 시작하는 startVideoCall 함수를 호출한다.

Script

• sendMessage(msg) : 해당 메세지를 socket.js에 있는 sendMessageToServer() 를 호출하고 this.newMessage를 초기화 한다.
• switchVideoCall() : socket.js의 constraints.video 를 toggle하며 alert를 통해 video의 상태를 표현한다.
• startVideoCall() : endStream()을 통해 기존 영상이 송출중이라면 이를 종료하고 socket.js의 startStream() 을 통해 영상통화를 시작한다.

이슈 발생

• 화상 채팅 도중 음성 채팅 혹은 음성 채팅 도중 화상채팅 전환이 잘 안되거나 참가자의 영상 표출 제한
  • ChatPage.vue의 Script 부분 switchVideoCall() , switchAudioCall() 의 수정이 필요
  • ⇒ switchVideoCall() 을 통해 영상 혹은 음성을 선택하도록 하며 startVideoCall() 을 분리하여 화상 채팅 시작 기능을 별도로 구현한다.
  • 화상채팅 수신시 confirm() 을 통해 화상채팅에 참가할 것인지 물어본다.
  • 테스트 당시 동시 3명까지 되는 것을 확인

참고 문헌

1. https://velog.io/@jsb100800/개발-WebRTC-SpringBoot-Vue.js를-활용한-Group-Video-Call-2-구현
2. https://fomaios.tistory.com/entry/Nodejs-실시간-채팅앱-만들어보기-1-Websocket-이용하여-백엔드-구현하기-feat-Websocket-Build-a-real-time-chatapp-1-Implement-backend-with-websocket