WebSocket을 Flatter와 결합하는 방법

WebSocket이란?

Related:
What do you mean by client and a server?

Flatter를 사용하여 WebSocket 서버에 연결하는 방법

웹 socket channel 패키지

기본 사상

서버에 연결하는 방법

WebSocket 서버에 먼저 연결하겠습니다.위에서 설명한 대로 echo webSocket 서버를 사용하겠습니다

WebSocketChannel channel = IOWebSocketChannel.connect("wss://ws.ifelse.io/");

• WebSocketChannel: 웹소켓을 통해 통신하는 유통도(쌍방향 통신을 대표하는 종류).
• IOWebSocketChannel: dart:ioWebSocketChannel로 통신한WebSocket.
• IOWebSocketChannel.connect: 새 웹소켓 연결을 만들고 WebSocket.connect로 url에 연결하고 생성된 플러그인을 통해 통신할 수 있는 채널을 되돌려줍니다.
• 여기wss://ws.ifelse.io/는 echo WebSocket 서버입니다.가장 자주 사용하는 echo 서버 ws://echo.websocket.org 는 더 이상 사용하지 않습니다.

How to listen to the server

• 이제 연결이 되었으니 서버에서 온 소식을 들어보겠습니다.
• 테스트 서버에 메시지를 보내면 같은 메시지를 돌려보냅니다(echo).
• 우리는 StreamBuilder 소부품을 사용하여 새로운 소식을 감청하고 Text 소부품을 사용하여 그것들을 표시할 것이다.
• StreamBuilder:
  
  1. 노출된 흐름을 감청할 수 있다.
  2. 소부품 반환
  3. 얻은 흐름 정보의 스냅샷을 포착한다.
     
  
  

StreamBuilder(  
  stream: widget.channel.stream,  
  builder: (context, snapshot) {  
    return Padding(  
      padding: const EdgeInsets.all(20.0),  
  child: Text(snapshot.hasData ? '${snapshot.data}' : ''),  
  );  
  },  
)

Watch this video to get a better idea about StreamBuilder:

How to Send data to the server

부동 단추를 눌렀을 때 흐름에 데이터를 보내는 함수sendData()를 추가합니다

void sendData() {  
  if (_controller.text.isNotEmpty) {  
    widget.channel.sink.add(_controller.text);  
  }  
}

• channel.sink.add():WebSocketChannel의sink 속성을 사용하여 값을 흐름의 다른 단점(즉 서버)으로 전송합니다.
• 빈 데이터가 아닌 것을 확인하기 위해

How to close the connection?

close 방법을 사용하면 서버와의 연결을 끊을 수 있습니다

void dispose() {  
  widget.channel.sink.close();  
 super.dispose();  
}

Final Code

서버에 성공적으로 연결하면 아날로그에서 이 점을 볼 수 있습니다

이것이 바로 응용 프로그램이 끝을 어떻게 보아야 하는지입니다:

Where can you use it?

WebSockets가 등장하기 전부터 실시간 웹은 존재했지만 실현하기 어려웠고 속도가 느리며 비실시간 응용 프로그램에 기반한 해커 네트워크 기술이었다.WebSocket 프로토콜은 진정한 실시간 네트워크를 위해 길을 닦았고 인터넷 통신의 가능성을 확장하였습니다

용례:

• 온라인 기반 게임
• 채팅 애플리케이션