背景
最近做Flutter应用开发,需要通过WebView嵌入前端web页面,而且Flutter与前端web有数据通信的需求。因此,笔者关于Flutter与WebView通信方式做了调研,并封装了一套支持请求响应和发布订阅的两套通信模式的JSBridge SDK。
WebView组件选择
Flutter三方库,使用最多的WebView组件,如下两款:
- webview_flutter:官方提供的webview组件
- flutter_inappwebview:三方提供的webview组件
两款组件都支持WebView与Flutter通信,flutter_inappwebview 比 webview_flutter提供的原生接口更丰富一些。
由于webview_flutter满足笔者需求,接下来文章的内容,都是以webview_flutter为准。
webview_flutter通信方式调研
Flutter -> WebView通信方式
可以使用WebViewController对象的执行js脚本的函数runJavascript(String javaScriptString)。具体代码实现如下:
// web注册native端调用的通信函数“javascriptChannel” window['javascriptChannel'] = function(jsonStr) { ... }
// native端通过“runJavascript”执行web注册的通信函数“javascriptChannel”传值,完成通信 WebView( javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) async { await webViewController.runJavascript('window["javascriptChannel"](${json.encode({...})})'); }, ),
问题
笔者在安卓平台,Flutter端使用webViewController.runJavascript('window"javascriptChannel"')传输json字符串参数,发现web端允许报错,如下:
从错误信息来看,是执行js语法的错误。这个问题是安卓端处理的问题。解决方案是对传输的字符串做编码处理,例如,base64编码,如下:
String str = Uri.encodeComponent(json.encode({...})); List<int> content = utf8.encode(str); String data = base64Encode(content); await webViewController.runJavascript('window["javascriptChannel"](${data})');
// web端收到数据对数据做解码处理 const message = JSON.parse(decodeURIComponent(atob(jsonStr)));
注:window.atob不支持中文,因此需要encodeComponent/decodeURIComponent转义中文字符,避免中文乱码。
WebView -> Flutter通信方式
可以通过注册WebView JavascriptChannel通信对象的方式。具体代码实现如下:
// native端注册web端调用的通信对象“nativeChannel” WebView( javascriptMode: JavascriptMode.unrestricted, javascriptChannels: <JavascriptChannel>[ JavascriptChannel( name: 'nativeChannel', // 注册web调用的对象 onMessageReceived: (JavascriptMessage msg) async { jsonDecode(msg.message) }, ), ].toSet(), )
// web端通过“nativeChannel”通信对象,调用函数“postMessage”传值 window['nativeChannel'].postMessage(JSON.stringify(...));
注:通信传值都是字符串的形式,native和web端需要自行解析字符串,因此建议采用json字符串的固定格式传值
JSBridge通信模块封装
对于相对复杂需要频繁进行Flutter与web通信的场景,WebView提供的Flutter与web的通信接口简单,不方便使用。因此基于常见的两种通信方式:发布订阅和请求响应,封装一套标准的JSBridge通信的SDK。
发布订阅
发布订阅是一种标准的消息通信模式,主要用于两个不相关联解耦的模块进行数据通信。“订阅方”只需要向“发布订阅模块”订阅消息,当“发布订阅模块”接收到“发布方”消息时,则把消息转发到所有“订阅方”,如下图所示:
请求响应
“请求方”发起一个请求消息,“响应方”接收到请求消息,做一些逻辑处理,回应一个响应消息到“请求方”。例如:http协议就属于请求响应模式,可以把web端作为客户端,flutter端作为服务端。如下图所示:
代码实现——Flutter端
1.JSBridge
import 'dart:convert'; import 'package:webview_flutter/webview_flutter.dart'; typedef SubscribeCallback = void Function(dynamic value); typedef ResponseCallback = void Function(dynamic value, Function(dynamic value) next); // 传输消息体 class BridgeMessage { static const String MESSAGE_TYPE_REQUEST = 'request'; static const String MESSAGE_TYPE_PUBLISHER = 'publisher'; String id = ''; String type = ''; String eventName = ''; dynamic params; BridgeMessage({ required this.id, required this.type, required this.eventName, required this.params, }); BridgeMessage.fromJson(json) { id = json['id'] ?? ''; type = json['type']; eventName = json['eventName']; params = json['params']; } dynamic toJson() { return { 'id': id, 'type': type, 'eventName': eventName, 'params': params, }; } String toString() { return 'id=$id type=$type eventName=$eventName params=$params'; } } // 注册响应句柄 class RegisterResponseHandle { final ResponseCallback registerResponseCallback; // 注册的回调 final Function(BridgeMessage message) callback; // 中间触发的回调 RegisterResponseHandle({ required this.registerResponseCallback, required this.callback, }); } class JSBridge { static const String NATIVE_CHANNEL = 'nativeChannel'; // 原生通信通道名称 static const String JAVASCRIPT_CHANNEL = 'javascriptChannel'; // js通信通道名称 WebViewController? _controller; Map<String, List<SubscribeCallback>> _subscribeCallbackMap = {}; Map<String, List<RegisterResponseHandle>> _registerResponseHandleMap = {}; /// 设置WebViewController 必须 void setWebViewController(WebViewController controller) { _controller = controller; } /// webView设置JavascriptChannel Set<JavascriptChannel> getJavascriptChannel() { return <JavascriptChannel>[ JavascriptChannel( name: NATIVE_CHANNEL, onMessageReceived: (JavascriptMessage msg) async { BridgeMessage message = BridgeMessage.fromJson(jsonDecode(msg.message)); if (message.type == BridgeMessage.MESSAGE_TYPE_PUBLISHER) { // 处理订阅消息 _subscribeCallbackMap[message.eventName]?.forEach((callback) => callback(message.params)); } else if (message.type == BridgeMessage.MESSAGE_TYPE_REQUEST) { // 处理请求消息 _registerResponseHandleMap[message.eventName]?.forEach((element) => element.callback(message)); } }, ), ].toSet(); } /// 发送消息 Future postMessage(BridgeMessage bridgeMessage) async { String str = Uri.encodeComponent(json.encode(bridgeMessage.toJson())); List<int> content = utf8.encode(str); String data = base64Encode(content); try { await _controller?.runJavascript("""window['$JAVASCRIPT_CHANNEL']('$data')"""); } catch (e) { print('runJavascript error: $e'); } } /// 注册响应 void registerResponse(String eventName, ResponseCallback callback) { if (_registerResponseHandleMap[eventName] == null) { _registerResponseHandleMap[eventName] = []; } _registerResponseHandleMap[eventName]?.add( RegisterResponseHandle( callback: (BridgeMessage message) { callback( message.params, (dynamic params) => postMessage( BridgeMessage( id: message.id, type: message.type, eventName: message.eventName, params: {'code': 0, 'data': params}, // code == 0表示响应成功 ), ), ); }, registerResponseCallback: callback, ), ); } /// 注销响应 void logoutResponse(String eventName, ResponseCallback callback) { List<RegisterResponseHandle>? registerResponseHandle = _registerResponseHandleMap[eventName]; registerResponseHandle?.forEach( (item) { if (item.callback == callback) { registerResponseHandle.remove(item); } }, ); } /// 发布消息 Future publisher(String eventName, dynamic params) async { await postMessage(BridgeMessage( id: '', type: BridgeMessage.MESSAGE_TYPE_PUBLISHER, eventName: eventName, params: params, )); } /// 订阅消息,@return 取消订阅回调 Function subscribe(String eventName, SubscribeCallback callback) { if (_subscribeCallbackMap[eventName] == null) { _subscribeCallbackMap[eventName] = []; } _subscribeCallbackMap[eventName]?.add(callback); return () => unsubscribe(eventName, callback); } /// 取消订阅 void unsubscribe(String eventName, SubscribeCallback callback) { _subscribeCallbackMap[eventName]?.remove(callback); } }
2.使用方式
class WebViewWidget extends StatefulWidget { @override _WebViewWidget createState() => _WebViewWidget(); } class _WebViewWidget extends State<WebViewWidget> { /// 1、创建jsBridge对象 JSBridge jsBridge = JSBridge(); @override void initState() { super.initState(); if (Platform.isAndroid) WebView.platform = AndroidWebView(); } @override Widget build(BuildContext context) { return WebView( debuggingEnabled: true, javascriptMode: JavascriptMode.unrestricted, /// 2、设置 javascriptChannels 通道 javascriptChannels: jsBridge.getJavascriptChannel(), onWebViewCreated: (WebViewController webViewController) async { /// 3、设置jsBridge webViewController通信对象 jsBridge.setWebViewController(webViewController); /// 4、注册响应事件:"/test" jsBridge.registerResponse('/test', (value, next) { // TODO 处理响应 next('flutter响应消息'); }); Function? unsubscribe; /// 5、订阅消息事件:"test" unsubscribe = jsBridge.subscribe('test', (value) { /// TODO 处理订阅 unsubscribe?.call(); // 取消订阅 /// 6、发布消息事件:"test" jsBridge.publisher('test', '这是一条订阅消息'); }); webViewController.loadFlutterAsset('assets/webview_static/index.html'); }, ); } }
代码实现——web端
1.JSBridge
import { v1 as uuid } from 'uuid'; export type SubscribeCallback = (params?: any) => void; const MESSAGE_TYPE_REQUEST = 'request'; const MESSAGE_TYPE_PUBLISHER = 'publisher'; const NATIVE_CHANNEL = 'nativeChannel'; // 原生通信通道名称 const JAVASCRIPT_CHANNEL = 'javascriptChannel'; // js通信通道名称 const REQUEST_TIME_OUT = 20000; interface BridgeMessage { id: string; type: string; eventName: string; params: any; } class JSBridge { private native: any = window[NATIVE_CHANNEL]; private subscribeCallbackMap = {}; private requestCallbackMap = {}; constructor() { window[JAVASCRIPT_CHANNEL] = (jsonStr) => { const message = JSON.parse(decodeURIComponent(atob(jsonStr))) as BridgeMessage; const id = message.id; const type = message.type; const eventName = message.eventName; const params = message.params; if (type === MESSAGE_TYPE_REQUEST) { this.requestCallbackMap[id] && this.requestCallbackMap[id](params); } else if (type === MESSAGE_TYPE_PUBLISHER) { const callbacks = this.subscribeCallbackMap[eventName]; if (callbacks) { callbacks.forEach((callback) => callback(params)); } } }; } // 请求响应 request = (eventName: string, params: any, timeout = REQUEST_TIME_OUT): Promise<any> => { return new Promise((resolve: any) => { const id: string = uuid(); let timer; this.requestCallbackMap[id] = (params) => { clearTimeout(timer); delete this.requestCallbackMap[id]; resolve(params); }; timer = setTimeout(() => { // code == -1表示响应超时 this.requestCallbackMap[id] && this.requestCallbackMap[id](JSON.stringify({ code: -1, data: '访问超时' })); }, timeout); this.native && this.native.postMessage(JSON.stringify({ type: 'request', id: id, eventName: eventName, params: params })); }); }; // 发布 publisher = (eventName: string, params: any): void => { this.native && this.native.postMessage(JSON.stringify({ type: 'publisher', eventName: eventName, params: params })); }; // 订阅 subscribe = (eventName: string, callback: SubscribeCallback): SubscribeCallback => { if (!this.subscribeCallbackMap[eventName]) { this.subscribeCallbackMap[eventName] = []; } this.subscribeCallbackMap[eventName].push(callback); return () => this.unsubscribe(eventName, callback); }; // 取消订阅 unsubscribe = (eventName: string, callback: SubscribeCallback): void => { const callbacks = this.subscribeCallbackMap[eventName]; if (callbacks) { callbacks.forEach((item, index) => { if (item === callback) { callbacks.splice(index, 1); } }); } }; } export default JSBridge;
2.使用方式
import React, { useEffect } from 'react'; import { Button } from 'antd'; import JSBridge from '@common/JSBridge'; import './index.less'; // 1、创建JSBridge对象 const jsBridge = new JSBridge(); function Test() { useEffect(() => { // 2、订阅消息:“test” const unsubscribe = jsBridge.subscribe('test', (params) => { console.info('web收到一条订阅消息:eventName=test, params=', params); }); return () => { // 3、取消订阅消息:“test” unsubscribe(); }; }); return ( <div styleName="container"> <div styleName="add-button"> <Button type="primary" onClick={() => { // 4、发布订阅消息:“test”。native端订阅test消息,请参考上面原生端代码 jsBridge.publisher('test', { data: '这是H5端发布消息' }); }} > 发布消息 </Button> </div> <div styleName="delete-button"> <Button type="primary" onClick={async () => { // 5、发送请求消息:“/test”,异步接收响应数据。native端注册响应消息,请参考上面原生端代码 const res = await jsBridge.request('/test', { data: '这是H5端请求消息' }); console.info('web收到一条响应消息:eventName=/test, res=', res.data); }} > 请求消息 </Button> </div> </div> ); } export default Test;
结尾
以上就是Flutter与WebView通信方案示例详解的详细内容,更多关于Flutter WebView通信方案的资料请关注好代码网其它相关文章!