ZOOM 클론 코딩 (WebRTC, WebSocket) - 2

22-01-16 : [ Dev / Socket ]

킹갓제네럴노마드코더의 무료 강의를 공부하며 작성하는 포스트입니다. 노마드코더에게 감사하십시오. 휴먼

전 포스트에서 WebSocket과 http 통신의 비교와 프로젝트 생성을 했다. 이제 WS를 깔아보자

Ws (webSocket for node)

WS는 webSocket의 핵심 Core부분을 제공한다. 이 WS를 이용한 다른 framework를 이용하면 적은 코드로 많은 기능을 이용할 수 있지만 일단 WS로 기본을 배우고 나중에 코드를 바꿀 예정이란다.

webSocketr과 http를 합쳐서 express로 묶어보자.

npm i ws

src/server.js

import http from 'http';
import webSocket from 'ws';
import express from 'express';

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + "/public"))

app.get('/', (req, res) => res.render('home'))
app.get('/*', (req, res) => res.redirect('/'));

const server = http.createServer(app);

// wss에 webSocket을 생성
const wss = new webSocket.Server({ server });

const handleConnection = (socket) => {
  console.log('WS socket : ', socket);
  // 여기서 socket은 연결된 클라이언트임.
}
// connection 이라는 이벤트 리스너, document.addEventListener()와 똑같다.
wss.on('connection', handleConnection);

const handleListen = () => {
  console.log('listen http://localhost:2201');
};
server.listen(2201, handleListen);

http 서버에 ws서버를 얹어 놓은 느낌이다.

src/public/js/app.js

const socket = new WebSocket(`ws://${window.location.host}`);
// socket은 socket 서버를 의미함.

클라에게 데이터 보내보기!

src/server.js

wss.on('connection', (socket) => {
  console.log('Connect to Browser!');
  socket.send('hey!! user');
});

src/public/js/app.js

const socket = new WebSocket(`ws://${window.location.host}`);
socket.addEventListener('message', (message) => {
  console.log("Just got this : ", message);
});

오우야 넘모 쉽게 연결되었다.

close 이벤트, 양방향 message 보내기

코드를 조금 더 넣고 수정해서 close event 등록과 클라->서버, 서버->클라 메시지를 보내보자.

옴마 api 호출보다 쉽다.

전체 코드

src/server.js

import http from 'http';
import webSocket from 'ws';
import express from 'express';

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + "/public"))

app.get('/', (req, res) => res.render('home'))
app.get('/*', (req, res) => res.redirect('/'));

const server = http.createServer(app)
const wss = new webSocket.Server({ server });

wss.on('connection', (socket) => {
  console.log('Connect to Browser!');
  socket.on('close', () => {
    console.log("Disconnected from the Browser!");
  })
  socket.on('message', (message) => {
    console.log("message from the Browser : ", message.toString());
  })
  socket.send('hey!! user');
});

const handleListen = () => {
  console.log('listen http://localhost:2201');
};
server.listen(2201, handleListen);

src/public/js/app.js

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

socket.addEventListener('open', () => {
  console.log("Connected to the Server");
});

socket.addEventListener('message', (message) => {
  console.log("Just got this : ", message.data);
});

socket.addEventListener('close', () => {
  console.log("Disconnected From Server");
}); 

setTimeout(() => {
  socket.send('Hello server!')
}, 1000);