Flutter web bridge 通信总结分析详解

本文将详细讲解Flutter Web中的Bridge通信机制。Flutter Web框架中，开发者可以使用Bridge来实现Flutter与Web端的通信交互。Bridge通信机制主要包含以下三个部分：Method Channel、Event Channel、Basic Message Channel。

Method Channel

Method channel是Flutter与Web之间实现双向通信的基本手段，通过Method channel，我们可以在Flutter和JS之间交互调用。Method Channel的实质是一个注册机制，Flutter和Web通过Method Channel映射一对方法，Flutter在调用其注册的方法时，会传递参数过去，同时阻塞当前线程直到JS处理完毕返回结果。示例代码如下：

Flutter端代码：

import 'package:flutter/services.dart';

// 声明MethodChannel
const MethodChannel _channel = MethodChannel('web_channel');

// 调用Web端方法
Future<String> callWebApi() async {
  final results = await _channel.invokeMethod<String>('helloFromWeb', {'name': 'Flutter'});
  return results;
}

Web端代码：

const {MethodChannel} = require('flutter_web_plugins');

// 注册方法
MethodChannel.setMethodCallHandler((call) => {
  if (call.method === 'helloFromWeb') {
  const name = call.arguments.name;
    return Promise.resolve(`Hello ${name} from Web`);
  }
});

Flutter调用Web端方法时，MethodChannel.invokeMethod函数会阻塞，直到Web端方法返回结果。Web端处理完Flutter传递的参数后，可以通过Promise返回结果。注意，Method Channel支持的参数类型和返回值类型必须是StandardMessageCodec能够序列化的数据类型。

Event Channel

Event Channel可以用来建立Flutter与JS之间的事件通信。Event Channel将Flutter和Web的消息传递火车换成了UA风格的事件机制，Flutter和Web通过Event Channel建立起一个“桥”，Flutter可以向这个桥发布事件，并且监听Web发布的事件。

Flutter端代码：

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

// 声明EventChannel
const EventChannel _channel = EventChannel('web_events');

// 订阅事件
StreamSubscription<dynamic> _subscription;

@override
void initState() {
  super.initState();
  _subscription = _channel.receiveBroadcastStream().listen(_handler, onError: _errorHandler);
}

// 事件处理器
void _handler(event) {
  print('Received event: $event');
}

void _errorHandler(error) {
  print('Received error: $error');
}

@override
void dispose() {
  super.dispose();
  _subscription.cancel();
}

Web端代码：

const {EventChannel} = require('flutter_web_plugins');

// 声明Event Channel
const eventChannel = new EventChannel('web_events');

// 发送事件
eventChannel.emit('message', 'Hello World!');

Flutter端通过Event Channel建立了一个监听器，当Web端触发事件后，Flutter即可获取到对应的事件。注意，Event Channel只能传递基本数据类型，如果需要传递自定义数据类型可以将其转化为JSON字符串进行传递。

Basic Message Channel

Basic Message Channel会自动序列化传递数据，但只支持传输字符串或者字节数组。在实际应用中，我们常常需要传输自定义对象，此时可以使用JSON编码传输。以下是一个将JSON字符串传输给Web并返回处理结果的例子。

Flutter端代码：

import 'dart:async';
import 'dart:convert';
import 'package:flutter/services.dart';

// 声明MessageChannel
const BasicMessageChannel<String> _channel = BasicMessageChannel<String>('web_channel', StringCodec());

// 调用Web端方法
Future<String> callWebApi() async {
  final results = await _channel.send(jsonEncode({'name': 'Flutter'}));
  return results;
}

Web端代码：

const {BasicMessageChannel, StringCodec} = require('flutter_web_plugins');

// 声明Basic Message Channel
const channel = new BasicMessageChannel('web_channel', new StringCodec());

// 监听Flutter端消息
channel.setMessageHandler((message) => {
  const name = JSON.parse(message).name;
  return Promise.resolve(`Hello ${name} from Web`);
});

Flutter端发送一个json编码的Map给Web端，Web端收到后通过JSON解析得到Flutter传递的参数，处理完毕后返回结果。Basic Message Channel支持基本数据类型以及可以通过StandardMessageCodec序列化的数据类型。如果需要传递自定义数据类型，可以将其转化为JSON字符串进行传递。

以上是三种在Flutter Web中实现Flutter与Web端通信的方式。开发时应根据需求选择合适的通信方式进行数据交互。