Socket.io 에 대하여

#socket.io-client

출처: https://inpa.tistory.com/entry/SOCKET-%F0%9F%93%9A-SocketIO-%EC%82%AC%EC%9A%A9-%ED%95%B4%EB%B3%B4%EA%B8%B0   ( ****정말 잘쓴 블로그****)

  https://smaivnn.tistory.com/2#article-1--socket-io-%EC%9D%B4%EB%9E%80?

  https://velog.io/@fejigu/Socket.IO-client

 

 

1. Socket.io 이란?

socket.io를 알아보기 전, 웹 소켓에 대해 먼저 알아보자.

웹 소켓은 HTML5에 새로 추가된 실시간 양 방향 데이터 전송을 위한 기술이다.

http가 아닌 ws프로토콜을 사용하며, 따라서 브라우저, 서버가 ws프로토콜을 지원하면 사용 가능하다.

socket.io는 채팅방에 특화된 라이브러리라, 만일 양방향 통신 기술이 필요한데 채팅방이 아닌 다른 서비스를 구현한다고 한다면 socket.io는 맞지 않을수 있다.

Socket IO 이벤트 통신

소켓IO 의 메소드의 특징은 클라이언트에서 발생하는 이벤트는 개발자가 임의로 설정할 수 있다는 점이다.

이벤트는 문자열로 지정하며 직접 이벤트를 발생시킬 수 있다. 전반적으로 노드 이벤트 핸들러 방식Visit Website을 따르고 있다고 보면 된다.

출처: https://inpa.tistory.com/entry/SOCKET-📚-SocketIO-사용-해보기 [Inpa Dev 👨‍💻:티스토리]

// 소켓 서버를 열어준다.
const io = SocketIO(server, { path: "/socket.io" });
	// 소켓 연결이 되었을 때
  io.on("connection", (socket) => {
  // "chat message" 리스너로 들어온 이벤트를 받는다.
  // msg value는 클라이언트에서 "chat message"이벤트로 송신한 값
    socket.on("chat message", (msg) => {
    // 클라이언트에서 들어온 msg를 io 객체에 보낸다.
      io.emit("chat message", msg);
    });
  })

실행 프로세스를 알아보자.

서버측 코드에서 io 객체는 연결된 전체 클라이언트와의 상호작용을 위한 객체이고, socket 객체는 개별 클라이언트와의 상호작용을 위한 객체이다.

 

서버측에서는 소켓 서버를 열어둔다. 

소켓이 "connection"(연결)되었을때 개별 클라이언트에게 "chat message"이벤트로 이벤트가 송신되면 io객체, 즉 연결된 전체 클라이언트에게 들어온 msg를 보낸다. (연결이 종료되면 "disconnect"가 발생한다.)

 

클라이언트 측에서는 io()메소드를 호출하여 socket서버에 접속한다.

이후 버튼 클릭이 발생하였을 때, 서버측으로 "chat message"라는 이벤트로 현재의 input값을 보낸다. 이후 서버에서 다시 수신된 "chat message"에 대해서 scoket.on을 통해 받은 이후 화면에 추가하고 있다.

 

// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('event_name', msg);

// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
socket.emit('event_name', msg);

// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('event_name', msg);// 내 생각에는 서버에서 이 기능을 이용해 단톡방을 구현하면 될듯

// 특정 클라이언트에게만 메시지를 전송한다
io.to(id).emit('event_name', data);

출처: https://inpa.tistory.com/entry/SOCKET-📚-SocketIO-사용-해보기 [Inpa Dev 👨‍💻:티스토리]