노마드코더 줌 클론코딩 - #1.1 HTTP vs WebSockets / #1.2 WebSockets in NodeJS

#1.0 Introduction

실시간 채팅 어플을 만들어보자.  

#1.1 HTTP vs WebSockets 

http와 websocket 은 둘 다 프로토콜이다.  

아래 코드는 http의 request, response 방식이다. 즉 ,유저가 "/"(home)으로 Get Request 를 보내면 , 

template 으로 respond 한다. 인터넷은 기본적으로 이와 같이 http 방식이다. 

그러나 http의 특징은 stateless이다. 즉, req/res 후에 backend 는 유저를 잊는다. req를 주면 그저 res를 기다릴 뿐. 

그래서 authenticate 를 하려면 서버에 cookie를 보내줘야한다. 예를 들어 프로필 페이지에 들어가려면 내가 누구인지 알려주는 cookie를 서버로 보내고, 서버는 일치하는 프로필 페이지를 respond 해준다. 

Get request, Post Request 모두 Req/Res 방식이며, 이 과정은 Real time 으로  발생하지 않는다. 

 

 

WebSocket : 실시간 채팅/notification 기능 활용 가능

Websocket은 처음에 악수를 한다. (WebSocket request-> accept) accept하면 coonection이 성립된 것이며, 연결이 되었기 때문에 서버는 유저를 기억한다. 그래서 원한다면 서버가 먼저 유저에게 메세지를 보낼 수 있으며, 둘 사이에는 양방향 통신이기 때문에 서로 언제든지 메세지를 보낼 수 있다.(ex. Wifi, 전화통화) 

이후 자바스크립트용으로 구현된 websocket과 브라우저에 내장된 websocket api를 사용할 것이다. 

websocket 은 브라우저-backend 뿐 아니라 backend-backend 간에도 동작한다. (http도 동일)

 

 

#1.2 WebSockets in NodeJS

node.js로 websocket 서버를 만들어보자. (ws라는 package 활용)

ws는 websocket 을 사용하기 위한 기본. 다양한 기능 사용을 위해서는 framework를 추가로 사용해야한다. 

https://www.npmjs.com/package/ws

ws

 

먼저 npm i ws로 모듈을 설치한다. 

이제 서버를 만들 것이다. ws 서버를 새로 만드는 것이 아니라 express 서버(http) 와 합친다. 

=> http + websocket 

express 는 websocekt 을 지원하지 않기 때문에 function을 새로 추가해야 한다.

 

 

이제 http server, Websocket server 를 만들어보자. => localhost:3000은 이 두 서버를 모두 사용할 수 있다. 즉, 동일한 포트 3000번에서 http, ws request 두개를 다 처리할 수 있다. 

[http]

line 1 : http package는 모든 Node.js 에 내장되어 있으므로 line 1 과 같이 import 만 해주면 설치없이 사용할 수 있다. 

line 18 : 서버 생성한 부분이다. 

 

[websocket]

line2 : websocket import

line 21 : 생성한 http 서버(const server) 위에 websocket 서버를 생성하였다. 

이제 위의 line 22와 같이 만든 서버를 listen 해보면 정상적으로 실행되는 것을 볼 수 있다.

 

전과 차이는 없지만, 생성한 http 서버의 위에 ws 서버를 생성한 것이다. (같은 포트 3000번 공유)