상세 컨텐츠

본문 제목

socket.io 기본 개념(Basic)

카테고리 없음

by KBstar⭐ 2022. 5. 12. 22:57

본문

✔ 실시간 웹서비스와 socket.io

✔ 데이터 교환

✔ 네임스페이스와 룸

 

1️⃣실시간 웹 서비스와 socket.io

1. 실시간 서비스 작성하기
 1) socket.io : 호환되는 기술 자동 선택
 2) http://socket.io
 3) 설치 
 - npm install socket.io


2. socket.io 서버와 클라이언트
 1) 서버

     - HTTP 서버
     - socket.io 서버


 2) 클라이언트(웹 브라우저)

      - HTTP 클라이언트
      - socket.io 클라이언트 


3. socket.io 서비스
 1) 서비스 시작

      - HTTP 서버 준비
      - socket.io 서버 준비
      - socket.io 클라이언트 요청 - HTML로 응답
      - socket.io 클라이언트 초기화 및 서버 접속

 

4. 실시간 서비스를 위한 서버 준비
  1) 두 서버 준비

       - 웹 서버 ➡ http, express
       - socket.io 서버


  2) socket.io 서버 생성

       - var server = require('socket.io');
       - var io = new Server(httpServer);


  3) 축약 형태 

       - var io = require('socket.io')(server);


  4) 연결 이벤트

       - connection


5. HTTP 서버와 socket.io 서버 준비

 var http = require('http');
  var server = http.createServer(function(req, res) {
     res.end('socekt.io Sample');
  });
  server.listen(3000);

1) socket.io 서버
     - var io = require('socket.io')(server);


6. Express와 socket.io 서버 준비

 var express = require('express');
  var http = require('http');

  var app = express();
  var server = http.Sever(app);
  server.listen(8080);

1) socket.io 서버

   - var io = require('socket.io')(server);


7. socket.io 클라이언트
 1) socket.io 클라이언트 준비

   - HTTP 서버에게 socket.io 초기화 HTML 요청
   - HTML 로딩 - 스크립트(script) 로딩
   - socket.io 클라이언트 초기화
   - socket.io 서버 연결


 2) 서버의 socket.io 클라이언트 html 응답

app.get('/', function(req, res) {
   res. sendFile(__dirname + '/client.html');
});

 3) socket.io 클라이언트

   3-1) 스크립트 로딩

         - 서버 모듈 로딩 or CDN

<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.socket.io/socket.io-1.37.js"></script>

  3-2) 클라이언트 소켓 클래스

       - IO(url: String, opts: Object): Socket


  3-3) 소켓 생성, 연결

         - var socket = io();


  3-4) socket.io 클라이언트 이벤트

         - connect : 서버와 연결
         - error : 연결 에러
         - disconnect : 연결 끊김
         - reconnect, reconnection, reconnect_error,... : 재접속

                                                🔽

          " 서버와 연결이 끊어지면 자동으로 재접속 시도 "

 
8. 서버와 클라이언트 연결


9. 클라이언트의 콘솔 보기

 

2️⃣ 데이터 교환

1. 데이터 교환

 1) 메시지 주고 받기 - 이벤트 기반

  ▪ 메시지 이벤트 정의


 2) 메시지 전송

  ▪ 이벤트 발생 : socket.emit()
  ▪ socket.emit('EVENT', data);


 3) 메시지 수진 

  ▪ 이벤트 리스너 등록 : socket.on()
  ▪ socket.on('EVENT', function(data) {} );


2. 이벤트를 이용해서 데이터 주고받기

3. 이벤트로 메시지 주고 받기

  ▪ 서버에 이벤트 등록 - 클라이언트에서 이벤트 발생
  ▪ 클라이언트 이벤트 등록 - 서버에서 이벤트 발생


 1) 서버에서의 이벤트 발생

   ▪ 소켓 하나에 이벤트 발생 : socket.emit('Direct Event', [데이터]);
   ▪ 연결된 모든 소켓에 이벤트 발생 : socket.io.emit('Broadcast Event', [데이터]); // io.emit으로도 가능

3️⃣ 네임스페이스와 룸

1. 네임스페이스와 룸
 1) socket.io 기본 연결
  ▪ 소켓과 1:1
  ▪ 모든 소켓과 통신
 2) 1:N 통신
  ▪ 개별 소켓과 1:1 통신 N번 반복
  ▪ 네임스페이스 필요
  ▪ 룸 필요


2. 네임스페이스로 socket.io 연결 구분
  ▪ 같은 네임 스페이스에서만 메시지 주고받음
  ▪ 기본 네임스페이스 : / 
  ▪ 커스텀 네임스페이스 : /NAME-SPACE


3. 기본 네임스페이스로 연결
  ▪ 서버 : var io = require('socket.io')(server);
  ▪ 클라이언트 : var socket = io();


4. 커스텀 네임 스페이스
  ▪ var nsp = io.of('/Custom-Namespace');
  ▪ 클라이언트 : var nsp = io('/Custom-Namespace');


5. 네임스페이스를 이용한 커넥션과 통신

 


6. 룸(room)

 ▪ 네임스페이스 안의 작은 그룹(채널)
 ▪ 같은 룸에서만 데이터 교환
 ▪  룸에 입장(join), 여러 룸에 입장 가능
 ▪  룸에서 떠나기(leave)


1) 룸 접속 / 떠나기 - 서버 쪽에서!

 ▪ Socket#Join(name:String [, fn:function]):Socket : 특정 룸에 입장
 ▪ Socket#Leave(name:String [, fn:function]):Socket : 룸에서 떠나기


2) 룸 이벤트

 ▪ Socket#to(room:String):Socket : 특정 룸에서만 이벤트 발생


3) 룸 입장 / 떠나기

 ▪ 서버에서 동작


7. 룸을 이용한 통신

출처:  https://www.youtube.com/watch?v=truL1LwV3_I

티스토리툴바