时间戳

首页 > 解决方案 > onMessage：在传入消息时调用两次回调 Flutter web

firebase - onMessage：在传入消息时调用两次回调 Flutter web

问题描述

在我的应用程序中，对于网络版本，我使用firebase 7.3.0Firebase 服务包，现在我也在为网络设置 FCM。当我在前台收到应用程序的新消息时，onMessage:来自messaging()被触发两次。flutter_messaging在某个 Flutter 版本之前的设备插件上也曾经发生过这种情况，但现在已解决。

我基本上设置了一个StreamTransformer来获取与中使用Map<String, dynamic>的flutter_messaging设备包相同类型的消息PlatformPushNotificationDevice，我使用一个存根来根据平台切换类。在 Web 类PlatformPushNotificationWeb中，我将消息传递实例化为var firebaseMessaging = messaging();并声明我的方法，其中之一是onMessage()：

Stream<Map<String, dynamic>> onMessage()  async* {

    print('PlatformPushNotificationWeb.onMessage() started');
    handleData(Payload payload, EventSink<Map<String, dynamic>> sink) {
        Map<String,dynamic> message = {
          'notification': {
            'title': payload.notification.title,
            'body': payload.notification.body,
            'sound': true
          },
          'data': payload.data
        };
      sink.add(message);
    }

    final transformer = StreamTransformer<Payload, Map<String, dynamic>>.fromHandlers(
        handleData: handleData);

    yield* firebaseMessaging.onMessage.transform(transformer);
  }

因此，无论平台如何，我所在区域的侦听器都会收到相同的消息类型，

Stream<PushNotificationState> _mapListenToMessagesToState(ListenToMessages event) async* {
    print('_mapListenToMessagesToState started');
    _pushNotificationSwitcher.onMessage().listen((message) {
      print('_mapListenToMessagesToState onMessage() listener: received new message');
      add(ReceivedNewMessage(message: message));
    });
  }

但是对于每条传入的消息，我都会让听众响应两次。

我设置index.html为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>fixit cloud biking</title>
  <!--  <meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com">-->
  <meta name="google-signin-client_id" content="xxxx.apps.googleusercontent.com">
<!--  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
</head>
<!--<body>-->
<body id="app-container">
<script src="main.dart.js?version=45" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-remote-config.js"></script>


<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
     //navigator.serviceWorker.register("/flutter_service_worker.js");
    navigator.serviceWorker.register("/firebase-messaging-sw.js");
  });
}
</body>
</html>

firebase-messaging-sw.js文件为：

importScripts("https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.19.1/firebase-messaging.js");

firebase.initializeApp({
  apiKey: "xxxx",
            authDomain: "xxxx",
            databaseURL: "xxxx",
            projectId: "xxx",
            storageBucket: "xxxx",
            messagingSenderId: "xxxx",
            appId: "xxx",
            measurementId: "G-xxxx",
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);

    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});

难道是在PlatformPushNotificationWeb类和文件中实例化消息传递两次触发回调firebase-messaging-sw.js的原因？onMessage:非常感谢。

标签： firebaseflutterfirebase-cloud-messagingflutter-web

解决方案

事实证明..一个很好的颤振清洁，Android Studio 和机器重启解决了它..

现在我没有两次收到相同的消息，但是对于那些实际上正在尝试重复消息的人来说，这将解决它，面团这只是一种解决方法。

刚刚声明 int lastMessageId = 0的变量。当一条消息进来时，检查它id，只有当它们不同时，才将新的消息 id 保存为lastMessageId并显示该消息。

Stream<PushNotificationState> _mapListenToMessagesToState(ListenToMessages event) async* {
    print('_mapListenToMessagesToState started');
    int lastMessageId = 0;

    _pushNotificationSwitcher.onMessage().listen((message) {
      print('incoming message is : $message');
      var data = message['data'];
      int messageId = int.parse(data['id']);

      if( lastMessageId != messageId) {
        lastMessageId = messageId;
        print(
            '_mapListenToMessagesToState onMessage() listener: received new message');
        add(ReceivedNewMessage(message: message));
      }
    });
  }

推荐阅读