Flutter / Supabse를 활용한 리얼타임 데이터 (web socket)

Flutter와 Supabase를 활용한 리얼타임 데이터 기능 구현은, 애플리케이션에 실시간 업데이트를 쉽게 추가할 수 있는 방법 중 하나입니다. Supabase는 Firebase와 유사한 오픈소스 백엔드 서비스로, 실시간 데이터베이스 기능을 지원합니다. 이 블로그 글에서는 Flutter와 Supabase를 연동하여 실시간 데이터 업데이트를 처리하는 방법을 설명하겠습니다.

### 1. Supabase 프로젝트 설정
우선, Supabase에서 프로젝트를 설정해야 합니다.

1. [Supabase](https://supabase.io) 웹사이트에 접속하여 로그인 후 프로젝트를 생성합니다.
2. 프로젝트가 생성되면 **API URL**과 **Anon Key**를 복사해 둡니다. 이 정보는 Flutter 애플리케이션에서 Supabase와 통신하는 데 필요합니다.

---

### 2. Flutter 프로젝트 설정

Flutter 프로젝트에서 Supabase와 통합하기 위해서는 `supabase_flutter` 패키지를 사용해야 합니다. 

#### 2.1. 프로젝트 생성 및 패키지 설치

1. 새로운 Flutter 프로젝트를 생성합니다:

 flutter create realtime_app
 cd realtime_app

2. `pubspec.yaml` 파일에 `supabase_flutter` 패키지를 추가합니다:

   dependencies:
     flutter:
       sdk: flutter
     supabase_flutter: ^0.4.0 # 최신 버전 확인

3. 패키지를 설치합니다:

flutter pub get

---

### 3. Supabase 초기화

`lib/main.dart` 파일을 열어 Supabase를 초기화합니다. Supabase 클라이언트를 설정하고, Supabase에 연결하는 코드를 작성합니다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Supabase 초기화
  await Supabase.initialize(
    url: 'https://your-supabase-url.supabase.co', // Supabase 프로젝트 URL
    anonKey: 'your-anon-key', // Supabase 프로젝트 키
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Realtime App',
      home: RealtimePage(),
    );
  }
}

---

### 4. 리얼타임 데이터 구독

이제 Supabase의 리얼타임 기능을 활용하여 데이터베이스의 변경 사항을 실시간으로 구독하는 방법을 살펴보겠습니다. `RealtimePage` 위젯을 만들어서, 데이터를 구독하고 UI에 반영하는 코드를 작성합니다.

#### 4.1. RealtimePage 위젯

`lib/realtime_page.dart` 파일을 생성하여 실시간 데이터베이스 업데이트를 구독하는 코드를 작성합니다.

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

class RealtimePage extends StatefulWidget {
  @override
  _RealtimePageState createState() => _RealtimePageState();
}

class _RealtimePageState extends State<RealtimePage> {
  final SupabaseClient supabase = Supabase.instance.client;
  List<dynamic> messages = [];

  @override
  void initState() {
    super.initState();

    // 실시간 데이터베이스 구독
    supabase
        .from('messages')
        .stream(primaryKey: ['id'])
        .listen((List<Map<String, dynamic>> snapshot) {
      setState(() {
        messages = snapshot;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Realtime Messages'),
      ),
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          final message = messages[index];
          return ListTile(
            title: Text(message['content']),
            subtitle: Text('ID: ${message['id']}'),
          );
        },
      ),
    );
  }
}

이 코드는 `messages`라는 테이블에서 실시간 업데이트를 구독하고, 변경 사항이 발생할 때마다 `ListView`에 업데이트합니다.

---

### 5. 데이터 삽입 테스트

마지막으로 Supabase 콘솔이나 애플리케이션에서 데이터를 삽입하여 실시간 데이터 기능이 제대로 작동하는지 확인해 보겠습니다. Supabase의 데이터베이스 테이블에 새로운 메시지를 추가하면, Flutter 애플리케이션에서도 실시간으로 변경 사항이 반영됩니다.

---

### 결론

Flutter와 Supabase를 사용하여 간단하게 실시간 데이터 업데이트 기능을 구현할 수 있었습니다. Supabase의 리얼타임 API는 웹소켓을 사용하여 실시간으로 데이터를 업데이트하며, Flutter에서 이를 손쉽게 구독하여 애플리케이션에 적용할 수 있습니다.

이제 여러분은 Supabase를 활용한 다양한 실시간 기능을 더 확장하여 구현할 수 있습니다. 데이터를 실시간으로 확인하고 싶을 때는 이런 방법을 사용해 보세요!