Flutter：如何从外部应用程序接收帖子消息通信？答案

【问题标题】：Flutter: How to receive post message communication from outer app?Flutter：如何从外部应用程序接收帖子消息通信？
【发布时间】：2020-12-17 04:22:13
【问题描述】：

我有独立的 Android 应用程序。然后我在Flutter 中开发了较小的网络应用程序并将其导出到网络服务器。它作为 Kotlin for Android 中独立应用程序的一部分加载到 WebView 中。

Android 支持 postmessaging，我可以通过渠道直接向WebView 发送数据。我的问题是如何在 Flutter Dart 代码中（在我的 Web 应用程序中）收听这些消息？

这是我在 Kotlin Android App 中使用的代码：

private var port: WebMessagePort? = null
    @TargetApi(Build.VERSION_CODES.M)
    private fun initPostMessagePort(){
        val channelsAvailable = webView.createWebMessageChannel()
        port = channelsAvailable.firstOrNull()
        port?.apply {
            setWebMessageCallback(object : WebMessageCallback() {
                override fun onMessage(port: WebMessagePort, message: WebMessage) {
                    //TODO do something with message
                }
            })
        }?:kotlin.run {
            App.log("Port initialization failed - channels not available")
        }
    }

    @TargetApi(Build.VERSION_CODES.M)
    private fun sendMessageToPort(message: String){
        port?.let { p->
            webView.postWebMessage(WebMessage(message, arrayOf(p)), Uri.EMPTY)
        }?:kotlin.run {
            App.log("Port not initialized")
        }
    }

于是就有了我的 Flutter Web App 启动代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await di.init();

  //listen to message from mobile app, then run code below
  runApp(MyApp());
  bloc.dispatch(GetUserProfile());
}

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

通过 dart:html 库我们可以在flutter web app 和它的宿主android WebView 之间建立通信通道：

import 'dart:html' as html;

//...

    html.window.onMessage.listen((event) {

      // do something with received data
      myController.text = event.data; 

      // return a response
      event.ports[0].postMessage("response data");
    });

android端对应的Kotlin代码：

    val webView = findViewById<WebView>(R.id.webview)
    val (receiver, sender) = webView.createWebMessageChannel()
    receiver.setWebMessageCallback(object : WebMessagePort.WebMessageCallback() {
        override fun onMessage(port: WebMessagePort, message: WebMessage) {
            Log.i("example", "Received ${message.data}")
        }
    })
    val message = WebMessage("Original message", arrayOf(sender))
    webView.postWebMessage(message, Uri.EMPTY)

【讨论】：

【解决方案2】：

不是 100% 确定这是否会有所帮助，但请尝试 Interactive Webview。使用 didReceiveMessage.listen() 方法，您应该能够收听发送到本机 webview 的消息。

【讨论】：

【解决方案3】：

您应该使用 WebSockets (socket.io) 进行相互通信。保留一个单独的 nodejs 实例作为您的套接字服务器，将套接字请求从 android 发送到套接字服务器，并将其从套接字服务器发送到您的 Flutter Web 应用程序

见 - https://pub.dev/packages/adhara_socket_io

【讨论】：

【解决方案4】：

您可以使用 socketIO 或 firebase 云消息服务来接收或发送消息

【讨论】：