WebSocket 실습 프로젝트 | Flutter 프론트 구성하기 (Cliend-To-Server)

WebSocket 통신을 위한 간단한 Flutter UI를 구성해 보았다.

WebSocket - Flutter 프론트 구성하기

WebSocket 프로젝트 - Flutter UI 구성하기

1. Flutter 프로젝트 생성

기본 프로젝트에 추가해 줄 의존성은 하나이다.

web_socket_channel

flutter pub add web_socket_channel

2. UI 구성

간단하게 버튼을 누르면 숫자를 서버로 보내서, 메시지를 받도록 구성해 보았다. 메시지를 받으면 숫자를 1씩 늘려줘 몇번 통신을 주고 받았는지 표시하였다.

final WebSocketChannel channel =
      WebSocketChannel.connect(Uri.parse('ws://localhost:8080/ws'));
var cnt = 1;

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    appBar: AppBar(
      title: Text('Thru WebSocket'),
    ),
    body: Column(
      children: [
        StreamBuilder(
          stream: channel.stream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              print('Waiting');
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              print('Error : ' + snapshot.error.toString());
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (snapshot.hasData) {
              print('Received Data : ' + snapshot.data);
              cnt++;
              return Center(child: Text('${snapshot.data}'));
            } else {
              print('No Data');
              return Center(child: Text('No data'));
            }
          },
        ),
        ElevatedButton(
          onPressed: () {
            channel.sink.add(cnt.toString());
          },
          child: Text('SEND'),
        )
      ],
    ),
  ),
);
}

@override
void dispose() {
channel.sink.close(status.goingAway);
super.dispose();
}

해당 내용을 아래 GitHub에서 확인할 수 있다.

websocket-flutter-frontend/lib/main.dart at main · YdMinS/websocket-flutter-frontend

실행 결과

처음 Waiting 상태에서 버튼을 누르면 Server에서 작성햇던 메시지를 수신하는 것을 확인할 수 있다.