From acca78c603cb1ad73485cc8c8b3f332aaa8d6c46 Mon Sep 17 00:00:00 2001 From: Alexander Emelin Date: Wed, 17 Jan 2024 09:18:34 +0200 Subject: [PATCH] Fix websocket usage in web env, add simple web example (#85) --- .github/workflows/ci.yaml | 8 ++++- analysis_options.yaml | 1 - example/chat_app/analysis_options.yaml | 1 - example/chat_app/lib/client/client.dart | 9 ++---- example/chat_app/pubspec.yaml | 2 +- example/console/example.dart | 2 -- example/flutter_app/analysis_options.yaml | 1 - .../ios/Flutter/flutter_export_environment.sh | 8 ++--- example/flutter_app/pubspec.yaml | 2 +- example/web_app/.gitignore | 3 ++ example/web_app/CHANGELOG.md | 3 ++ example/web_app/README.md | 6 ++++ example/web_app/analysis_options.yaml | 30 +++++++++++++++++++ example/web_app/pubspec.yaml | 19 ++++++++++++ example/web_app/web/index.html | 19 ++++++++++++ example/web_app/web/main.dart | 26 ++++++++++++++++ example/web_app/web/styles.css | 14 +++++++++ lib/src/channel_html.dart | 2 +- pubspec.yaml | 2 +- 19 files changed, 137 insertions(+), 21 deletions(-) create mode 100644 example/web_app/.gitignore create mode 100644 example/web_app/CHANGELOG.md create mode 100644 example/web_app/README.md create mode 100644 example/web_app/analysis_options.yaml create mode 100644 example/web_app/pubspec.yaml create mode 100644 example/web_app/web/index.html create mode 100644 example/web_app/web/main.dart create mode 100644 example/web_app/web/styles.css diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index d3ea12a..e798fb9 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -8,9 +8,15 @@ jobs: if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository environment: test_ci runs-on: ubuntu-latest + strategy: + matrix: + sdk: [2.19, stable, beta] steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 + - uses: dart-lang/setup-dart@v1 + with: + sdk: ${{ matrix.sdk }} - name: Install dependencies run: dart pub get diff --git a/analysis_options.yaml b/analysis_options.yaml index 2e73fca..b2777fc 100644 --- a/analysis_options.yaml +++ b/analysis_options.yaml @@ -93,7 +93,6 @@ linter: # - prefer_const_constructors # - prefer_constructors_over_static_methods # not yet tested - prefer_contains - - prefer_equal_for_default_values # - prefer_expression_function_bodies # conflicts with https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#consider-using--for-short-functions-and-methods # - prefer_final_fields # https://github.com/dart-lang/linter/issues/506 - prefer_final_locals diff --git a/example/chat_app/analysis_options.yaml b/example/chat_app/analysis_options.yaml index 65e1f22..79d1958 100644 --- a/example/chat_app/analysis_options.yaml +++ b/example/chat_app/analysis_options.yaml @@ -9,7 +9,6 @@ analyzer: missing_required_param: error invalid_use_of_protected_member: error dead_code: info - sdk_version_async_exported_from_core: ignore linter: rules: - unnecessary_statements diff --git a/example/chat_app/lib/client/client.dart b/example/chat_app/lib/client/client.dart index 90cbbba..7b23c30 100644 --- a/example/chat_app/lib/client/client.dart +++ b/example/chat_app/lib/client/client.dart @@ -30,7 +30,6 @@ class ChatClient { _client = createClient( url, ClientConfig( - name: conf.userName, token: conf.userJwtToken, headers: { 'user-id': chatUserId, @@ -85,9 +84,7 @@ class ChatClient { token: conf.subscriptionJwtToken, ), ); - subscription.publication - .map((e) => utf8.decode(e.data)) - .listen((data) { + subscription.publication.map((e) => utf8.decode(e.data)).listen((data) { final d = json.decode(data) as Map; final username = d["username"].toString(); final msg = d["message"].toString(); @@ -96,9 +93,7 @@ class ChatClient { text: msg, user: ChatUser( name: username, - containerColor: username == conf.userName - ? Colors.lightBlueAccent - : Colors.grey[300], + containerColor: username == conf.userName ? Colors.lightBlueAccent : Colors.grey[300], color: Colors.black87, ), ), diff --git a/example/chat_app/pubspec.yaml b/example/chat_app/pubspec.yaml index 1c55121..063d6e5 100644 --- a/example/chat_app/pubspec.yaml +++ b/example/chat_app/pubspec.yaml @@ -8,7 +8,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev version: 0.1.0 environment: - sdk: ">=2.18.0 <3.0.0" + sdk: ">=2.19.0 <4.0.0" dependencies: centrifuge: diff --git a/example/console/example.dart b/example/console/example.dart index c613c02..13d1b6e 100644 --- a/example/console/example.dart +++ b/example/console/example.dart @@ -6,7 +6,6 @@ import 'package:centrifuge/centrifuge.dart' as centrifuge; void main() async { final url = 'ws://localhost:8000/connection/websocket'; final channel = 'chat:index'; - final userName = 'dart'; // generate user JWT token for user "dart": // ./centrifugo gentoken --user dart final userJwtToken = @@ -24,7 +23,6 @@ void main() async { final client = centrifuge.createClient( url, centrifuge.ClientConfig( - name: userName, token: userJwtToken, // Headers are only supported on platforms that support dart:io headers: {'X-Example-Header': 'example'}, diff --git a/example/flutter_app/analysis_options.yaml b/example/flutter_app/analysis_options.yaml index db83458..aab839c 100644 --- a/example/flutter_app/analysis_options.yaml +++ b/example/flutter_app/analysis_options.yaml @@ -94,7 +94,6 @@ linter: # - prefer_const_constructors # - prefer_constructors_over_static_methods # not yet tested - prefer_contains - - prefer_equal_for_default_values # - prefer_expression_function_bodies # conflicts with https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#consider-using--for-short-functions-and-methods # - prefer_final_fields # https://github.com/dart-lang/linter/issues/506 - prefer_final_locals diff --git a/example/flutter_app/ios/Flutter/flutter_export_environment.sh b/example/flutter_app/ios/Flutter/flutter_export_environment.sh index 0ece086..e3a8af2 100755 --- a/example/flutter_app/ios/Flutter/flutter_export_environment.sh +++ b/example/flutter_app/ios/Flutter/flutter_export_environment.sh @@ -1,13 +1,13 @@ #!/bin/sh # This is a generated file; do not edit or check into version control. -export "FLUTTER_ROOT=/usr/local/Caskroom/flutter/2.0.6/flutter" +export "FLUTTER_ROOT=/usr/local/Caskroom/flutter/3.10.6/flutter" export "FLUTTER_APPLICATION_PATH=/Users/fz/projects/centrifugal/centrifuge-dart/example/flutter_app" +export "COCOAPODS_PARALLEL_CODE_SIGN=true" export "FLUTTER_TARGET=lib/main.dart" export "FLUTTER_BUILD_DIR=build" -export "SYMROOT=${SOURCE_ROOT}/../build/ios" export "FLUTTER_BUILD_NAME=1.0.0" export "FLUTTER_BUILD_NUMBER=1" export "DART_OBFUSCATION=false" -export "TRACK_WIDGET_CREATION=false" +export "TRACK_WIDGET_CREATION=true" export "TREE_SHAKE_ICONS=false" -export "PACKAGE_CONFIG=.packages" +export "PACKAGE_CONFIG=.dart_tool/package_config.json" diff --git a/example/flutter_app/pubspec.yaml b/example/flutter_app/pubspec.yaml index 6ce61b9..0e5bd59 100644 --- a/example/flutter_app/pubspec.yaml +++ b/example/flutter_app/pubspec.yaml @@ -2,7 +2,7 @@ name: centrifuge_app description: A new Flutter project. environment: - sdk: '>=2.12.0 <3.0.0' + sdk: '>=2.19.0 <4.0.0' dependencies: flutter: diff --git a/example/web_app/.gitignore b/example/web_app/.gitignore new file mode 100644 index 0000000..3a85790 --- /dev/null +++ b/example/web_app/.gitignore @@ -0,0 +1,3 @@ +# https://dart.dev/guides/libraries/private-files +# Created by `dart pub` +.dart_tool/ diff --git a/example/web_app/CHANGELOG.md b/example/web_app/CHANGELOG.md new file mode 100644 index 0000000..effe43c --- /dev/null +++ b/example/web_app/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 + +- Initial version. diff --git a/example/web_app/README.md b/example/web_app/README.md new file mode 100644 index 0000000..14d8b7c --- /dev/null +++ b/example/web_app/README.md @@ -0,0 +1,6 @@ +An absolute bare-bones web app. + +``` +dart pub global activate webdev +webdev serve +``` diff --git a/example/web_app/analysis_options.yaml b/example/web_app/analysis_options.yaml new file mode 100644 index 0000000..dee8927 --- /dev/null +++ b/example/web_app/analysis_options.yaml @@ -0,0 +1,30 @@ +# This file configures the static analysis results for your project (errors, +# warnings, and lints). +# +# This enables the 'recommended' set of lints from `package:lints`. +# This set helps identify many issues that may lead to problems when running +# or consuming Dart code, and enforces writing Dart using a single, idiomatic +# style and format. +# +# If you want a smaller set of lints you can change this to specify +# 'package:lints/core.yaml'. These are just the most critical lints +# (the recommended set includes the core lints). +# The core lints are also what is used by pub.dev for scoring packages. + +include: package:lints/recommended.yaml + +# Uncomment the following section to specify additional rules. + +# linter: +# rules: +# - camel_case_types + +# analyzer: +# exclude: +# - path/to/excluded/files/** + +# For more information about the core and recommended set of lints, see +# https://dart.dev/go/core-lints + +# For additional information about configuring this file, see +# https://dart.dev/guides/language/analysis-options diff --git a/example/web_app/pubspec.yaml b/example/web_app/pubspec.yaml new file mode 100644 index 0000000..113e28c --- /dev/null +++ b/example/web_app/pubspec.yaml @@ -0,0 +1,19 @@ +name: web_app +description: An absolute bare-bones web app. +version: 1.0.0 +# repository: https://github.com/my_org/my_repo + +environment: + sdk: ^3.2.4 + +# Add regular dependencies here. +dependencies: + centrifuge: + path: ../../ + +publish_to: none + +dev_dependencies: + build_runner: ^2.4.0 + build_web_compilers: ^4.0.0 + lints: ^2.1.0 diff --git a/example/web_app/web/index.html b/example/web_app/web/index.html new file mode 100644 index 0000000..8de1648 --- /dev/null +++ b/example/web_app/web/index.html @@ -0,0 +1,19 @@ + + + + + + + + + web_app + + + + + + +
+ + + diff --git a/example/web_app/web/main.dart b/example/web_app/web/main.dart new file mode 100644 index 0000000..9f4c41e --- /dev/null +++ b/example/web_app/web/main.dart @@ -0,0 +1,26 @@ +import 'dart:html'; + +import 'package:centrifuge/centrifuge.dart'; + +void main() { + querySelector('#output')?.text = 'Your Dart app is running.'; + + void onEvent(dynamic event) { + querySelector('#output')?.text = 'client> $event'; + } + + const url = 'ws://localhost:8000/connection/websocket'; + Client client = createClient( + url, + ClientConfig(), + ); + + // State changes. + client.connecting.listen(onEvent); + client.connected.listen(onEvent); + client.disconnected.listen(onEvent); + // Handle async errors. + client.error.listen(onEvent); + + client.connect(); +} diff --git a/example/web_app/web/styles.css b/example/web_app/web/styles.css new file mode 100644 index 0000000..cc035c9 --- /dev/null +++ b/example/web_app/web/styles.css @@ -0,0 +1,14 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); + +html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +#output { + padding: 20px; + text-align: center; +} diff --git a/lib/src/channel_html.dart b/lib/src/channel_html.dart index 7c5b0ca..2a1d616 100644 --- a/lib/src/channel_html.dart +++ b/lib/src/channel_html.dart @@ -22,7 +22,7 @@ extension HtmlWebSocketChannelExtension on WebSocketChannel { final channel = this; if (channel is HtmlWebSocketChannel) { final byteBuffer = data is Uint8List ? data.buffer : Uint8List.fromList(data).buffer; - channel.innerWebSocket.sendByteBuffer(byteBuffer); + channel.sink.add(byteBuffer); } else { channel.sink.add(data); } diff --git a/pubspec.yaml b/pubspec.yaml index fe374e3..7cf8626 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -14,7 +14,7 @@ dependencies: fixnum: ^1.0.0 meta: ^1.3.0 protobuf: ^3.0.0 - web_socket_channel: ^2.3.0 + web_socket_channel: ^2.4.0 dev_dependencies: build_runner: ^2.0.3