socket.io

정의

• socket.io는 서버와 클라이언트 간에 양방향 통신을 가능하게 해주는 모듈이다

서버

클라이언트 소켓의 연결 요청을 대기하고, 연결 요청이 오면 클라이언트 소켓을 생성하여 통신이 가능하게 한다.
1. socket()함수를 이용하여 소켓을 생성
2. bind() 함수로 ip와 port번호를 설정하게 된다
3. listen() 함수로 클라이언트의 접근 요청에 수신 대기열을 만들어 몇 개의 클라이언트를 대기 시킬지 결정
4. accept()함수를 사용하여 클라이언트와읭 연결을 기다림

클라이언트

실제로 데이터 송수신이 일어나는 것은 클라이언트 소켓이다.
1. socket()함수로 가장먼저 소켓을 연다
2. connect() 함수를 이용해 통신 할 서버의 설정된 ip와 port번호에 통신을 시도
3. 통신을 시도 시, 서버가 accept()함수를 이용하여 클라이언트의 socket descriptor를 반환
4. 이를 통해 클라이언트와 서버가 서로 read(), write()를 하여 통신(이 과정이 반복)

HTTP통신과 SOCKET통신의 비교

HTTP통신

• client의 요청(request)이 있을 때만 서버가 응답(response)하여 정보를 전송하고 곧바로 연결을 종료하는 방식

HTTP통신의 특징

• client가 요청을 보내는 경우에만 sever가 응답하는 단방향 통신이다
• server로 부터 응답을 받은 후에는 연결이 바로 종료된다
• 실시간 연결이 아니고, 필요한 경우에만 server로 요청을 보내는 상황에 유용하다
• 요청을 보내 server의 응답을 기다리는 어플리케이션의 개발에 주로 사용됨

SOCKET통신

• server와 client가 특정 port를 통해 실시간으로 양방향 통신을 하는 방식

SOCKET통신의 특징

• server와 client가 계속 연결을 유지하는 양방향 통신이가.
• server와 client가 실시간으로 데이터를 주고받는 상황이 필요한 경우에 사용된다
• 실시간 동영상 streaming이나 온라인 게임등과 같은 경우에 자주 사용된다

설치

npm install --save socket.i0

event

• connection: 클라이언트가 연결할때 발생하며, socket 객체를 생성한다
• disconnect: 클라이언트가 연결을 해제할 때 발생
• 이외의 이벤트는 변수 선언을 하듯이 필요에 따라 직접 생성하여 사용한다
• 서버와 클라이언트의 코드는 아래와 같은 과정으로 진행된다. 클라이언트와 서버 모두 .on을 통해 이벤트에 대한 반응을 정의한다. 이때 .emit를 통해 이벤트를 발생시키고, 그에 따라 각각 미리 정의해둔 반응을 하게된다

//server
socket.on('event1', (data) => {
  'event1'이 발생했을 때 서버에서의 반응
});
//client
socket.on('event1', (data) => {
  'event1'이 발생했을 때 클라이언트에서의 반응
});

//특정 이벤트를 발생시키는 코드
socket.emit('event1', data);

자주 쓰이는 메소드

• on(): 소켓 이벤트를 연결한다. 이벤트 발생시 행동을 정의
• emit(): 소켓 이벤트를 발생시킴
• listen(): 서버를 생성 및 실행, 클라이언트에서 데이터를 받아온다
• to() = in(): 특정 클라이언트 추출
• socket.broadcast.emit(): 보내는 user 클라이언트는 제외하고, 나머지 사람들에게 내용을 보낸다

//예시
var io = socketio.listen(server); 
io.sockets.on('connection', (socket) => { 
  socket.on('이벤트1', (data) => { console.log('client가 보낸 데이터: ', data); 	 socekt.emit('이벤트2', data); 
	// 이벤트1을 연결하고, 발생할때 이벤트2를 발생 & 클라이언트에 전달 
  }); 
    // 위와 같이 이벤트 정의가 가능하다. 
});

• io.to() : 특정 room에게 이벤트를 보낼때 사용
• join(): 특정 room에 접속

o.sockets.on('connection', (socket) => { 
  var roomName = null; socket.on('join', (data) => { 
    roomName = data; socket.join(data); 
  }); 
  socket.on('message', (data) => { 									     	io.sockets.in(roomName).emit('message', 'test'); 
  // 특정 방에 있는 클라이언트에게만 메시지 전송 	
   }); 
});

server

express를 이용해서 서버 생성

//index.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const port = 3001;

//서버에 소켓 연결
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  //메세지를 입력하면 서버가 이를 chat message 이벤트로 받는다
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

server.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

• appExpress는 HTTP 서버에 제공할 수 있는 기능 핸들러로 초기화 된다
• http 서버가 포트 3001에서 수신하도록 한다
• 개체 socket.io를 전달하여 새 인스턴스를 초기화 한 후 서버는 connection으로 들어오는 소켓에 대한 이벤트를 수신하고 콘솔에 기록한다
• io()는 기본적으로 페이지를 제공하는 호스트에 연결을 시도하기 때문에 호출할 때 url을 지정하지 않는다
• path값은 client 와 같아야 한다

클라이언트에서 소켓 연결

• 설치

npm install socket.io-client

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  var messages = document.getElementById('messages');
  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });

  socket.on('chat message', function(msg) {
    var item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>