[flutter] 플러터 Riverpod를 사용하여 앱에 웹소켓 채팅 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에 웹소켓 채팅 기능을 추가하는 방법을 알아보겠습니다. 여기서는 Riverpod 패키지를 사용하여 상태 관리를 하고, 웹소켓 통신을 위해 web_socket_channel 패키지를 사용합니다.

준비 단계

프로젝트를 시작하기 전, Flutter와 Dart SDK를 설치해야 합니다. 또한, Flutter 프로젝트를 생성해야 합니다.

Riverpod 패키지 추가

프로젝트의 pubspec.yaml 파일을 열고, dependencies 섹션에 다음과 같이 Riverpod 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.4
  web_socket_channel: ^2.0.0

설정을 마친 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

상태 관리 설정

Riverpod는 상태 관리를 위한 Provider 패턴을 제공합니다. 먼저, Flutter 앱에서 사용할 프로바이더를 생성합니다. lib 폴더에 providers.dart 파일을 만들고, 다음 코드를 작성합니다:

import 'package:riverpod/riverpod.dart';

final chatProvider = Provider<WebSocket>((ref) {
  // 웹소켓 연결을 생성 및 반환합니다.
});

final chatMessagesProvider = StreamProvider<List<String>>((ref) {
  final webSocket = ref.watch(chatProvider);
  // 웹소켓으로부터 채팅 메시지 스트림을 생성 및 반환합니다.
});

위 코드에서 chatProvider는 웹소켓 연결을 생성하고 제공하는 프로바이더이고, chatMessagesProvider는 웹소켓으로부터 받은 채팅 메시지들을 스트림으로 제공하는 프로바이더입니다.

웹소켓 통신 설정

chatProvider의 값을 설정하려면, lib 폴더에 websocket_service.dart 파일을 만들고, 다음 코드를 작성합니다:

import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketService {
  final channel = WebSocketChannel.connect(Uri.parse('YOUR_WEBSOCKET_URL'));
  
  WebSocket get webSocket => channel;
}

위 코드에서 YOUR_WEBSOCKET_URL을 사용할 웹소켓 서버의 주소로 바꿔주세요.

화면에 채팅 메시지 보여주기

이제 채팅 메시지를 화면에 표시해보겠습니다. 화면을 구성하는 위젯에서 chatMessagesProvider를 감시하고, 새로운 메시지가 도착할 때마다 화면을 업데이트합니다. 예를 들어, lib 폴더에 chat_screen.dart 파일을 만들고, 다음 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('채팅'),
      ),
      body: Center(
        child: Consumer(builder: (context, watch, child) {
          final chatMessages = watch(chatMessagesProvider).data?.value ?? [];
          return ListView.builder(
            itemCount: chatMessages.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(chatMessages[index]),
              );
            },
          );
        }),
      ),
    );
  }
}

위 코드에서는 watch(chatMessagesProvider).data?.value를 통해 채팅 메시지 스트림을 읽어옵니다. 그리고 ListView.builder를 사용하여 채팅 메시지를 표시합니다.

이제 main.dart 파일에서 ChatScreen으로 이동하는 버튼을 추가하고, 앱을 실행해보세요. 그러면 Riverpod로 웹소켓 채팅 기능이 구현된 앱을 확인할 수 있습니다.

이상으로, Flutter 앱에 Riverpod를 사용하여 웹소켓 채팅 기능을 추가하는 방법을 알아보았습니다. 이 예제를 참고하여 원하는 대화 형 앱을 만들어보세요!