웹채팅 서비스 만들기

[ 개발 과정 ]

 

"기본적으로 멀티채팅이 가능하며, 특정 IP의 특정 포트번호를 통해 접속하는 방식으로 구현"

 

 

### 들어가기 전에

 

웹브라우저와 서버간의 통신을 위해서는 다양한 방식을 이용하여 통신 가능하다.

1) 그 중에서 Socket 통신 방식이 도입되기 이전(HTTP4이하)에는 다음과 같은 방식이 채택되었다.

• Polling : 연결 종료까지 연결 시도와 함께 Client가 Server에게 매번 요청(Request)
• Long-Polling : Polling과 유사하지만 정보 업데이트 발생 시에만 응답(Response)
• Streaming : 첫 연결을 유지한 상태로 정보 업데이트가 발생하면 Server가 Client에게 전달

즉, HTTP의 TP(Transfer Protocol) 통신 제약에 따라 반드시 Request를 통해서만 Response를 얻을 수 있다.

=> 단방향 통신

 

2) 그리고 WebSocket이 등장하기 전, AJAX라는 구글의 기술이 등장하였다.

• 페이지 전체 갱신이 아닌 페이지 일부 갱신을 이용한다.
• 웹브라우저가 아닌 XMLHttpRequest객체가 Request한다.
• 새 브라우저창을 띄우지 않고, 현재 페이지 변경이 가능하다(DOM변경)

* DOM(Document Object Model): HTML문서에 접근하기 위한 인터페이스

http://tcpschool.com/javascript/js_dom_concept

=> 단점을 보완했으나, 여전히 HTTP로 서버와 통신을 한다

 

 

3) 양방향 통신을 위한 프로토콜인 WebSocket이 등장한 이후(HTTP5)

• Client의 요청 이후 서버의 응답이 아닌, 서버가 직접 데이터를 전송할 수 있게 되었다.
• XMLHttpRequest을 사용하지 않고, API Gateway를 이용한다.

=> 클라이언트<->서버 와 같은 양방향 통신이 가능해졌다.

 

페이지 이동이 찾다면 Ajax(with JQuery)

트래픽 소모를 최소화 Socket.io(Node.js)

 

 

### 개발 언어

 

- Node.js

 

많은 웹채팅 서비스 프로그램을 만들기 위해 자료를 찾다가 (JAVA, Python, Delpie 등등)

개발환경이 간편하고 새로운 개념을 배우기 위하여 Node.js를 사용하기로 하였다.

그리고 Node.js = JavaScript가 아니라 JavaScript 기반의 개발 플랫폼이다.

* 앞서 설명한 DOM을 JavaScript를 통해 편집할 수 있으므로 차후 필터링에 도움될 것으로 생각한다.

 

- 채택한 이유(Node.js를 쓰기 좋은 상황)

 

• 알림이나 실시간 대화같이 같이 데이터의 실시간 처리가 필요한 애플리케이션
• 사용자의 입력과 출력이 잦은 애플리케이션
• 데이터 스트리밍 애플리케이션
• JSON API기반의 애플리케이션
• 단일 페이지 기반의 애플리케이션

* 제공되는 함수 예시

Open: 접속
Close: 접속 종료
Send: Client -> Server
Emit: Server -> Client

 

### "Express"와 socket.io

 

$ npm install express
$ npm install socket.io

 

- Express란?

 

Node.js의 프레임워크 중 하나로 웹 및 모바일 애플리케이션을 위한 기능을 제공한다.

 

• HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
• 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. 
• 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 
• 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

그리고 이 프레임워크를 Node.js를 통해 다룰 수 있다.

 

 

- Socket이란?

[ 정리해서 링크 넣기 ] 

 

 

 

### Server : GCP(Google Cloud Platform)

 

무료 크레딧으로 진행하였다.

 

 

 

 

[ 사진 ]

 

직접 코드를 작성하며 배우기보다 다른 사람의 코드를 인용하여 분석하는 식으로 진행하였다.

 

 

서버 실행 시 log 모습

 

매 이벤트 발생(Request) 시 마다 log가 남는다.

 

ip주소와 포트를 통해 입력하면 뜨는 브라우저

 

채팅 내용을 DB에 저장하지 않고 바로 출력하는 특징이 존재한다.

 

 

 

 

 

[ 참고자료 ]

https://lkhlkh23.tistory.com/121 통신 방식

https://m.mkexdev.net/337  웹채팅 구현하기

https://geonlee.tistory.com/92 Node.js란?

https://velopert.com/294 Express 프레임워크 사용하기

 

 

 

 

* github에서 관리해둘 예정이다.

https://github.com/SFrlawoals/ChatFiltering

SFrlawoals/ChatFiltering