Socket.io ?

• 을 알기전에 소켓을 먼저 알아보자

소켓 ?

• 소켓은 네트워트 계층중 7계층 중 물데네전세표응
  "응용 계층" 과 4계층 "전송 계층"을 연결해주는
  프로그래밍 인터페이스이다...

그럼 또.... OSI 모델은...?

• 아뇨? 7계층은 다음에 알아보자...

• 이 소켓을 이용해 IP 환경에서 통신을 할 수 있다.
• 소켓은 포트/프로토콜/IP로 정의된다 ( 호스트의 세가지가 필요함 )

다시 돌아와서...

• Socket.io는 이러한 (웹)소켓을 이용해, 클라이언트끼리 실시간으로 양방향 데이터 전송을 할 수 있게 해주는 라이브러리 이다.

• socket.io의 API를 이용해, 특정 사용자에게 전송, 모두에게 전송, 본인 제외, 그룹등 웹 채팅을 만들기에 아주 적합한 라이브러리.

설치

npm socket.io

서버에서
const io = require('socket.io')(http); 로 불러온뒤

io.on('connection', function (socket) {
  console.log(socket.id, 'Connected');

이러한 방식으로 시작하면된다.

첫번째 파라미터는 이벤트명 ( 클라이언트 - 서버간의 어떤 데이터인지 알 수 있는 이벤트 ).
두번째 파라미터는 이벤트를 받았을때 작동할 함수(콜백 함수)

• 데이터(이벤트)를 보내는 쪽은
  .emit 을 작성하여 데이터를 보낼 수 있다.

socket.emit('서버로 보낼 이벤트명(example)', 데이터(보낸 데이터));

• 데이터를 받는 쪽은 .on 으로 데이터를 받을 수 있다.

socket.on('받은 이벤트명(example)',(데이터(받은데이터))=>{
          데이터를 이용해서 출력/작동할 코드 작성});

emit으로 보내서 on 으로받고 이벤트 처리후 결과값 혹은 다른데이터를 emit으로 보내고 또 on 으로받아서 처리후 emit 으로 받고 .......

예

// server 
const io = require('socket.io')(http);
io.on('connection', function (socket) {
  console.log(socket.id, 'Connected');
  socket.emit('first',`${socket.id} 접속하신사람의 소켓아이디`);

// client
// client는 socket.io 를 script를 받아와야한다 (cdn)
  socket.on('first',(data)=>{
  h1.textContent=`${data}`
  })