flutter webview 와 네이티브간의 데이터 통신 webview-javascript-bridge 사용

프로그래밍/flutter

flutter webview 와 네이티브간의 데이터 통신 webview-javascript-bridge 사용

소행성왕자 2023. 2. 20. 17:10

flutter 네이티브와 웹뷰와 데이터 통신하는 방법을 알아보도록 하겠습니다.

webview 에서 버튼을 클릭하면 javascript 함수에서 flutter 를 호출합니다.

버튼 클릭시 webviewjsbridge 로 전송됩니다.

decoding 해보겠습니다.

웹페이지의 javascript 에서 보낸 json 이 출력됩니다.

. webview -> 네이티브

/lib/main.dart

 /*
  https://github.com/flutter/flutter/issues/117333
  https://pub.dev/packages/webview_javascript_bridge
  https://blog.steinjun.net/post/8
*/
 
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_javascript_bridge/webview_javascript_bridge.dart';
 
void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}
 
class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});
 
  @override
  State<WebViewApp> createState() => _WebViewAppState();
}
 
class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  late final WebViewJavaScriptBridge _bridge;
 
 
  @override
  void initState() {
    super.initState();
 
    _bridge = WebViewJavaScriptBridge();
 
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..addJavaScriptChannel(
          webviewJavaScriptBridgeChannel,
          onMessageReceived: (JavaScriptMessage message) {
            debugPrint(message.message);
          }
      )
      ..loadRequest(
        Uri.parse('http://220.72.212.247:9286/'),
      );
 
    print(">>> message >>>>");
 
    _bridge.updateWebViewController(controller);
 
  /*
    _bridge.addMessageHandler(ClosureMessageHandler(
      resolver: (message, controller) => message.action == "toaster",
      handler: (message, controller) {
        // TODO: show the toaster
        print("message22222");
        print(message);
        return null;
      },
    ));
*/
 
 
 
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
  <h1 id="title">This is web title</h1>
  <button type="button" onclick="sendingMessage()">send message to flutter</button>
  
  <script src="app.js"></script> 
  
  </script>
  
 
 
<h1>index.php  ㅇㅇ 333 </h1>8.0.32-0ubuntu0.20.04.2
 
</body>
</html>

app.js

 //import webViewJavaScriptBridge from './node_modules/webview-javascript-bridge/dist/index.cjs.js';
//import webViewJavaScriptBridge from './node_modules/webview-javascript-bridge/dist/index.esm.js';
 
class JSONUriEncoder {
    constructor(scheme = "webviewjsbridge", host = "stormyang.cn") {
        this.scheme = scheme;
        this.host = host;
    }
    encode(args) {
        const message = {
            channel: args.channel,
            action: args.action,
            params: args.params,
            callbackId: args.callbackId,
        };
        return `${this.scheme}://${this.host}?args=${encodeURIComponent(JSON.stringify(message))}`;
    }
}
 
class WebViewJavaScriptBridge {
    constructor() {
        this.callbackId = 1;
        this.callbacks = new Map();
        this.handlers = new Map();
        this.encoder = new JSONUriEncoder();
    }
    sendMessage(message) {
        return new Promise((resolve, reject) => {
            if (!message.action || message.action.length <= 0) {
                reject('action is invalid');
                return;
            }
            const channel = message.channel || 'default';
            const channelImp = window[channel];
            if (channelImp === null || channelImp === undefined) {
                reject(`
        channel named "${channel}" not found in flutter. please add channel:
        late final _webviewController = WebViewController()
          ...
          ..addJavaScriptChannel(webviewJavaScriptBridgeChannel,
              onMessageReceived: _bridge.receiveMessage)
          ...
        `);
                return;
            }
            const callbackId = this._pushCallback(resolve);
            const encoded = this.encoder.encode({
                channel,
                action: message.action,
                params: message.params,
                callbackId,
            });
            if (!encoded) {
                reject(`Unable build message. (channel: ${channel}, action: ${message.action}, params: ${message.params})`);
                return;
            }
            this._log('sending message:', encoded);
            channelImp.postMessage(encoded);
        });
    }
    registerMessageHandler(id, handler) {
        if (id === null || id === undefined) {
            return;
        }
        if (typeof handler === 'function') {
            this.handlers.set(id, handler);
        }
        else {
            this.unregisterMessageHandler(id);
        }
    }
    unregisterMessageHandler(id) {
        this.handlers.delete(id);
    }
    setEncoder(encoder) {
        this.encoder = encoder;
    }
    setLogger(logger) {
        this.logger = logger;
    }
    _log(...args) {
        var _a;
        (_a = this.logger) === null || _a === void 0 ? void 0 : _a.call(this.logger, ...args);
    }
    _pushCallback(cb) {
        const id = this.callbackId++;
        const key = `cb_${id}`;
        this.callbacks.set(key, cb);
        return key;
    }
    _popCallback(id) {
        if (this.callbacks.has(id)) {
            const cb = this.callbacks.get(id);
            this.callbacks.delete(id);
            return cb;
        }
    }
    _receiveMessage(message) {
        this._log(`receive message, id: ${message.id}, callbackId: ${message.callbackId}, params:`, message.params);
        if (message.callbackId) {
            this._log('this message is a callback');
            const cb = this._popCallback(message.callbackId);
            if (cb) {
                cb(message.params);
                return true;
            }
            return false;
        }
        const key = message.id;
        if (key) {
            this._log('this message is a calling to javascript');
            const func = this.handlers.get(key);
            if (typeof func !== 'function') {
                return `no handler for message: ${message.id}`;
            }
            let ret = func(message.params);
            if (typeof ret === 'object' && ret !== null) {
                ret = JSON.stringify(ret);
            }
            return ret;
        }
        throw Error('message must have a id or callbackId.');
    }
}
 
class UriEncoder {
    constructor(scheme = 'webviewjsbridge') {
        this.scheme = scheme;
    }
    encode(args) {
        let message = `${this.scheme}://${args.channel}/${args.action}`;
        const query = [];
        if (args.params) {
            const argsJSON = encodeURIComponent(JSON.stringify(args.params));
            query.push({ key: 'args', value: argsJSON });
        }
        if (args.callbackId) {
            query.push({ key: 'callbackId', value: args.callbackId });
        }
        if (query.length > 0) {
            message += '?';
            message += query.map((pair) => `${pair.key}=${pair.value}`).join('&');
        }
        return message;
    }
}
 
class JSONEncoder {
    encode(args) {
        const message = {
            channel: args.channel,
            action: args.action,
            params: args.params,
            callbackId: args.callbackId,
        };
        return JSON.stringify(message);
    }
}
 
const webViewJavaScriptBridge = new WebViewJavaScriptBridge();
window.webViewJavaScriptBridge = webViewJavaScriptBridge;
 
 
 
async function sendingMessage() {
    let response = await webViewJavaScriptBridge.sendMessage({
      action: 'tester',
      params: 123456,
    });
    console.log("tester's response", response);
  }

참고 https://github.com/niwaguan/webview-javascript-bridge/tree/master/example/flutter

GitHub - niwaguan/webview-javascript-bridge: A bridge for JavaScript communicate with webview_flutter

A bridge for JavaScript communicate with webview_flutter - GitHub - niwaguan/webview-javascript-bridge: A bridge for JavaScript communicate with webview_flutter

github.com

main.dart

 import 'package:flutter/material.dart';
import 'package:webview_in_flutter/navigator_page.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const NavigatorPage(),
    );
  }
}

navigator_page.dart

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_in_flutter/browser_page.dart';
 
class NavigatorPage extends StatelessWidget {
  const NavigatorPage({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CupertinoButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (BuildContext context) {
                  return const BrowserPage();
                }),
              );
            },
            child: const Text('Go to Browser')),
      ),
    );
  }
}

browser_page.dart

 import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_javascript_bridge/webview_javascript_bridge.dart';
 
class BrowserPage extends StatefulWidget {
  const BrowserPage({Key? key}) : super(key: key);
 
  @override
  State<BrowserPage> createState() => _BrowserPageState();
}
 
class _BrowserPageState extends State<BrowserPage> {
  /// the bridge for webview and javascript
  late final WebViewJavaScriptBridge _bridge = WebViewJavaScriptBridge();
 
  /// the WebViewController
  late final _webviewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          // Update loading bar.
        },
        onPageStarted: (String url) {},
        onPageFinished: (String url) {},
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    )
    ..addJavaScriptChannel(webviewJavaScriptBridgeChannel,
        onMessageReceived: _bridge.receiveMessage)
    ..loadRequest(Uri.parse('http://220.72.212.247:9286/'));
 
  @override
  void initState() {
    super.initState();
    _bridge.updateWebViewController(_webviewController);
    _bridge.addMessageHandler(ClosureMessageHandler(
      resolver: (message, controller) => message.action == "tester",
      handler: (message, controller) {
        print(message);
        return null;
      },
    ));
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
        actions: [
          IconButton(
            onPressed: _reload,
            icon: const Icon(Icons.refresh_outlined),
          ),
        ],
      ),
      body: Column(
        children: [
          SizedBox(
            height: 44,
            child: Wrap(
              children: [
                TextButton(
                  onPressed: () async {
                    final ret = await _bridge.sendMessage<Map<String, dynamic>>(
                        function: 'jsFunction');
                    print("got value: $ret");
                  },
                  child: const Text('call JavaScript'),
                ),
              ],
            ),
          ),
          Expanded(
            child: WebViewWidget(
              controller: _webviewController,
            ),
          )
        ],
      ),
    );
  }
 
  @override
  void reassemble() {
    super.reassemble();
    _reload();
  }
 
  _reload() {
    _webviewController.reload();
  }
}

pubspec.yaml

 name: webview_in_flutter
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
 
environment:
  sdk: '>=2.19.1 <3.0.0'
 
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
 
 
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: ^4.0.2
  webview_javascript_bridge: ^2.0.0
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0
 
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
 
# The following section is specific to Flutter packages.
flutter:
 
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
 
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
 
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware
 
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
 
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

저작자표시 비영리

'프로그래밍 > flutter' 카테고리의 다른 글

flutter socket 연결후 데이타 계속 보내기 mymq 연결후 응답받음 (0)	2023.06.28
flutter dart 에서 hexString 을 byte 로 변환 (소켓한번만연결) (0)	2023.06.28
flutter Tcp Socket 가장 간단한 샘플 (0)	2023.06.28
flutter 앱에 webView 추가 방법 (0)	2023.02.16
Flutter 이용하여 TCP socket 연결 샘플 코드 (0)	2023.02.16

현재글flutter webview 와 네이티브간의 데이터 통신 webview-javascript-bridge 사용

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

소행성왕자