ZOOM 만들기_ 4. 웹소켓 적용

HTTP는 요청이 있어야 응답을 할 수 있는 'stateless'의 특징을 가지고 있다.

→ 요청과 응답이 끝나면 서버가 사용자를 잊어버린다는 뜻

 

웹소켓은 한번 켜지면 꺼질 때 까지 요청응답 없이 실시간 요청응답이 지속된다.

웹소켓 이해 참고 그림. - 요청과 응답이 필요충분조건이 아니다.

---

1. ws(web soket)패키지 설치하기

 

'npm i ws' 명령어 실행

---

2. 웹소켓 프로토콜 추가하기

 

우리는 현재 server.js에서 express를 기반하여 서버를 만들고 있음

express는 http를 기반으로 동작하기 때문에 ws와 프로토콜이 다름

 

따라서 express서버에 ws패키지의 기능을 합치는 방식으로 서버를 완성할 예정.

 

2-1) server.js 코드 수정

 

먼저 http 와 ws를 import하고 app

import http from 'http';

import WebSocket from 'ws';

express방식이었던 app방식의 포트접근을 없앰

//app.listen(3000, handleListen);

 

http.createServer(app)을 보면

Node.js에 기본으로 내장된 HTTP패키지를 사용해서 express로 만든 서버(app)를 제공하고 있음.

const server = http.createServer(app);

물론 listen 메서드를 사용해서 바로 express서버를 제공할 수도 있지만,

서버에 웹소켓 프로토콜을 추가하기 위해서는 꼭 위의 과정이 필요함

const wss = new WebSocket.Server({server});

server.listen(3000,handleListen);

다음의 코드처럼 

http프로토콜과 웹소켓 프로토콜을 하나의 포트에서 모두 사용하려고

http서버(express로 만든 app방식) 위에 웹소켓 서버(WebSoket.Server)를 추가로 만들어 줬음.

 

<server.js 전체 코드>

//console.log("hello");

import http from 'http';

import WebSocket from 'ws';

import express from 'express';

const app = express();

app.set("view engine", "pug");

//dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미

app.set("views", __dirname + "/views");

app.use("/public", express.static(__dirname + "/public"));

// '/'를 받으면 home으로 가게 설정

app.get("/", (req, res) => res.render("home"));

//만약홈이 아닌 다른 주소로 get요청을 보내더라도 홈으로 리다이렉션하게 예외처리함

app.get("/*", (req, res) => res.redirect("/"));

const handleListen = () => console.log("Listening on http://localhost:3000");

//app.listen(3000, handleListen);

const server = http.createServer(app);

const wss = new WebSocket.Server({server});

server.listen(3000,handleListen);

이제 우리는 HTTP, 웹소켓이라는 2개의 프로토콜을 사용할 수 있게 됐다!!!!

---

3. 웹소켓 이벤트 이해하기

 

btn.addEventListener("click", function);

다음과 같은 코드로 이벤트를 핸들링한다.

 

다음의 click자리에 들어갈 수 있는 다양한 웹소켓 이벤트를 이해하자.

 

· close : 서버가 닫혔을 때 발생.

· connection : 서버와 사용자 간의 연결이 성립될 때 발생.

· error : 연결되어 있는 서버에서 오류가 생길 때 발생.

· headers : 서버의 응답 헤더가 소켓이 기록되기 전에 발생.

· listening : 연결되어 있는 서버가 바인딩 되었을 때 발생.

 

---

4. 웹소켓 이벤트 적용

 

4-1) connection이벤트를 server.js에 적용

 

function handleConnection(socket){

    console.log(socket)

}

wss.on("connection", handleConnection)

웹소켓 서버 wss의 on메서드는 첫 번째 인자에 적혀 있는 이벤트가 발생하길 기다렸다가,

이벤트가 발생하면 두 번째 인자에 적혀있는 콜백 함수 handleConnectoin을 호출한다.

 

4-2) app.js 수정

//alert("hi!");

const socket = new WebSocket("http://localhost:3000");

다음과 같이 코드를 수정하고 실행 후, f12를 눌러 개발자도구 - 콘솔을 확인해보면

프로토콜이 일치 하지 않음을 확인할 수 있음.

웹소켓 프로토콜을 이용해서 메시지를 주고받는 것이 목적인데.

소켓을 생성할 때, http주소를 입력했기에 이런 문제가 생긴 것.

 

따라서 다음과 같이 코드를 재수정

//alert("hi!");

//const socket = new WebSocket("http://localhost:3000");

const socket = new WebSocket('ws://${window.location.host}');

해설 : 프로토콜을 http에서 ws로 변경했음 → 웹소켓 서버에 접근할 수 있게 해준 것임.

추가로 window객체에서 속성값을 읽는 형태로 바꿨기에 pc뿐만아니라 테블릿이나 모바일에서도 우리가 어디에 있는지 바로 확인 가능.

 

 

<웹소켓 서버 잘 구동되는지 교차검증>

 

- 터미널 확인하기

터미널에서 웹소켓 서버가 잘 굴러가는 것을 확인할 수 있음.

이전에 추가한 console.log(socket)의 결과임을 알기...

---

//todo