[Flutter] WebSocket에 대한 정리

WebSocker에 대한 정리를 합니다. 

 

✅ 네트워크를 통해 서버로 데이터를 가져오기 위한 통신 방법에는 크게 두가지 방법이 있다. HTTP, webSocket 

 

1.Http: Client의 요청이 있을 때만 서버가 응답해서 정보를 전송하고 곧바로 연결을 끊는 방식 

Client가 요청을 보내고 server가 응답하는 단방향통신 (연결상태유지 x, stateless)

http의 실시간 통신 방식 

・ polling: 브라우저가 일정한 주기마다 서버에 http 요청을 보내는 방식으로 실시간 데이터의 업데이트 주기는 예측 불가능하므로 불필요한 요청에 따른 서버 및 네트워크의 부하가 늘어난다.

사용:  실시간성이 조금 떨어져도 되고 시간을 늘려 여러대의 클라이언트와 통신을 할 때 사용

 

・ long polling: polling의 서버 부하를 줄이면서 실시간성을 높이기 위한 방식으로 http 요청 시 서버는 해당 연결을 바로 해제하지 않고 일정시간 대기시킨다. 대기 시간 중 데이터가 업데이트가 일어났으면 바로 클라이언트에게 응답을 보내고 전달 받은 데이터를 처리한다. 

사용: 실시간성이 필요한 적은 수의 클라이언트와 연결되어 있는 경우 사용

 

・ streaming: 서버에 연결 요청을 보내놓고 계속 응답 데이터를 다운받는다. 서버는 이벤트가 발생하면 응답을 보낸다. 

 

2.websocket: Client와 server가 특정 port를 통해 연결을 성립하고 있어서 실시간으로 양방향 통신을 하는 방식

clinet와 server 서로 요청을 보낼 수 있는 양방향 통신(연결상태유지 o, stateful)

・ http의 반이중(half-duplex)방식이 아닌 진짜 양방향 통신인 전이중(full-duplex) 방식이다. 

half-duplex: 양방향 통신을 하지만 송수신을 동시에 할 수 없고 무전기 처럼 해야한다. 

특징

・ 최초 접속이 일반 http 요청을 이용한 handshaking으로 이루어진다. 

・ tcp socket은 바이트 스트림을 사용하지만 web socket은 utp-8 텍스트와 바이너리 둘 다 보낼 수 있다. 

・ 텍스트의 경우 시작과 끝에 0x00과 0xFF를 붙여서 사용한다. 

・ stateful

 -서버와 클라이언트가 한번 연결되면 계속 같은 라인을 사용해 통신하므로 http 사용시 필요없이 발생되는 http와 tcp 연결 트래픽을 피할 수 있다. 

 -웹소켓은 최초접속을 제외하면 헤더 정보를 보내지 않지만 http 프로토콜은 요청을 할 때마다 헤더정보를 보내게 되므로 네트워크 비용에서 이득이다. 

 

작동원리

・ 웹소켓 연결을 위해 http 통신을 한다. 

・ handshake 과정이 성공적으로 이뤄지면 http -> 웹 소켓 프로토콜로 변경하는 프로토콜 스위칭이 이뤄진다. 

・ 웹소켓을 위한 소켓이 생성되고 해당 소켓으로 전이중 통신을 한다. 

・ (소켓은 ws, wss가 있다. http, https와 같은 차이)

 

 

 

✅ Flutter에서 WebSocket 구현하기 이론

실시간 채팅 앱을 구현하기 위해서는 먼저 pubspce.yaml 파일에 web_socket_channel을 추가합니다. 

web_socket_channel은 기본적으로 양방향 통신 채널을 나타내는 추상 클래스인 StreamChannel 클래스와 함께 작동합니다. 

각 streamchannel은 데이터를 수신하기 위해 stream을 공개합니다. stream은 파이프와 같이 한쪽 끝에 값을 놓으면 다른 끝에 수신자가 있는 경우 해당 값을 수신합니다. 그리고 메시지를 서버에 푸시하기 위해서는 streamsink를 사용합니다. 

 

즉 이 패키지를 사용하면 서버로부터 메시지를 수신하거나 서버에 메시지를 전송할 수 있습니다. 

 

채팅방에 처음들어가는 경우

>> 서버와 통신하며 메시지를 주고받는다. 

기존 채팅방에 들어가는 경우

>> 그 전에 주고받은 메시지를 불러와야 한다 >> 상태관리(shared_preferences)

종료된 채팅방일 경우 

>> close 

 

✅ 참고

http통신 vs socket 통신 https://pearlluck.tistory.com/335

http vs webcocket 정리 https://ws-pace.tistory.com/104

https://dev.to/vibalijoshi/how-you-can-use-websockets-with-flutter-ipn