[포스코x코딩온] 웹개발자 풀스택 과정 9주차 | WebSocket

소켓(Socket)

• 서버와 클라이언트를 연결해주는 도구로써 인터페이스 역할을 하는 것
  • 서버 : 클라이언트 소켓의 연결 요청을 대기하고, 연결 요청이 오면 클라이언트 소켓을 생성해 통신을 가능하게 하는 것
• 소켓은 프로토콜, IP주소, 포트 넘버로 정의됨
• TCP와 UDP 프로토콜을 사용하여 데이터를 전송

소켓 프로그래밍(Socket Proframming)

• 소켓(Socket)을 사용하여 네트워크 통신 기능을 구현하는 과정

서버 소켓

• 연결 요청을 받아들이는 역할
• 클라이언트의 요청을 받아들여 실제 통신을 위한 소켓을 생성

클라이언트 소켓

• 서버에 연결을 요청하고, 연결이 수락되면 서버와 데이터를 주고받을 수 있는 소켓

포트

• 컴퓨터 내에서 소프트웨어 간에 통신을 할 때 사용되는 식별자
• 포트를 이용하여 특정 소켓을 찾고 연결

소켓 프로그래밍 흐름

참고블로그

• 서버소켓(Server Socket)

  1. 소켓(Socket)을 생성(Create)함
  2. 서버가 사용할 IP주소와 포트 번호를, 생성한 소켓에 결합(bind)시킴
  3. 클라이언트로부터 연결 요청이 수신되는지 주시(listen)함
  4. 요청이 수신되면 요청을 받아들여(accept) 데이터 통신을 위한 '새로운' 소켓을 생성함
  5. 연결 후 데이터를 송수신(send/recv)
  6. 데이터 송수신이 완료되면, 소켓(Socket)을 닫음(Close)

• 서버(Server) 소켓 함수

  • socket() : Socket 생성 함수
  • bind() : ip와 port 번호 설정 함수
  • listen() : 클라이언트 요청에 수신 대기열을 만드는 함수
  • accept() : 클라이언트와의 연결을 기다리는 함수

• 클라이언트 소켓(Client Socket)

  1. 소켓(Socket)을 생성(Create)함
  2. 서버 측에 연결(Connect)을 요청함
  3. 서버 소켓에서 연결이 받아들여지면 데이터를 송수신(send/recv)함
  4. 모든 처리가 완료되면 소켓(Socket)을 닫음(Close)
     
     

• 클라이언트(client) 함수

  • socket() : 소켓을 여는 함수
  • connect() : 통신할 서버의 설정된 ip와 port 번호에 통신을 시도하는 함수

• 주의 사항

  1. 최종적으로 클라이언트 소켓과 연결(Connect)이 만들어지는 소켓은 앞서 사용한 서버 소켓이 아니라, accept API내부에서 새로 만들어지는 소켓임
  2. 실질적인 데이터 송수신은 accept API에서 생성된, 연결(Connection)이 수립(Establish)된 소켓을 통해 처리됨

WebSocket

WebSocket이란?

• 서버와 클라이언트 간의 메세지 교환을 위한 통신 규약(프로토콜)

특징

• HTML5 웹 표준 기술
• 빠르게 작동하며 통신할 때 아주 적은 데이터 사용
• 이벤트를 단순히 듣고, 보내는 것만 가능
• HandShake : 클라이언트가 서버로 웹소켓을 연결하고 요청할 때, 서버와 클라이언트 간에 초기 HandShake가 이루어지며 이 HandShake 과정을 통해 웹소켓 연결
• 클라이언트 측에서는 브라우저의 Websocket 객체를 사용하여 웹소켓 연결을 생성하고 관리

WebSocket 이벤트

• open : 웹소켓 연결이 성공적으로 열렸을 때 발생
• message : 웹소켓을 통해 데이터를 주고받을 때 발생
• error : 웹소켓 연결 중 오류가 발생했을 때 발생. 연결실패, 통신오류 등이 해당
• close : 웹소켓 연결이 종료되었을 때 발생

클라이언트

서버(백엔드)

• 브라우저 환경에서는 WebSocket API를 사용하여 웹소켓 클라이언트를 만들 수 있지만, 서버를 만들려면 별도의 라이브러리나 모듈이 필요

npm install ws

ws 모듈 이벤트

• connection : 클라이언트가 웹소켓 서버에 연결되었을 때 발생. 이 이벤트의 콜백함수는 새로운 클라이언트 연결마다 실행
• message : 클라이언트로부터 메세지를 받았을 때 발생
• error : 웹소켓 연결 중 오류가 발생했을 대 발생
• close : 클라이언트와의 연결이 종료되었을 때 발생