Flutter消息处理插件onmessage的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter消息处理插件onmessage的使用

概述

onmessage 插件提供了一个包装了 JavaScript 的 window.onmessage 的流，该流可以在所有平台上安全导入和使用，而不仅仅限于Web平台。这使得开发者可以更方便地在不同平台间进行消息传递和处理。

目的

在Web应用程序中，你可以通过监听来自其他框架的消息事件来处理消息：

import 'dart:html' as html;

void main() {
  html.window.onMessage.listen((html.MessageEvent event) {
    // 处理消息事件
  });
  // ...
}

然而，dart:html 只能在Web平台上使用。如果你尝试在其他平台上使用它，你的应用程序将无法构建成功。Dart团队建议使用条件导入的方式来解决这个问题，但这会使项目变得复杂，并且还会产生关于非Web包中导入 dart:html 的Lint警告。

为了简化这一过程，onmessage 插件提供了一个跨平台的消息事件流包装器。在非Web平台上，这个流不会产生任何事件。

使用方法

以下是使用 onmessage 插件的基本步骤：

  1. 导入插件： 在你的Dart文件中添加以下导入语句：

    import 'package:onmessage/onmessage.dart';

  2. 监听消息事件： 使用 OnMessage.instance.stream.listen 方法来监听消息事件，并处理接收到的消息。

    void main() {
  OnMessage.instance.stream.listen((MessageEvent event) {
    // 处理消息事件
  });
  // ...
}

  3. 示例代码： 下面是一个完整的Flutter应用示例，展示了如何接收并打印来自其他框架的消息（仅适用于Web）。

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

/// 这个应用程序会打印从其他框架接收到的所有消息（仅限Web）。
void main() {
  // 监听消息事件
  OnMessage.instance.stream.listen((MessageEvent event) {
    print('Received message: ${event.data}');
  });

  // 启动Flutter应用
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter onmessage Example'),
        ),
        body: const Center(
          child: Text('Listening for messages...'),
        ),
      ),
    );
  }
}

MessageEvent 类

MessageEvent 类是 onmessage 插件提供的一个独立类，其字段是从原始的 html.MessageEvent 复制而来。这样你就可以拥有一个与Web无关的API，方便在不同平台上使用。

希望以上内容能帮助你更好地理解和使用 onmessage 插件。如果有任何问题或需要进一步的帮助，请随时提问！


更多关于Flutter消息处理插件onmessage的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter消息处理插件onmessage的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，处理来自原生平台（如Android或iOS）的消息通常涉及到使用插件。一个常见的用例是通过MethodChannel在Flutter和原生代码之间进行通信。onMessage方法在这种上下文中并不直接存在于Flutter框架的API中，但我们可以利用MethodChannel的监听机制来实现类似的功能。

以下是一个使用MethodChannel在Flutter中接收来自原生平台消息的示例代码。

1. 原生平台（Android）代码

首先，在Android的原生代码中设置MethodChannel并发送消息到Flutter。

MainActivity.kt (或 MainActivity.java)

// MainActivity.kt
package com.example.yourapp

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {
    private val CHANNEL = "com.example.yourapp/channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            // 这里的代码是处理来自Flutter的调用，如果需要的话
        }

        // 发送消息到Flutter
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).invokeMethod("fromNative", "Hello from Android!")
    }
}

注意：在实际应用中，你可能不会在configureFlutterEngine中立即发送消息，而是在某些事件发生时（如按钮点击、数据更新等）发送。

2. 原生平台（iOS）代码

接下来，在iOS的原生代码中设置FlutterMethodChannel并发送消息到Flutter。

AppDelegate.swift

// AppDelegate.swift
import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let channel = FlutterMethodChannel(name: "com.example.yourapp/channel", binaryMessenger: controller.binaryMessenger)
        
        // 发送消息到Flutter
        channel.invokeMethod("fromNative", arguments: "Hello from iOS!")
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

3. Flutter代码

最后，在Flutter中监听来自原生平台的消息。

main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const platform = MethodChannel('com.example.yourapp/channel');

  String _messageFromNative = 'Waiting for message from native code...';

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

  Future<void> _listenForMessages() async {
    platform.setMethodCallHandler((MethodCall call) async {
      if (call.method == "fromNative") {
        setState(() {
          _messageFromNative = call.arguments;
        });
      }
    });

    // 监听原生平台发送的消息（注意：这不是直接通过`onMessage`，而是通过监听channel）
    platform.invokeMethod('listenForMessages').then((_) {
      // 这里可以处理初始化后的逻辑，但通常我们不需要显式调用invokeMethod来开始监听，
      // 因为setMethodCallHandler已经设置了监听器。这里的invokeMethod调用仅作为示例，
      // 实际中可能用于触发原生代码的某些操作。
    });

    // 由于我们不知道原生何时会发送消息，我们依赖于setMethodCallHandler来异步处理这些消息。
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Native Message Listener'),
        ),
        body: Center(
          child: Text('Message from native: $_messageFromNative'),
        ),
      ),
    );
  }
}

注意：在Flutter代码中，我们没有直接的方法叫做onMessage。相反，我们通过setMethodCallHandler来设置一个处理来自原生平台调用的回调函数。当原生平台通过MethodChannel发送消息时，这个回调函数会被触发，并更新UI。

这个示例展示了如何在Flutter应用中设置和监听来自原生平台的消息。根据你的具体需求，你可能需要调整这些代码。

回到顶部