[고급] Dart 서버 실시간 애플리케이션 구현 / Push Notification을 활용한 실시간 알림 시스템

 

실시간 알림 시스템은 사용자에게 즉시 중요한 정보를 전달할 수 있는 강력한 기능을 제공합니다.

Push Notification은 이러한 시스템을 구축하는 데 유용한 기술입니다. Dart를 사용하면 서버 측에서 Push Notification을 구현할 수 있으며, 클라이언트 측에서는 이를 수신하여 사용자에게 알림을 표시할 수 있습니다.

이 블로그 포스트에서는 초보자도 쉽게 이해할 수 있도록 Dart를 사용한 실시간 알림 시스템 구현 방법을 자세히 설명하겠습니다.

1. Push Notification이란?

Push Notification은 서버가 클라이언트(주로 모바일 기기나 웹 브라우저)에게 실시간으로 정보를 전송할 수 있는 기능입니다. 사용자는 앱을 사용하지 않더라도 푸시 알림을 받을 수 있으며, 이를 통해 중요한 메시지나 업데이트를 즉시 전달할 수 있습니다.

주요 특징

• 실시간 전달: 서버에서 클라이언트로 즉시 메시지를 전송할 수 있습니다.
• 백그라운드 지원: 앱이 백그라운드에 있을 때도 알림을 받을 수 있습니다.
• 사용자 참여: 알림을 통해 사용자와 상호작용할 수 있습니다.

2. Dart로 Push Notification 시스템 구현하기

Dart를 사용하여 Push Notification 시스템을 구현하려면 두 가지 주요 요소가 필요합니다: 서버 측과 클라이언트 측.

서버 측 구현

서버 측에서는 알림을 발송하기 위해 Firebase Cloud Messaging (FCM)을 사용할 수 있습니다. FCM은 Google의 클라우드 기반 메시징 서비스로, 서버에서 클라이언트로 푸시 알림을 전송하는 데 유용합니다.

서버 측 구현 코드 예제

서버 측 구현을 위해 Dart에서 HTTP 요청을 보내는 http 패키지를 사용하여 FCM에 요청을 보낼 수 있습니다. 다음은 FCM을 통해 푸시 알림을 전송하는 예제 코드입니다.

1. pubspec.yaml에 http 패키지 추가하기

dependencies:
  http: ^0.14.0

 

2. 서버 코드 작성하기

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> sendPushNotification(String token, String title, String body) async {
  final serverKey = 'YOUR_FCM_SERVER_KEY'; // FCM 서버 키를 여기에 입력하세요
  final url = 'https://fcm.googleapis.com/fcm/send';

  final headers = {
    'Content-Type': 'application/json',
    'Authorization': 'key=$serverKey',
  };

  final payload = json.encode({
    'to': token,
    'notification': {
      'title': title,
      'body': body,
      'sound': 'default',
    },
    'priority': 'high',
  });

  final response = await http.post(
    Uri.parse(url),
    headers: headers,
    body: payload,
  );

  if (response.statusCode == 200) {
    print('Push notification sent successfully');
  } else {
    print('Failed to send push notification: ${response.body}');
  }
}

void main() {
  final token = 'CLIENT_DEVICE_TOKEN'; // 클라이언트 기기 토큰을 여기에 입력하세요
  sendPushNotification(token, 'Hello!', 'This is a test notification.');
}

코드 설명

• serverKey: FCM에서 제공하는 서버 키로, Firebase 콘솔에서 확인할 수 있습니다.
• url: FCM의 푸시 알림 전송 URL입니다.
• headers: 요청 헤더에 Content-Type과 Authorization 정보를 포함합니다.
• payload: 전송할 알림의 제목과 내용을 포함하는 JSON 객체입니다.
• http.post(): FCM 서버로 POST 요청을 보내 푸시 알림을 전송합니다.

클라이언트 측 구현

클라이언트 측에서는 모바일 앱이나 웹 앱에서 FCM을 설정하고, 알림을 수신할 수 있도록 구성해야 합니다. 모바일 애플리케이션의 경우, Flutter를 사용하여 구현할 수 있으며, 웹 애플리케이션의 경우 브라우저의 Push API를 사용할 수 있습니다.

 

Flutter 클라이언트 측 구현

Flutter를 사용하는 경우, firebase_messaging 패키지를 사용하여 Push Notification을 받을 수 있습니다.

 

1. pubspec.yaml에 firebase_messaging 패키지 추가하기

dependencies:
  firebase_messaging: ^14.0.0

 

2. Flutter 앱 코드 작성하기

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Push Notification Demo'),
        ),
        body: Center(
          child: Text('Waiting for notifications...'),
        ),
      ),
    );
  }
}

class NotificationService {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

  NotificationService() {
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Message received: ${message.notification?.title}');
      // 알림 처리 코드
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('Message opened: ${message.notification?.title}');
      // 알림 클릭 시 처리 코드
    });

    // FCM 토큰 생성
    _firebaseMessaging.getToken().then((String? token) {
      print('FCM Token: $token');
      // 서버에 토큰을 전송하는 코드
    });
  }
}

코드 설명

• Firebase.initializeApp(): Firebase를 초기화합니다.
• FirebaseMessaging.onMessage.listen(): 앱이 포그라운드에 있을 때 수신한 알림을 처리합니다.
• FirebaseMessaging.onMessageOpenedApp.listen(): 알림을 클릭하여 앱을 열 때의 처리를 합니다.
• _firebaseMessaging.getToken(): FCM 토큰을 생성하여 서버에 전송할 수 있습니다.

3. 실전 예제 및 코드 설명

이 예제에서는 Dart를 사용하여 FCM을 통해 Push Notification을 전송하고, Flutter 앱에서 이를 수신하여 사용자에게 알림을 표시하는 방법을 소개했습니다.

서버는 FCM에 요청을 보내 푸시 알림을 전송하며, 클라이언트 애플리케이션은 알림을 수신하고 사용자에게 표시합니다.

4. 자주 묻는 질문 (FAQ)

Q1: FCM 서버 키는 어떻게 찾나요?

FCM 서버 키는 Firebase 콘솔의 프로젝트 설정 > 클라우드 메시징 탭에서 확인할 수 있습니다.

Q2: 클라이언트의 FCM 토큰을 어떻게 얻나요?

Flutter 앱에서는 FirebaseMessaging.instance.getToken() 메서드를 호출하여 FCM 토큰을 얻을 수 있습니다. 이 토큰을 서버에 보내서 알림을 전송할 수 있습니다.

Q3: Push Notification을 수신하지 못할 때 어떻게 해야 하나요?

Push Notification이 수신되지 않는다면, FCM 서버 키와 클라이언트 토큰을 확인하고, Firebase 콘솔에서 설정이 올바르게 되었는지 점검해야 합니다. 또한, 앱이 백그라운드 또는 종료 상태에서 알림을 수신할 수 있는지 확인해야 합니다.

 

이 블로그 포스트에서는 Dart를 사용하여 실시간 알림 시스템을 구축하는 방법을 설명했습니다.

Push Notification을 활용하여 사용자에게 실시간으로 중요한 정보를 전달할 수 있으며, Dart의 강력한 기능을 통해 이러한 시스템을 효과적으로 구현할 수 있습니다.

Dart와 FCM을 활용하여 실시간 알림을 통해 사용자와 소통해 보세요.

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱