WebRTC - 실시간 채팅 APP 만들기 (3)

이제까지 했던 세팅들을 정리해보자면, 다음과 같다.

 

(1) pug로 뷰 엔진 설정

(2) express로 template이 어디에 있는지 지정(정적 리소스들)

(3) public url을 생성해서 유저에게 보여줌

(4) home.pug를 렌더링해주는 라우터 handler 설정

 

약간의 편리한 스타일 적용을 위해 MVP.css를 html에 추가한다. (link=stylesheet)사용

https://andybrewer.github.io/mvp/

MVP.css - Minimalist stylesheet for HTML elements

 

3. node.js로 web server 만들기

ws : 간단하고 빠르게 클라이언트와 서버 사이의 webSocket 구동 시 유용한 package

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

ws

먼저, ws를 이용해서 채팅방을 만들어보고, 이를 활용한 프레임워크를 사용해 보는 것이 목표이다.

npm i ws

 

ws서버를 별도로 만드는 것이 아니라, express 서버와 합칠 예정, (두 개의 프로토콜이므로)

즉, 기존에 만들어 둔 express 서버에 ws 기능을 합치는 것이다.

//1.node 모듈에서 Http import 하기
import http from "http";

//2. createServer
const server = http.createServer(app); //server를 통해 we(webSocket)에 접속할 수 있다!~

 

🔖 http.createServer( )
내 컴퓨터에 http서버를 만들어주는 메서드.
포트를 수신하고, 요청이 이루어질 때마다 requsetListener 함수를 실행한다.
- requestListener : optional. 서버가 요청을 받을 때마다 실행되는 특정 함수

const wss = new WebSocket.Server({server}); //WebSocket server + http server 둘 다 작동

 

WebSocket.Server( ); 메서드 안의 인자값은 필수가 아니다. 공란으로 두었을 때는 웹소켓 서버로서의 작동만 하는데, 위와 같이 server 객체를 인자값으로 두게 되면 http server와 websocket server의 역할을 동시에 한다.

server.listen을 하게 되면 이제 내 http 서버에 접근할 수 있게 되고, 내 http 서버 위에서 웹 소켓이 구동될 수 있게 한다.