Flutter 튜토리얼 31편: WebSocket 실시간 통신

요약#

핵심 요지#

문제 정의: HTTP는 클라이언트가 요청해야 응답을 받는다. 서버가 먼저 데이터를 보내려면 다른 방식이 필요하다.
핵심 주장: WebSocket은 연결을 유지한 채 서버와 클라이언트가 자유롭게 메시지를 주고받을 수 있다.
주요 근거: 채팅, 알림, 실시간 대시보드 등 즉각적인 업데이트가 필요한 기능에 적합하다.
실무 기준: 연결 관리, 재연결 로직, 메시지 파싱까지 실제 앱 수준으로 구현한다.
한계: 복잡한 실시간 기능에는 Firebase, Socket.IO 같은 고수준 솔루션을 고려해야 한다.

문서가 설명하는 범위#

HTTP와 WebSocket의 차이
web_socket_channel 패키지 사용법
연결, 메시지 송수신, 연결 종료
StreamBuilder로 실시간 UI 업데이트
간단한 채팅 앱 구현
연결 상태 관리와 재연결

읽는 시간: 15분 | 난이도: 중급

참고 자료#

Communicate with WebSockets - 공식 WebSocket 가이드
web_socket_channel package - WebSocket 패키지
Stream class - Dart Stream API

문제 상황#

29편과 30편에서 HTTP로 서버와 통신하는 방법을 배웠습니다. 하지만 HTTP에는 한계가 있습니다.

HTTP의 한계#

1
상황: 채팅 앱에서 새 메시지가 왔는지 확인하고 싶다
2

3
HTTP 방식:
4
1. 클라이언트가 서버에 요청 → "새 메시지 있어?"
5
2. 서버가 응답 → "없어" 또는 "있어, 여기"
6
3. 1초 후 다시 요청 → "새 메시지 있어?"
7
4. 계속 반복... (폴링)

문제는 다음과 같습니다.

새 메시지가 없어도 계속 요청해야 한다 (비효율적).
요청 주기가 길면 메시지가 늦게 도착한다.
요청 주기가 짧으면 서버 부하가 커진다.

WebSocket은 이 문제를 해결합니다. 연결을 한 번 맺으면, 서버가 새 메시지가 있을 때 먼저 보내줍니다.

해결 방법#

WebSocket은 양방향 통신을 제공합니다. 한 번 연결하면 서버와 클라이언트 모두 자유롭게 메시지를 보낼 수 있습니다.

graph LR subgraph HTTP C1[클라이언트] -->|요청| S1[서버] S1 -->|응답| C1 end subgraph WebSocket C2[클라이언트] <-->|양방향| S2[서버] end

챕터 1: WebSocket 기초 개념#

Why#

NOTE
HTTP와 WebSocket의 차이를 이해해야 적절한 상황에 사용할 수 있습니다.
HTTP: 요청-응답 모델

클라이언트가 요청하면 서버가 응답

한 번의 요청에 한 번의 응답

연결이 바로 끊어짐

WebSocket: 양방향 스트림

연결을 유지한 채 메시지 교환

서버도 먼저 메시지를 보낼 수 있음

연결을 명시적으로 끊을 때까지 유지

What#

NOTE
WebSocket 사용 사례를 알아봅시다.
WebSocket이 적합한 경우:

채팅 앱 (새 메시지 실시간 수신)

실시간 알림 (푸시 알림 대체)

주식/코인 시세 (가격 실시간 업데이트)

멀티플레이어 게임 (플레이어 위치 동기화)

협업 도구 (문서 동시 편집)

HTTP가 여전히 적합한 경우:

CRUD 작업 (데이터 생성, 조회, 수정, 삭제)

파일 업로드/다운로드

인증 (로그인, 토큰 발급)

검색, 필터링

How#

TIP
Flutter에서 WebSocket을 사용하려면 web_socket_channel 패키지를 설치합니다.
Terminal window
1
flutter pub add web_socket_channel
기본 사용법은 다음과 같습니다.
1
import 'package:web_socket_channel/web_socket_channel.dart';
2

3
// 1. 연결
4
final channel = WebSocketChannel.connect(
5
  Uri.parse('wss://echo.websocket.events'),
6
);
7

8
// 2. 메시지 받기
9
channel.stream.listen((message) {
10
  print('받은 메시지: $message');
11
});
12

13
// 3. 메시지 보내기
14
channel.sink.add('안녕하세요!');
15

16
// 4. 연결 종료
17
channel.sink.close();
wss://는 보안 WebSocket(WebSocket Secure)입니다. HTTPS처럼 암호화된 연결을 제공합니다.

Watch out#

WARNING
ws vs wss: ws://는 암호화되지 않은 연결입니다. 프로덕션에서는 반드시 wss://를 사용하세요.
에코 서버: wss://echo.websocket.events는 테스트용 서버입니다. 보낸 메시지를 그대로 돌려보내줍니다. 실제 앱에서는 본인의 서버를 사용해야 합니다.

챕터 2: 연결하고 메시지 받기#

Why#

NOTE
WebSocket의 핵심은 Stream입니다. Stream은 시간에 따라 여러 값을 전달하는 비동기 시퀀스입니다.

Future: 하나의 값을 나중에 전달

Stream: 여러 값을 시간에 따라 전달

WebSocket 메시지는 Stream으로 들어옵니다. 새 메시지가 올 때마다 이벤트가 발생합니다.

What#

NOTE

StreamBuilder로 실시간 메시지를 화면에 표시합니다.

1
StreamBuilder(
2
  stream: channel.stream,
3
  builder: (context, snapshot) {
4
    // 연결 상태 확인
5
    if (snapshot.connectionState == ConnectionState.waiting) {
6
      return Text('연결 중...');
7
    }
8

9
    // 에러 확인
10
    if (snapshot.hasError) {
11
      return Text('에러: ${snapshot.error}');
12
    }
13

14
    // 데이터 표시
15
    if (snapshot.hasData) {
16
      return Text('받은 메시지: ${snapshot.data}');
17
    }
18

19
    return Text('메시지를 기다리는 중...');
20
  },
21
)

FutureBuilder vs StreamBuilder:

FutureBuilder: 데이터가 한 번 오면 완료
StreamBuilder: 데이터가 계속 올 때마다 업데이트

How#

TIP

전체 예제를 만들어봅시다.

1
import 'package:flutter/material.dart';
2
import 'package:web_socket_channel/web_socket_channel.dart';
3

4
class WebSocketDemo extends StatefulWidget {
5
  @override
6
  _WebSocketDemoState createState() => _WebSocketDemoState();
7
}
8

9
class _WebSocketDemoState extends State<WebSocketDemo> {
10
  final _controller = TextEditingController();
11
  late WebSocketChannel _channel;
12

13
  @override
14
  void initState() {
15
    super.initState();
16
    _connectToServer();
17
  }
18

19
  void _connectToServer() {
20
    _channel = WebSocketChannel.connect(
21
      Uri.parse('wss://echo.websocket.events'),
22
    );
23
  }
24

25
  void _sendMessage() {
26
    if (_controller.text.isNotEmpty) {
27
      _channel.sink.add(_controller.text);
28
      _controller.clear();
29
    }
30
  }
31

32
  @override
33
  void dispose() {
34
    _channel.sink.close();
35
    _controller.dispose();
36
    super.dispose();
37
  }
38

39
  @override
40
  Widget build(BuildContext context) {
41
    return Scaffold(
42
      appBar: AppBar(title: Text('WebSocket 데모')),
43
      body: Padding(
44
        padding: EdgeInsets.all(16),
45
        child: Column(
46
          children: [
47
            // 메시지 입력
48
            Row(
49
              children: [
50
                Expanded(
51
                  child: TextField(
52
                    controller: _controller,
53
                    decoration: InputDecoration(
54
                      labelText: '메시지 입력',
55
                      border: OutlineInputBorder(),
56
                    ),
57
                  ),
58
                ),
59
                SizedBox(width: 8),
60
                IconButton(
61
                  icon: Icon(Icons.send),
62
                  onPressed: _sendMessage,
63
                ),
64
              ],
65
            ),
66

67
            SizedBox(height: 24),
68

69
            // 받은 메시지 표시
70
            Expanded(
71
              child: StreamBuilder(
72
                stream: _channel.stream,
73
                builder: (context, snapshot) {
74
                  if (snapshot.hasError) {
75
                    return Center(
76
                      child: Text('연결 오류: ${snapshot.error}'),
77
                    );
78
                  }
79

80
                  if (snapshot.hasData) {
81
                    return Center(
82
                      child: Text(
83
                        '서버 응답: ${snapshot.data}',
84
                        style: TextStyle(fontSize: 18),
85
                      ),
86
                    );
87
                  }
88

89
                  return Center(
90
                    child: Text('메시지를 보내보세요'),
91
                  );
92
                },
93
              ),
94
            ),
95
          ],
96
        ),
97
      ),
98
    );
99
  }
100
}

메시지를 보내면 에코 서버가 같은 메시지를 돌려보냅니다.

Watch out#

WARNING
Stream은 한 번만 listen할 수 있습니다:
1
// 에러! 같은 스트림을 두 번 사용
2
channel.stream.listen(...);  // 첫 번째 리스너
3
StreamBuilder(stream: channel.stream, ...);  // 두 번째 리스너 - 에러!
여러 곳에서 사용하려면 broadcast 스트림으로 변환하세요.
1
final broadcastStream = channel.stream.asBroadcastStream();
dispose에서 반드시 close: 연결을 닫지 않으면 리소스 누수가 발생합니다.

챕터 3: 채팅 앱 만들기#

Why#

NOTE
WebSocket의 대표적인 사용 사례는 채팅입니다. 실제 채팅 앱처럼 메시지 목록을 관리하고 화면에 표시해봅시다.
핵심 기능:

메시지 목록 유지 (List)

새 메시지 실시간 추가

스크롤 자동 이동

What#

NOTE
채팅 메시지 모델을 정의합니다.
1
class ChatMessage {
2
  final String text;
3
  final bool isMe;  // 내가 보낸 메시지인지
4
  final DateTime timestamp;
5

6
  ChatMessage({
7
    required this.text,
8
    required this.isMe,
9
    DateTime? timestamp,
10
  }) : timestamp = timestamp ?? DateTime.now();
11
}
메시지를 구분하면 UI에서 다르게 표시할 수 있습니다.

내 메시지: 오른쪽 정렬, 파란색 배경

상대 메시지: 왼쪽 정렬, 회색 배경

How#

TIP

완성된 채팅 화면입니다.

1
class ChatScreen extends StatefulWidget {
2
  @override
3
  _ChatScreenState createState() => _ChatScreenState();
4
}
5

6
class _ChatScreenState extends State<ChatScreen> {
7
  final _controller = TextEditingController();
8
  final _scrollController = ScrollController();
9
  final List<ChatMessage> _messages = [];
10

11
  late WebSocketChannel _channel;
12
  late StreamSubscription _subscription;
13

14
  @override
15
  void initState() {
16
    super.initState();
17
    _connectToServer();
18
  }
19

20
  void _connectToServer() {
21
    _channel = WebSocketChannel.connect(
22
      Uri.parse('wss://echo.websocket.events'),
23
    );
24

25
    // 메시지 수신 리스너
26
    _subscription = _channel.stream.listen(
27
      (message) {
28
        setState(() {
29
          _messages.add(ChatMessage(
30
            text: message,
31
            isMe: false,  // 서버에서 온 메시지
32
          ));
33
        });
34
        _scrollToBottom();
35
      },
36
      onError: (error) {
37
        print('WebSocket 에러: $error');
38
      },
39
      onDone: () {
40
        print('WebSocket 연결 종료');
41
      },
42
    );
43
  }
44

45
  void _sendMessage() {
46
    final text = _controller.text.trim();
47
    if (text.isEmpty) return;
48

49
    // 내 메시지 추가
50
    setState(() {
51
      _messages.add(ChatMessage(
52
        text: text,
53
        isMe: true,
54
      ));
55
    });
56

57
    // 서버로 전송
58
    _channel.sink.add(text);
59
    _controller.clear();
60
    _scrollToBottom();
61
  }
62

63
  void _scrollToBottom() {
64
    WidgetsBinding.instance.addPostFrameCallback((_) {
65
      if (_scrollController.hasClients) {
66
        _scrollController.animateTo(
67
          _scrollController.position.maxScrollExtent,
68
          duration: Duration(milliseconds: 300),
69
          curve: Curves.easeOut,
70
        );
71
      }
72
    });
73
  }
74

75
  @override
76
  void dispose() {
77
    _subscription.cancel();
78
    _channel.sink.close();
79
    _controller.dispose();
80
    _scrollController.dispose();
81
    super.dispose();
82
  }
83

84
  @override
85
  Widget build(BuildContext context) {
86
    return Scaffold(
87
      appBar: AppBar(title: Text('채팅')),
88
      body: Column(
89
        children: [
90
          // 메시지 목록
91
          Expanded(
92
            child: ListView.builder(
93
              controller: _scrollController,
94
              padding: EdgeInsets.all(16),
95
              itemCount: _messages.length,
96
              itemBuilder: (context, index) {
97
                return ChatBubble(message: _messages[index]);
98
              },
99
            ),
100
          ),
101

102
          // 입력 영역
103
          Container(
104
            padding: EdgeInsets.all(8),
105
            decoration: BoxDecoration(
106
              color: Colors.white,
107
              boxShadow: [
108
                BoxShadow(
109
                  color: Colors.black12,
110
                  blurRadius: 4,
111
                ),
112
              ],
113
            ),
114
            child: Row(
115
              children: [
116
                Expanded(
117
                  child: TextField(
118
                    controller: _controller,
119
                    decoration: InputDecoration(
120
                      hintText: '메시지 입력...',
121
                      border: OutlineInputBorder(
122
                        borderRadius: BorderRadius.circular(24),
123
                      ),
124
                      contentPadding: EdgeInsets.symmetric(
125
                        horizontal: 16,
126
                        vertical: 8,
127
                      ),
128
                    ),
129
                    onSubmitted: (_) => _sendMessage(),
130
                  ),
131
                ),
132
                SizedBox(width: 8),
133
                CircleAvatar(
134
                  child: IconButton(
135
                    icon: Icon(Icons.send),
136
                    onPressed: _sendMessage,
137
                  ),
138
                ),
139
              ],
140
            ),
141
          ),
142
        ],
143
      ),
144
    );
145
  }
146
}

채팅 버블 위젯입니다.

1
class ChatBubble extends StatelessWidget {
2
  final ChatMessage message;
3

4
  const ChatBubble({required this.message});
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return Align(
9
      alignment: message.isMe
10
          ? Alignment.centerRight
11
          : Alignment.centerLeft,
12
      child: Container(
13
        margin: EdgeInsets.only(
14
          bottom: 8,
15
          left: message.isMe ? 64 : 0,
16
          right: message.isMe ? 0 : 64,
17
        ),
18
        padding: EdgeInsets.symmetric(
19
          horizontal: 16,
20
          vertical: 10,
21
        ),
22
        decoration: BoxDecoration(
23
          color: message.isMe
24
              ? Colors.blue
25
              : Colors.grey.shade200,
26
          borderRadius: BorderRadius.circular(16),
27
        ),
28
        child: Text(
29
          message.text,
30
          style: TextStyle(
31
            color: message.isMe ? Colors.white : Colors.black,
32
          ),
33
        ),
34
      ),
35
    );
36
  }
37
}

Watch out#

WARNING
에코 서버 특성: 테스트 서버는 보낸 메시지를 그대로 돌려보냅니다. 그래서 내 메시지가 두 번 표시될 수 있습니다. 실제 채팅 서버에서는 다른 사용자의 메시지만 받습니다.
키보드와 스크롤: 키보드가 올라오면 메시지가 가려질 수 있습니다. resizeToAvoidBottomInset: true(기본값)로 처리됩니다.

챕터 4: 연결 상태 관리#

Why#

NOTE
실제 앱에서는 연결이 끊어질 수 있습니다.

네트워크 불안정

서버 재시작

앱이 백그라운드로 이동

연결 상태를 추적하고 자동 재연결하는 게 좋습니다.

What#

NOTE
연결 상태를 enum으로 정의합니다.
1
enum ConnectionStatus {
2
  connecting,   // 연결 중
3
  connected,    // 연결됨
4
  disconnected, // 연결 끊김
5
  error,        // 에러 발생
6
}
상태에 따라 UI를 다르게 표시합니다.

연결 중: 로딩 표시

연결됨: 정상 UI

끊김: 재연결 버튼

How#

TIP

연결 상태 관리와 재연결 로직입니다.

1
class _ChatScreenState extends State<ChatScreen> {
2
  ConnectionStatus _status = ConnectionStatus.disconnected;
3
  WebSocketChannel? _channel;
4
  StreamSubscription? _subscription;
5
  Timer? _reconnectTimer;
6

7
  @override
8
  void initState() {
9
    super.initState();
10
    _connect();
11
  }
12

13
  Future<void> _connect() async {
14
    if (_status == ConnectionStatus.connecting) return;
15

16
    setState(() {
17
      _status = ConnectionStatus.connecting;
18
    });
19

20
    try {
21
      _channel = WebSocketChannel.connect(
22
        Uri.parse('wss://echo.websocket.events'),
23
      );
24

25
      // 연결 성공을 기다림
26
      await _channel!.ready;
27

28
      setState(() {
29
        _status = ConnectionStatus.connected;
30
      });
31

32
      _subscription = _channel!.stream.listen(
33
        _onMessage,
34
        onError: _onError,
35
        onDone: _onDone,
36
      );
37
    } catch (e) {
38
      setState(() {
39
        _status = ConnectionStatus.error;
40
      });
41
      _scheduleReconnect();
42
    }
43
  }
44

45
  void _onMessage(dynamic message) {
46
    setState(() {
47
      _messages.add(ChatMessage(text: message, isMe: false));
48
    });
49
  }
50

51
  void _onError(dynamic error) {
52
    print('WebSocket 에러: $error');
53
    setState(() {
54
      _status = ConnectionStatus.error;
55
    });
56
    _scheduleReconnect();
57
  }
58

59
  void _onDone() {
60
    print('WebSocket 연결 종료');
61
    setState(() {
62
      _status = ConnectionStatus.disconnected;
63
    });
64
    _scheduleReconnect();
65
  }
66

67
  void _scheduleReconnect() {
68
    _reconnectTimer?.cancel();
69
    _reconnectTimer = Timer(Duration(seconds: 3), () {
70
      if (_status != ConnectionStatus.connected) {
71
        _connect();
72
      }
73
    });
74
  }
75

76
  void _disconnect() {
77
    _reconnectTimer?.cancel();
78
    _subscription?.cancel();
79
    _channel?.sink.close();
80
    setState(() {
81
      _status = ConnectionStatus.disconnected;
82
    });
83
  }
84

85
  @override
86
  void dispose() {
87
    _disconnect();
88
    super.dispose();
89
  }
90

91
  // 상태 표시 위젯
92
  Widget _buildStatusIndicator() {
93
    Color color;
94
    String text;
95

96
    switch (_status) {
97
      case ConnectionStatus.connecting:
98
        color = Colors.orange;
99
        text = '연결 중...';
100
        break;
101
      case ConnectionStatus.connected:
102
        color = Colors.green;
103
        text = '연결됨';
104
        break;
105
      case ConnectionStatus.disconnected:
106
        color = Colors.grey;
107
        text = '연결 끊김';
108
        break;
109
      case ConnectionStatus.error:
110
        color = Colors.red;
111
        text = '오류';
112
        break;
113
    }
114

115
    return Container(
116
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
117
      decoration: BoxDecoration(
118
        color: color.withOpacity(0.1),
119
        borderRadius: BorderRadius.circular(12),
120
      ),
121
      child: Row(
122
        mainAxisSize: MainAxisSize.min,
123
        children: [
124
          Container(
125
            width: 8,
126
            height: 8,
127
            decoration: BoxDecoration(
128
              color: color,
129
              shape: BoxShape.circle,
130
            ),
131
          ),
132
          SizedBox(width: 6),
133
          Text(text, style: TextStyle(color: color)),
134
        ],
135
      ),
136
    );
137
  }
138
}

AppBar에 상태 표시기를 추가합니다.

1
AppBar(
2
  title: Text('채팅'),
3
  actions: [
4
    Padding(
5
      padding: EdgeInsets.only(right: 16),
6
      child: Center(child: _buildStatusIndicator()),
7
    ),
8
  ],
9
)

Watch out#

WARNING
무한 재연결 방지: 재연결 횟수를 제한하거나 지수 백오프를 적용하세요.
1
int _reconnectAttempts = 0;
2
static const maxAttempts = 5;
3

4
void _scheduleReconnect() {
5
  if (_reconnectAttempts >= maxAttempts) {
6
    print('최대 재연결 시도 횟수 초과');
7
    return;
8
  }
9

10
  _reconnectAttempts++;
11
  final delay = Duration(seconds: _reconnectAttempts * 2);  // 지수 백오프
12

13
  _reconnectTimer = Timer(delay, _connect);
14
}
백그라운드 처리: 앱이 백그라운드로 가면 연결을 끊고, 포그라운드로 돌아오면 재연결하는 게 좋습니다. WidgetsBindingObserver로 앱 상태를 감지할 수 있습니다.

챕터 5: JSON 메시지 처리#

Why#

NOTE
실제 서버는 단순 문자열이 아니라 JSON을 주고받습니다. 메시지 타입, 발신자 정보, 타임스탬프 등이 포함됩니다.
1
{
2
  "type": "message",
3
  "sender": "user123",
4
  "content": "안녕하세요!",
5
  "timestamp": "2024-01-15T10:30:00Z"
6
}

What#

NOTE

JSON 메시지를 파싱하고 직렬화합니다.

1
import 'dart:convert';
2

3
// 수신 메시지 파싱
4
void _onMessage(dynamic data) {
5
  try {
6
    final json = jsonDecode(data as String);
7
    final type = json['type'] as String;
8

9
    switch (type) {
10
      case 'message':
11
        _handleChatMessage(json);
12
        break;
13
      case 'user_joined':
14
        _handleUserJoined(json);
15
        break;
16
      case 'user_left':
17
        _handleUserLeft(json);
18
        break;
19
      default:
20
        print('알 수 없는 메시지 타입: $type');
21
    }
22
  } catch (e) {
23
    print('메시지 파싱 에러: $e');
24
  }
25
}
26

27
void _handleChatMessage(Map<String, dynamic> json) {
28
  setState(() {
29
    _messages.add(ChatMessage(
30
      text: json['content'] as String,
31
      sender: json['sender'] as String,
32
      isMe: json['sender'] == _myUserId,
33
    ));
34
  });
35
}

메시지 전송도 JSON으로 합니다.

1
void _sendMessage(String text) {
2
  final message = {
3
    'type': 'message',
4
    'content': text,
5
    'timestamp': DateTime.now().toIso8601String(),
6
  };
7

8
  _channel?.sink.add(jsonEncode(message));
9
}

How#

TIP

메시지 모델을 확장합니다.

1
class ChatMessage {
2
  final String type;
3
  final String? sender;
4
  final String content;
5
  final DateTime timestamp;
6
  final bool isMe;
7

8
  ChatMessage({
9
    required this.type,
10
    this.sender,
11
    required this.content,
12
    required this.timestamp,
13
    required this.isMe,
14
  });
15

16
  factory ChatMessage.fromJson(
17
    Map<String, dynamic> json,
18
    String myUserId,
19
  ) {
20
    return ChatMessage(
21
      type: json['type'] as String,
22
      sender: json['sender'] as String?,
23
      content: json['content'] as String,
24
      timestamp: DateTime.parse(json['timestamp'] as String),
25
      isMe: json['sender'] == myUserId,
26
    );
27
  }
28

29
  Map<String, dynamic> toJson() {
30
    return {
31
      'type': type,
32
      if (sender != null) 'sender': sender,
33
      'content': content,
34
      'timestamp': timestamp.toIso8601String(),
35
    };
36
  }
37
}

시스템 메시지도 처리합니다.

1
Widget _buildMessage(ChatMessage message) {
2
  if (message.type == 'system') {
3
    return Center(
4
      child: Container(
5
        margin: EdgeInsets.symmetric(vertical: 8),
6
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
7
        decoration: BoxDecoration(
8
          color: Colors.grey.shade300,
9
          borderRadius: BorderRadius.circular(12),
10
        ),
11
        child: Text(
12
          message.content,
13
          style: TextStyle(color: Colors.grey.shade700, fontSize: 12),
14
        ),
15
      ),
16
    );
17
  }
18

19
  return ChatBubble(message: message);
20
}

Watch out#

WARNING
에러 처리: 서버가 잘못된 JSON을 보낼 수 있습니다. 항상 try-catch로 감싸세요.
타입 안전성: as String으로 캐스팅할 때 null이면 에러납니다.
1
// 위험
2
final sender = json['sender'] as String;
3

4
// 안전
5
final sender = json['sender'] as String? ?? 'Unknown';

한계#

이 튜토리얼에서 다룬 web_socket_channel은 기본적인 WebSocket 통신에 적합합니다. 더 복잡한 실시간 기능이 필요하면 다른 도구를 고려하세요.

web_socket_channel의 한계:

기능	web_socket_channel	Socket.IO / Firebase
기본 연결	O	O
자동 재연결	X (직접 구현)	O
룸/채널 개념	X	O
이벤트 기반 API	X	O
오프라인 동기화	X	O (Firebase)
백엔드 SDK	X	O

대안 솔루션:

Socket.IO: 이벤트 기반, 자동 재연결, 폴백 지원
Firebase Realtime Database: 실시간 동기화, 오프라인 지원
Firebase Cloud Firestore: 더 복잡한 쿼리 지원
Supabase Realtime: PostgreSQL 기반 실시간 업데이트

WebSocket은 실시간 통신의 기초입니다. 이 개념을 이해하면 고수준 라이브러리도 쉽게 사용할 수 있습니다.

Flutter 튜토리얼 31편: WebSocket 실시간 통신

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

HTTP의 한계#

해결 방법#

챕터 1: WebSocket 기초 개념#

Why#

What#

How#

Watch out#

챕터 2: 연결하고 메시지 받기#

Why#

What#

How#

Watch out#

챕터 3: 채팅 앱 만들기#

Why#

What#

How#

Watch out#

챕터 4: 연결 상태 관리#

Why#

What#

How#

Watch out#

챕터 5: JSON 메시지 처리#

Why#

What#

How#

Watch out#

한계#

공유

목차