Node.js(9) - 웹소켓

웹소켓이란?

- 실시간 양방향 데이터 전송을 위한 통신 기술

- ws 프로토콜 사용

- webSocket, Socket.io 등의 패키지를 사용하여 지원 가능하다. 

- HTTP와 포트가 공유하는 것이 가능하다. 

 

서버센트 이벤트(SSE)

- EVENTSOURCE 객체를 사용한다.

- 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 

- 클라이언트에서 서버로는 데이터를 보내는 것이 불가능함 

 

통신 방식 세가지 비교 

 

모듈 설치하기

npm i express express-session cookie-parser dotenv morgan nunjucks

 

 

프론트엔드에서 답장하기 

- new WebSocket은 인수로 서버의 주소를 입력함

- onopen 내장 이벤트리스너는 서버와 연결되었을 때 호출된다.

- onmessage 내장 이벤트리스너는 서버에서 메시지가 올 때 호출한다.

- event.datadp 서버 메세지 내용이 들어 있다.

- webSocket.send로 서버로 메세지 전달한다. 

 

 

클라이언트 - 서버 관계도 

socket.io 설치하기

- websocket과 똑같은 기능을 하지만, websocket으로 일일이 구축해야 했던 서버 구축을 자동으로 지원해준다. 

 

npm i socket.io

 

 

socketIO.js

const SocketIO = require('socket.io');

module.exports =(server) =>{
    const io = SocketIO(server , {path : '/socket.io'});

    io.on('connection', (socket) =>{ //웹 소켓 연결 시
        const req = socket.request;
    const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;

    console.log('새로운 클라이언트 접속!', ip, socket.id, req.ip); //요청에서 ip를 찾아서 꺼내쓰면 된다. 

    socket.on('disconnect', () => { // 연결 종료 시
      console.log('클라이언트 접속 해제', ip, socket.id);
      clearInterval(socket.interval);
    });
    socket.on('error', (error) => { // 에러 시
      console.error(error);
    });
    socket.on('reply', (data) => { // 클라이언트로부터 메시지
      console.log(data) // 
    });
    socket.interval = setInterval(() => { // 3초마다 클라이언트로 메시지 전송
      socket.emit('news', 'Hello Socket.IO');// 이벤트이름, 메세지 순서대로 보낸다. 이벤트이름까지 같이 보낸다. 
      //news라는 이벤트에 Helo Socket.IO라는 메세지를 보내라
    }, 3000);


    })
}

 

 

Socket.IO 패키지를 불러와서 익스프레스 서버와 연결하기

const io = SocketIO(server , {path : '/socket.io'});

- app.js 서버와 연결(server :첫 번째 인수)하고 클라이언트와 연결(경로 : /socket.io) 설정하기

 

 

 

 io.on('connection', (socket) =>{ //웹 소켓 연결 시
        const req = socket.request;
    const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;

connection  이벤트

- 서버와 연결되었을 때만 호출된다. 즉, 콜백 함수 형태로 설정됨

- 콜백으로 소켓 객체(socket)를 제공한다.

 

const req = socket.requst

- 요청 객체에 접근하기 

- socket.ip로 고유 아이디 확인이 가능하다.

 

disconnect 이벤트

- 연결 종료 시 호출 

 

 

error 

- 에러 발생 시 호출

 

reply 

- 사용자가 직접 만들 이벤트로 클라이언트에서는 reply 이벤트 발생 시 서버에 전달된다.

 

 

socket.emit

- 메세지 전달할 수 있도록 함

- 첫 번째 인수는 이벤트이름이고, 두 번째 인수는 메세지이다.