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

04 Dec 2023

flutter

이번 블로그에서는 플러터 앱에 웹소켓 통신을 추가하는 방법을 알려드리겠습니다. 플러터에서 상태 관리를 위한 라이브러리로 많이 사용되는 Riverpod를 사용하여 효과적으로 웹소켓 통신을 구현할 수 있습니다.

개요

플러터 앱에서 웹소켓 통신을 구현하기 위해서는 먼저 Riverpod를 설정하고 웹소켓 연결을 관리하는 Provider를 생성해야 합니다. 그리고 해당 Provider를 사용하여 UI에서 웹소켓 통신을 처리할 수 있습니다.

구현 방법

Riverpod 설치하기

플러터 프로젝트에서 Riverpod를 사용하려면 먼저 flutter_riverpod 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:
```
dependencies:
  flutter_riverpod: ^1.0.0
```

Provider 생성하기

lib 폴더 안에 providers 폴더를 생성하고, web_socket_provider.dart 파일을 생성합니다. 이 파일에서 웹소켓 연결을 관리하는 Provider를 생성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:web_socket_channel/io.dart';

final webSocketProvider = Provider<IOWebSocketChannel>((ref) {
  // 웹소켓 주소를 입력합니다.
  final url = 'ws://your_websocket_url';
  return IOWebSocketChannel.connect(url);
});

UI에서 웹소켓 통신 사용하기

필요한 화면 파일에서 Provider를 사용하여 웹소켓 통신을 수행할 수 있습니다. 예를 들어, home_screen.dart 파일을 열고 다음과 같이 수정합니다.

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

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final webSocketChannel = ref.watch(webSocketProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Example'),
      ),
      body: Center(
        child: StreamBuilder(
          stream: webSocketChannel.stream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            }
            if (snapshot.hasData) {
              return Text(snapshot.data.toString());
            }
            return Text('No data');
          },
        ),
      ),
    );
  }
}

위 코드에서는 webSocketProvider를 ref.watch()로 가져와서 웹소켓 연결을 수행한 후, 해당 연결의 데이터를 StreamBuilder를 사용하여 UI로 표시합니다.

결론

이제 앱에 웹소켓 통신을 추가하는 방법을 알게 되었습니다. Riverpod를 사용하여 간단하게 웹소켓 연결을 관리하고, UI에서 해당 데이터를 표시할 수 있습니다. 앱에 실시간 데이터를 통신하고자 할 때 웹소켓은 매우 유용한 방법입니다.

더 자세한 내용은 Riverpod 공식 문서를 참고하시기 바랍니다.