Socket.IO 통합하기

Socket.IO는 두 가지로 구성되어 있다.

  • Node.js HTTP Server를 통합하는 서버 socket.io
  • 브라우저 측에서 로드하는 클라이언트 라이브러리 socket.io-client

socket.io는 client를 자동적으로 제공해준다.

socket.io import 하기

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

socket.io에 http server를 넘겨줌으로써 io 인스턴스를 생성했다. 이 io 인스턴스로 socket.io와 관련된 이벤트 처리를 할 수 있다.

사용자 접속 이벤트 처리하기

io.on('connection', (socket) => {
  console.log('user connected.');
});

사용자가 해당 사이트로 접속하면(connection event가 발생하면) 콘솔에 "user connected." 메시지를 출력하도록 작성했다.

브라우저 측에서 socket.io-client 로드하기

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

index.html 파일에 <body> 부분에 저 코드를 추가하기만 하면 socket.io-client를 로드하는 과정은 끝난다.

io()에 URL을 주지 않았는데, 이렇게 하면 자동으로 호스트가 제공하고 있는 페이지에 접속하게 된다.

사용자 접속 해제 이벤트 처리하기

io.on('connection', (socket) => {
  console.log('user connected.');
  socket.on('disconnect', () => {
    console.log('user disconnected.');
  });
});

다음과 같이, 인자로 받은 socket 객체의 on 메서드를 호출하여 disconnect 이벤트를 처리할 수 있다.

실행 결과

페이지에 처음 접속하면 connect 이벤트가 발생한다. 이후 새로 고침을 하면 disconnect 이벤트가 발생한다. 다만, 처리되는데 시간이 조금 걸리기 때문에 즉각 콘솔에 메시지가 출력되지는 않는다.

IM 1W _ Tree & Graph & Binary Search Tree
[대구AI스쿨] JavaScript 개발일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage