항해99 👩‍💻73일차 TIL

Socket.io 작동원리 

Socket.io란?

• JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.
• 표준 기술이 아니고 Node.js 모듈로서 오픈소스이다. 

 

사용법 

아래와 같이 npm을 이용하여 Socket.io를 웹 서버에 설치한다.

npm install socket.io

 

서버단 코드 

// 80 포트로 소켓을 연다
var io = require('socket.io').listen(80);

// connection이 발생할 때 핸들러를 실행한다.
io.sockets.on('connection', function (socket) {  
// 클라이언트로 news 이벤트를 보낸다.
    socket.emit('news', { myName: 'hyewon' });

// 클라이언트에서 my favorite event가 발생하면 데이터를 받는다.
socket.on('my favorite event', function (data) {  
        console.log(data);
    });
});

 

클라이언트 코드 

<script src="/socket.io/socket.io.js"></script>  
<script>  
// localhost로 연결한다.
var socket =  
  io.connect('http://localhost');

// 서버에서 news 이벤트가 일어날 때 데이터를 받는다.
socket.on('news',  
  function (data) {
    console.log(data);
  //서버에 my favorite event 이벤트를 보낸다.
    socket.emit('my favorite event', 
      { my: 'data' });
});
</script>

 

이렇게 서버와 클라이언트를 연결할 수 있다. 브라우저에서 클라이언트 페이지를 열면 클라이언트 콘솔에는 "{ myName : 'hyewon' } 가, 서버 콘솔에는 "{ my : 'data' }"가 출력되는 것을 확인할 수 있다. 

 

io.Socket() 메서드를 호출하면 웹 서버와 연결한다. 이때 서버로부터 sessionid 정보와 timeout 정보를 받고, 브라우저의 WebSocket지원 여부, FlashSocket 지원 여부를 보내고 크로스 도메인설정 정보 등을 주고 받은 후 적합한 실시간 웹 방식을 선택한다. 

 

 

참고한 곳 

https://d2.naver.com/helloworld/1336