2023-02-07 Soket 수업

프로세스가 네트워크로 데이터를 보내거나 데이터를 받기 위한

서버랑 클라이언트랑 통신할때 소캣이란 곳(파일)에서 데이터를 다른 소캣으로 보내면서 통신이 이루어진다

서버랑 클라이언트를 연결하는 인터페이스 연결

역할에 따라

서버소캣

클라이언트 소캣이라고 불림

 

둘이 어찌 통신하는지 보자

클라이언트는 연결 요청하는 부분이고

요청을 받는게 서버 소캣이라고 한다

 

한서버에 여러개의 클라이언트 소캣이 접속할 수 있다

그 소캣을 어케 구분하냐

소켓은 프로토콜, 아이피주소, 포트 넘버로 정의된다

프로토콜은 통신 규약이라고 한다

http도 거기에 포함 통신을 원할하게 할 수 있는 규칙

 

소켓 흐름

소켓을 생성하고

서버가 연결요청을 받으면 read write

요청을 바인드에서 바인딩?

리슨 클라이언트가 서버아이피와 포트번호로 연결요청이 있는지 기다리는 작업(여러개 일 수도있으니 수신 대기열을 만들어 여러 요청을 쌓는다.)

 

어셋 (연결을 받는 부분 미리 생성된 서버 소캣이 새로운 서버 소캣을 만들게 된다 직접적으로 클라이언트...소캣이랑 연결되는게 아니다.)

처음 서버 소캣 클라이언트 소캣이 직접 소통 x

서버에서 소캣을 만든다.

어셋 반복을 반복하면서 대기열을 받는다.

 

 

Soket.io

d

웹소캣은 양방향 프로토콜(약속)

 

우린 지금까지 http 로 소통을 했는데

서버가 먼저 요청을 보낼순 없엇다.

 

실시간 채팅이나 실시간으로 주가가 변하는 사이트들은 서버가 먼저 요청을 보낼수 있다

그게 바로 소캣아이오가 웹소캣을 기반으로 하는 라이브러리입니다.

 

---

Socket.io

환경 셋팅

1. 설치하기

npm init -y

npm install express socket.io

socket 이다 주의!! soket 아님!!!!!!!!!

 

 

2. cdn 불러오기 (client)

https://socket.io/docs/v4/client-installation/

from a cdn 복사!

<script src="https://cdn.socket.io/4.6.0/socket.io.min.js" integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+" crossorigin="anonymous"></script>

 

3. soket.io 불러오기 ( server 구축 )

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + "/index.html");
})

http.listen( 8000, () => {
  console.log('Sever port : ', 8000 );
})

Cannot access 'express' before initialization

초기화 전에는 'express'에 액세스할 수 없습니다.

란 오류가 떳었는데.. 이거 내가 const express = require(express)라고 해서임 ㅠ ('express')라고 해줘야 한다.

 

 

---

연결하기

1. 클라이언트에서  let socket = io.connect();로  클라이언트 소켓 생성 후 연결

2. 서버에서 io.on('connection', 연결이되면, 콜벡 함수가 실행된다.

3. 콜백함수 (socket) 새로 소캣이 생성 된다. > 서버에 콘솔을 찍어서 (크롬x , vscode에서 확인 )

 

 

---

메세지를 주고 받기

소켓에서 제공하는 메소드 (이벤트를 기반)

socket.emit('이벤트명', data)                 > data는 객체든 뭐든 보낼 수 있다.

socket.on('이벤트명', (data) => { } )       > data 받을때는 콜벡함수로 받는다.

 

4. 이제 클라이언트 부분에서 socket.on ('connect, () => { }); 메세지 받기 함수를 쓴다.

'connect'는 정해져있는 부분임 !!! 이벤트 명은 뭘하든 상관 없다

  <script>
    // 이벤트 기반
    // 메세지 보내기 : socket.emit('이벤트명', data) // 데이타는 객체든 뭐든 상관 x
    // 메세지 받기 : socket.on('이벤트명', (data) => {}) // data 콜벡 함수로 받음

    // 클라이언트 소켓 생성 후 연결
    let socket = io.connect();

    socket.on('connect', () => {
      console.log('server connected');
    })
  </script>

 

 

 

이제 서버!

이부분은 다음에 다시! 채팅방 아이디 구분하는데 쓰이는 부분임

 

 

5. 소캣 연결이 끊기는  것도 표시해보겟다

코드를 적어주고 브라우저 새로고침 해보면,

소켓이 연결됫다 끊겻다 하는것을 확인 할 수 있다.

---

실습

 

캐치볼 개념 > 보내면 무조건 받는다

*** 서버에서 받은 데이터를 클라이언트에게 보낸다. 

 

// html

<button onclick="onHello()">hello</button>

    // 서버로 이벤트 보내고
    function onHello(){
      socket.emit('hello', {msg : 'client hello'})

    }
    socket.on('hello', (data) => {
      console.log(data);
    })
    
    
// js

  socket.on('hello', (data) => {
    console.log("hello data : ", data);
    socket.emit("hello", "hello : 안녕하세요!" ); //(7)
  })

 

선생님 풀이

한번에 이벤트 걸기

---

주의 할 점!

 

이렇게 하면 안된다

on은 기본적으로 이벤트입니다

connect라는 이벤트와

welcome이라는 받을 수 있는 이벤트가 등록 됨

 

이상태에서 hello 라는 함수를 이벤트를 실행하면

'respnse'라는 이벤트가 등록된다. (미리 등록/ 시점이 다르다)

웰컴은 되는데, 리스폰스는 안된다

socket.on? 이 실행이 안되서....?