Flutter(GetX) + PHP를 활용한 청소닷 커뮤니티 앱에 SSE(Server-Sent Events) 적용하기

 

•  소개

• 청소닷 커뮤니티 앱에서 실시간 알림 또는 메시지 기능을 구현하기 위해 **SSE(Server-Sent Events)**를 도입했습니다.
• 백엔드는 PHP로 구현했고, Flutter(GetX)를 사용해 앱을 개발했습니다.
• 이 글에서는 SSE의 개념, PHP 백엔드 구현, Flutter(GetX)에서의 SSE 통신 방법을 공유합니다.
•  

3. SSE(Server-Sent Events)란?

• SSE는 서버에서 클라이언트로 단방향 실시간 데이터를 전송하는 기술입니다.
• WebSocket과 달리, 서버에서 클라이언트로만 데이터를 보낼 수 있습니다.
• 장점:
  • 간단한 실시간 통신 구현 가능.
  • HTTP 프로토콜을 사용하므로 별도의 프로토콜 변경이 필요 없음.
• 단점:
  • 단방향 통신만 가능 (클라이언트 → 서버 통신은 별도로 구현 필요).

4. 백엔드(PHP) 구현

PHP에서 SSE를 구현하는 방법을 설명합니다.

php

Copy

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

// 무한 루프를 통해 클라이언트로 데이터를 지속적으로 전송
while (true) {
    // 새로운 데이터가 있는지 확인 (예: 데이터베이스 조회)
    $newData = checkForNewData(); // 이 함수는 직접 구현해야 합니다.

    if ($newData) {
        echo "data: " . json_encode($newData) . "\n\n";
        ob_flush();
        flush();
    }

    // 1초 대기
    sleep(1);
}

function checkForNewData() {
    // 데이터베이스 또는 다른 소스에서 새로운 데이터를 확인하는 로직
    // 예: return ['message' => '새로운 알림이 있습니다!'];
}
?>

• 설명:
  • header('Content-Type: text/event-stream'): SSE를 위해 Content-Type을 설정합니다.
  • header('Cache-Control: no-cache'): 캐시를 비활성화합니다.
  • header('Connection: keep-alive'): 연결을 유지합니다.
  • while (true): 무한 루프를 통해 클라이언트로 데이터를 지속적으로 전송합니다.
  • echo "data: ...": 클라이언트로 전송할 데이터를 JSON 형식으로 보냅니다.

5. Flutter(GetX)에서 SSE 연결

Flutter에서 SSE를 사용해 PHP 서버와 통신하는 방법을 설명합니다.

dart

Copy

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class SseController extends GetxController {
  final message = ''.obs;

  void connectToSse() async {
    final client = http.Client();
    final request = http.Request('GET', Uri.parse('https://your-server.com/sse_endpoint'));
    final response = await client.send(request);

    response.stream
        .transform(utf8.decoder)
        .listen((data) {
          // 서버에서 전송된 데이터 처리
          final jsonData = jsonDecode(data);
          message.value = jsonData['message'];
        })
        .onError((error) {
          print('SSE Error: $error');
        });
  }
}

class SseScreen extends StatelessWidget {
  final SseController controller = Get.put(SseController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SSE Example'),
      ),
      body: Center(
        child: Obx(() => Text(controller.message.value)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.connectToSse(),
        child: Icon(Icons.connect_without_contact),
      ),
    );
  }
}

• 설명:
  • http.Client()를 사용해 SSE 연결을 설정합니다.
  • response.stream.transform(utf8.decoder)를 통해 서버에서 전송된 데이터를 스트림으로 받습니다.
  • Obx()를 사용해 실시간으로 업데이트된 메시지를 화면에 표시합니다.

6. GetX를 활용한 상태 관리

• SseController는 GetX의 GetxController를 상속받아 상태를 관리합니다.
• message는 RxString으로 선언되어, 실시간으로 업데이트된 데이터를 화면에 반영합니다.

7. 결론

• SSE를 사용해 청소닷 커뮤니티 앱에 실시간 알림 기능을 성공적으로 구현했습니다.
• PHP 백엔드와 Flutter(GetX) 프론트엔드의 조합으로 효율적인 실시간 통신을 달성했습니다.
• 이 방법은 간단한 실시간 기능이 필요할 때 매우 유용합니다.

8. 참고 자료

• SSE MDN 문서
• Flutter 공식 문서
• GetX 패키지

이 포스팅은, 코드 블록을 사용해 가독성을 높이면 좋은 포스팅이 될 것입니다. 이후에 추가로, 실제 구현 과정에서 마주친 문제와 해결 방법을 추가하면서 더욱 풍부한 내용을 만들겠습니다. 😊

 청소닷 일정관리 커뮤니앱 채팅 작업 화면