[실시간 채팅 웹앱 만들기](0) - 필요지식 학습

yoon Y·2022년 10월 13일
0

실시간 채팅 기능을 만들기 위해선 webSocket Api를 이용해 통신해야한다.
서버와 클라이언트에 각각 Socket통신 설정과 이벤트 등록을 해야한다.
express를 사용해 서버를 구축하고 socket.io라이브러리를 사용하기로 결정했다.

서버와 NodeJS의 의미

서버는 클라이언트의 요청을 받아 데이터를 전달해주는 프로그램.
NodeJS는 컴퓨터에서 js를 실행하도록 해주는 js런타임 환경.
js만든 서버 프로그램을 컴퓨터에서 실행시켜준다.
https://anywaydevlog.tistory.com/60

express란?

NodeJS환경에서 실행되는 서버를 쉽게 만들 수 있는 프레임워크.
express모듈을 실행해서 반환된 객체에 포함된 여러 메소드를 사용하면 된다.

webSocket을 이용한 통신이 아닌 http통신을 할 때에는
express에서 제공하는 메소드를 사용해 통신한다.
https://contents.premium.naver.com/codetree/funcoding/contents/220603011215368hw
https://any-ting.tistory.com/14


webSocket이란?

실시간 통신을 할 수 있게 해주는 web api로 ws프로토콜을 이용해 통신한다.
서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있다.
전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이루어지고 이벤트 기반으로 동작하게 된다.
하지만 지원하지 않는 브라우저도 있다.

webSocket에 통신할 서버의 주소를 넣고 실행하면 커넥션이 된다.
반환된 인스턴스에 있는 여러 이벤트와 메소드를 사용해 동작을 정의할 수 있다.
커넥션 이후에 이벤트가 발생하면 등록된 핸들러가 실행된다.

let socket = new WebSocket("ws://javascript.info");

https://jjshun.tistory.com/46

socket.io란?

Socket.io는 WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling을 하나의 API로 추상화한 것이다.
브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식으로 webSocket과 달리 모든 브라우저에서 사용가능 하다.

(예시 - 브라우저에 Flash Plugin v10.0.0 이상(FlashSocket 지원 버전)이 설치되어 있으면 FlashSocket을 사용하고, Flash Plugin이 없으면 AJAX Long Polling 방식을 사용한다.)

socket 그룹짓기

NameSpace는 채널
Room은 채팅룸
socket은 서버와 연결된 클라이언트

Room

클라이언트에서 이벤트와 필요한 인수를 전송하면 서버에서 처리한다.

이벤트
create-room(인수: 방)
delete-room(인수: 방)
join-room(인수: 방, 아이디)
leave-room(인수: 방, 아이디)


io.of("/").adapter.on("create-room", (room) => {
  console.log(`room ${room} was created`);
});

io.of("/").adapter.on("join-room", (room, id) => {
  console.log(`socket ${id} has joined room ${room}`);
});

room정보 구하기

io.sockets.manager.rooms // 모든 룸 리스트

io.sockets.clients('room') // 룸 참여자들

io.sockets.manager.roomClients[socket.id] // 특정 참여자가 속한 룸들

https://gipyeonglee.tistory.com/99


Socket더 깊게 알아보기

Http통신과 Socket통신의 차이?

소켓이란?

소켓은 전송계층에 존재하는, 두 프로세스가 통신을 하기 위한 인터페이스이다.
통신을 위한 일종의 통로라고 할 수 있다.
TCP, UDP둘 중 하나의 프로토콜을 사용할 수 있다.

결국 HTTP 통신은 소켓 통신이다.

통신을 하기 위해서는 소켓이 구현되고, 두 프로그램의 소켓이 연결되어야 한다.
HTTP프로토콜은 무상태의 단방향 통신을 규정하고 있기 때문에 HTTP프로토콜을 사용한 통신에서는
클라 요청 - 서버 응답 - 연결 끝의 과정으로 통신하는 것뿐이다.

webSocket이란?

7계층에서 작동하는 프로토콜로 HTTP 프로토콜과 호환되어,
웹 브라우저와 서버 간의 실시간 통신을 편하게 할 수 있게 해준다.
실시간 통신에서 HTTP 프로토콜의 한계를 극복하기 위해 등장했다.

webSocket동작 방식

  1. 한번의 http요청-응답을 통해 연결을 수립한다. (핸드쉐이크)

    • Connection헤더로 websocket으로 프로토콜 변경 요청(그 외 필요한 헤더 필드 같이 전송)
    • 101상태코드로 프로토콜 변경 허용
  2. 이후 http프로토콜을 웹소켓 프로토콜로 변환하여 실시간 양방향 통신을 한다.

    // 요청 헤더
    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
    
    // 응답 헤더
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat

socket이 있는데 왜 webSocket을 사용하는 걸까?
웹에서도 TCP 소켓 통신으로 실시간 통신을 할 수는 있지만 전송 계층의 원시 바이트 대신 7계층을 통해 메시지를 보내는 것이 개발 측면에서 더 적합하기 때문에 TCP 소켓통신에 기반하여 웹 소켓을 발전시켰다. 웹 소켓은 TCP 소켓과 구분되는 것이 아니라 TCP 소켓의 추상화된 형태로,
소켓 통신에 기반하여 웹 소켓은 웹 어플리케이션에 맞게 발전한 형태로 소켓 통신을 하는 것이다.

최종 정리
클라이언트와 서버의 통신은 4계층에서 socket을 통해 이루어진다.
http프로토콜은 단방향 무상태의 통신을 하도록 정의되어있다.
webSocket프로토콜은 http프로토콜과 호환하여 7계층을 통해 메세지 형태로 데이터를 전송하면서도, 실시간 양방향 통신을 가능하게 해준다.

https://tecoble.techcourse.co.kr/post/2020-09-20-websocket/
https://gusrb3164.github.io/web/2021/10/28/websocket-socket/

profile
#프론트엔드

0개의 댓글