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

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

headerimg

Socket IO !!

socket io는 WebSocket, HTTP long-polling 이라는 두 가지 기술을 통해 통신을 하는 프레임워크다. 만약 프록시, 방화벽, 백신 S/W 때문에 연결이 불안정해지고 끊어지면 최대 10초나 기달려하지만 socket IO에서는 안정성과 신뢰성이 높은 프레임워크고 연결이 끊어지만 탄력적으로 다시 연결 시킬 수 있다.

https://socket.io에서 자세히 구경하자.

Socket IO 설치!!

npm i socket.io

src/server.js

import http from 'http';
import socketIO from 'socket.io'; // import io
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 httpServer = http.createServer(app)
const ioServer = socketIO(httpServer); // io로 서버를 감싼다.

ioServer.on('connection', (socket) => {
  console.log("---is connect?--");
  console.log('socket : ', socket);
})

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

이후 http://localhost:2201/socket.io/socket.io.js 로 가면 js 파일이 보이는데 이 파일을 클라이언트에 임포트 해야한다. WebsocketWeb API이기 때문에 내장되어 있어서 임포트 할 필요가 없지만 다양한 기능을 제공하는 socket io는 필요하다.

  (...)
  script(src='/socket.io/socket.io.js')
  script(src='/public/js/app.js')
  (...)

pug에 해당 js파일을 작성해주고 크롬 개발자도구 콘솔에서 io라고 치면 socket.io.js 파일에서 작성된 함수가 하나 있다.

이 함수를 app.js에서 써주면 끝난다.

const socket = io();

백엔드 콘솔에 가서 확인해보자

오마이깟 연결되어따~


© 2018. All rights reserved.