feat: add web support

.vscode/launch.json

@@ -13,21 +13,24 @@
             "name": "chat_app",
             "cwd": "example\\chat_app",
             "request": "launch",
-            "type": "dart"
+            "type": "dart",
+            "args": ["--web-port", "3000"]
         },
         {
             "name": "chat_app (profile mode)",
             "cwd": "example\\chat_app",
             "request": "launch",
             "type": "dart",
-            "flutterMode": "profile"
+            "flutterMode": "profile",
+            "args": ["--web-port", "3000"]
         },
         {
             "name": "chat_app (release mode)",
             "cwd": "example\\chat_app",
             "request": "launch",
             "type": "dart",
-            "flutterMode": "release"
+            "flutterMode": "release",
+            "args": ["--web-port", "3000"]
         }
     ]
 }

README.md

@@ -8,6 +8,8 @@ Check out [client SDK API specification](https://centrifugal.dev/docs/transports
 
 The features implemented by this SDK can be found in [SDK feature matrix](https://centrifugal.dev/docs/transports/client_sdk#sdk-feature-matrix).
 
+Note that connection headers can only be set on platforms that support `dart:io`. So notably headers are ignored on the web platform.
+
 > **The latest `centrifuge-dart` is compatible only with the latest [Centrifugo](https://github.com/centrifugal/centrifugo) server (v4) and [Centrifuge](https://github.com/centrifugal/centrifuge) >= 0.25.0. For Centrifugo v2, Centrifugo v3 and Centrifuge < 0.25.0 you should use `centrifuge-dart` v0.8.0.**
 
 ## Example

example/chat_app/.metadata

@@ -18,6 +18,12 @@ migration:
     - platform: android
       create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
       base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+    - platform: ios
+      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+    - platform: web
+      create_revision: 135454af32477f815a7525073027a3ff9eff1bfd
+      base_revision: 135454af32477f815a7525073027a3ff9eff1bfd
 
   # User provided section
 

example/chat_app/README.md

@@ -1,20 +1,46 @@
 # Chat app example
 
-By default it will run with the Centrifugo public demo instance. To run locally use this configuration for your server:
+Before running this example make sure you created `chat` namespace in Centrifugo configuration and allowed publishing into channel - i.e. using config like this:
 
 ```json
 {
   ...
+  "allowed_origins": ["http://localhost:8000", "http://localhost:3000"],
   "namespaces": [
     {
       "name": "chat",
       "anonymous": false,
       "publish": true,
       "join_leave": true,
-      "presence": true
+      "presence": true,
+      "presence_stats": true,
+	    "allow_publish_for_subscriber": true,
+      "allow_subscribe_for_client": true
     }
   ]
 }
 ```
 
-Then change the server address in `conf.dart`
+Call `centrifugo genconfig` to create a basic `config.json` at the first time.
+
+Also run Centrifugo in insecure client mode so it does not expect JWT token from client:
+
+```bash
+./centrifugo --config config.json --client_insecure --admin
+```
+
+Alternatively to running in insecure mode, you can regenerate the tokens in `lib/src/conf.dart` on your system.
+
+Now check the IP address if your system with `ipconfig` on Windows and `ip adds` on Unix-like systems and change the serverAddr in `lib/conf.dart` accordingly.
+
+When the configuration is correct, you can launch the app on the platform of your choice. When running on web, ensure that you specify a port using the `--web-port` argument 
+and that you have whitelisted that port in your Centrifugo `config.json` file. E.g. `"allowed_origins": ["http://localhost:8000", "http://localhost:3000"]` when running
+locally on port 3000: `flutter run -d chrome --web-port 3000`.
+
+When you have started centrifugo with the `--admin` option, you can also open `http://localhost:8000/#/actions` to send a message to your console app with the
+following settings:
+* Method: Publish
+* Channel: `chat:index`
+* Data: `{"message": "hello world", "username": "admin"}`
+
+Congratulations, you have a running centrifugo system and a Flutter app that connects to it!

lib/src/channel.dart

@@ -0,0 +1,22 @@
+import 'package:web_socket_channel/io.dart';
+import 'package:web_socket_channel/web_socket_channel.dart';
+
+/// Connects the web socket channel
+WebSocketChannel connect(
+  Uri uri, {
+  Iterable<String>? protocols,
+  Map<String, dynamic>? headers,
+}) =>
+    IOWebSocketChannel.connect(
+      uri,
+      protocols: protocols,
+      headers: headers,
+    );
+
+/// Extends the web socket channel
+extension WebSocketChannelExtension on WebSocketChannel {
+  /// Sends the given binary [data]
+  void sendData(List<int> data) {
+    sink.add(data);
+  }
+}