Flutter Port about socket.io-client-dart

[jumperchen]

Yes, porting to Flutter version is in our roadmap.

[aravind-ig]

Flutter Socket.io
Try this

[boeledi]

I would definitely prefer a "normal" flutter package. Therefore I am also waiting for the Flutter version

[CHOMNANP]

I'm still waiting for this as well :D
Any tips?

[jumperchen]

closed by this commit - 88a2a09

[mligeziak]

Any updates?

[ahmadudin]

@marianoarga for example, how can i do this in flutter?

socket.emit('find', 'messages', { status: 'read', user: 10 }, (error, data) => {
  console.log('Found all messages', data);
});

i've tried like

socketIO.sendMessage("find", "messages", (dynamic data) {print(data);});

but the second argument("messages") is causing error org.json.JSONException: Value thread of type java.lang.String cannot be converted to JSONObject.

[CircleCurve]

and finally i have finished by using plugin.! Export both android and ios socket.io libs to flutter and then call it from dart side !

[dinhha]

Can't wait to try this features!!!

[marianoarga]

@ahmadudin yes, I'm currently using it in not production apps

[kazrulit]

Flutter Socket.io
Try this

Hi, does anyone know how to set the path parameter on creating socket io connection, like here:
var socket = io('http://www.example.com/my-namespace', { path: '/some-test-path'});

[marianoarga]

@vinicioslc please contact the author at the plugin contact email:
[email protected]

He is very active and you can have a nice talk.

[ArneSaknussemm89]

Awesome! Glad to hear it :)

Do you guys have a roadmap posted anywhere? (Curious about timeline as I'm tempted on using Flutter for a personal project)

[jumperchen]

No, we don't have a specific schedule yet at the moment.

[QoLTech]

I would love a pure flutter port. Or even just pointing me in the right direction to being able to be used in flutter.

[ashasandeep]

Looking forward to this

Can't wait for this as well

[irchriscott]

Still waiting for it...

[CircleCurve]

Please add support with flutter !! It must be really helpful of developing apps !

[heypoom]

This would be super helpful for all of us. Definitely looking forward to the flutter port!

[oujunhao]

Me too! I'm a highschool student, but I'm willing to learn and maybe help if there's something for me to do!

[QoLTech]

@CircleCurve Can you explain or post your solution to this?

[CircleCurve]

@QoLTech First i need to say it does not a pure flutter port. I use native plugin and communicate with dart
(such like flutter plugin implementation)

1. Take a look of android and ios socket.io libraries and import related package into gradle and pod file
   Android socket.io
   IOS socket.io

Let's say your package name is com.example.testplugin
2. open android/app/src/main/java/com/example/testplugin/MainActivity.java

public class MainActivity extends FlutterActivity {
  private static final String CALLBACK_CHANNEL = "com.example.testplugin/callback" ;
  
 private Socket mSocket ;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);

    final MethodChannel channel = new MethodChannel(getFlutterView(), CALLBACK_CHANNEL) ;
    channel.setMethodCallHandler(
            new MethodChannel.MethodCallHandler() {
              @Override
              public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
                if (methodCall.method.equals("addCallBack")) {
                  Log.d("DEBUG_MSG" , "go init socket") ;
                  connectSocket(channel);
                  /*
                  Map<String, String> params = new HashMap<String, String>() ;
                  params.put("success" , "wow") ;
                  channel.invokeMethod("onSuccess" , params);*/
                }else{
                  result.notImplemented();
                }
              }
            }
    );

//=========Socket=============
  private void connectSocket(final MethodChannel channel) {
    try {
      mSocket  = IO.socket("http://your_socket_io:8000") ;  //in nodejs you may say that is localhost:3000, 127.0.0.1:3000...etc

      mSocket.on("time_counter", new Emitter.Listener() {
        @Override
        public void call(Object... args) {
            channel.invokeMethod("onSuccess", args[0].toString());
        }
      }) ;
      mSocket.connect() ;
      Log.d("DEBUG_MSG" , "connect success") ;
    }catch (URISyntaxException e) {
      Log.d("DEBUG_MSG" , "connect fail : " + e.toString()) ;
    }
  }
}

Now, you have created a plugin of socket.io in android-side and listen on time counter event (you can write it your own event)

In dart-side, you need to make a listener to listen a call from java!

1. open lib/main.dart

import 'dart:async' ; 
import 'dart:convert' ; 

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.


  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new 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 press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Test plugin"),
        ),
        body: MyHomePage(), 
      ), 
    );
  }
}

class MyHomePage  extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    static const platformCallback = const MethodChannel("com.example.testplugin/callback") ; 

Future<Null> _callBack() async {
    platformCallback.setMethodCallHandler((MethodCall call) {
      switch(call.method){
        case "onSuccess" : 
          print("onSuccess") ;
          Map<String, dynamic> rtn = JSON.decode(call.arguments);

          String title = rtn["message"][0]["title"].toString() ; 
          String basePrice = rtn["message"][0]["basePrice"].toString() ; 
          String currentPrice = rtn["message"][0]["currentPrice"].toString() ; 
          String perBid = rtn["message"][0]["perBid"].toString() ; 
          String bidder = rtn["message"][0]["bidder"].toString() ; 
          String expireTime = rtn["message"][0]["expireTime"].toString() ; 
          String deal = rtn["message"][0]["deal"].toString() ; 

          print(expireTime) ;            
        //print(call.arguments["message"]) ; 
        break ; 
        case  "onFail" :

          print("onFail") ; 
        break ; 

        case "onCancel" : 

          print("onCancel") ; 
        break ; 
      }
    }); 

    await platformCallback.invokeMethod('addCallBack', {"tag" : "tags"});
  }

Finally, i hope that can help someone!! haha

Reference
Learn how to make platform-specific code
Learn how to make a listener in dart

[marianoarga]

+1

[iampawan]

+1

[ahmadudin]

@aravind-ig does the package really works? i got infinity resolving dependencies stage when using it.

[ahmadudin]

@marianoarga i don't know why, but everytime i'm using it, my build would always stuck at resolving dependencies with abnormal cpu usage increase. Does it has any dependencies?

[ahmadudin]

Or did i do it wrong?

[marianoarga]

It's hard to know, try in another location, maybe you are behind a proxy, try "flutter packages get -v" and take a look at the output

[ahmadudin]

@marianoarga I just try to use it again and now somehow it can compile just right. But still, i can't figure how to use it yet. Do yo have any example on how to use it?

[marianoarga]

@ahmadudin
In your code "messages" is not a Json object as error message describes, you have to send a valid json object like string:

String jsonData = "{'entity':'messages', 'status':'read', 'user':10}";
socketIO.sendMessage("find", jsonData, ...);

Note: I would use just method (find), and move the entity type (messages) to the Json request.

[ahmadudin]

@marianoarga does it means that i have to change socket.io configuration in my server? my node server is throwing error because the second arguments should be string, not json.

[marianoarga]

@ahmadudin For sure, that will be simpler than modify flutter_socket_io plugin I think...

[ahmadudin]

@marianoarga i don't think so, the socket.io configuration on my server is handled by feathersjs

[ahmadudin]

For anyone who have the same problem as me, try this pugin
Flutter socket.io Feathersjs
Its basically is a modified version of flutter_socket_io plugin

[vinicioslc]

Flutter Socket.io
Try this

I has searched a bit, but i doesn't find the repository of creator :( i want improve the library him...

[vinicioslc]

Flutter Socket.io
Try this

I cloned the code in my repo and left the code open to improvements and I hope someone contributed improvements to motivate put it in DartPackages again.

I updated adding the namespace optional parameter.

https://github.com/vinicioslc/socket_io_flutter

[mliitfall]

Flutter Socket.io
Try this

How to use custom path?
like this : http://10.0.2.2:3000/test
On server side:
var socket = io({path: '/test'});
client side:
var io = require('socket.io')(server,{path: '/test'});
Flutter :
I'm able to connect with no custom path. But with custom path, i got an error. Where should i put path?

socketIO = SocketIOManager().createSocketIO("http://10.0.2.2:3000/test", "", socketStatusCallback: _socketStatus);`

[mliitfall]

Flutter Socket.io
Try this

Hi, does anyone know how to set the path parameter on creating socket io connection, like here:
var socket = io('http://www.example.com/my-namespace', { path: '/some-test-path'});

@kazrulit @marianoarga @ahmadudin did you find the way to set path parameter?

[dspoonia7]

Any updates on this? @jumperchen @felangel

[harshaIOT]

I am trying to implement this socket io package in IOS platform, but its throwing error, I have followed the suggestions and implementation part like in the document ( Instructions they gave ), still not working.

Error msg:

CocoaPods' output:
↳
      Preparing
    Analyzing dependencies
    Inspecting targets to integrate
      Using `ARCHS` setting to build architectures of target `Pods-Runner`: (``)
    Finding Podfile changes
      A Socket.IO-Client-Swift
      A flutter_socket_io
      - Flutter
      - fluttertoast
      - map_view
      - path_provider
      - share
      - sqflite
      - url_launcher
    Fetching external sources
    -> Fetching podspec for `Flutter` from `.symlinks/flutter/ios`
    -> Fetching podspec for `flutter_socket_io` from `.symlinks/plugins/flutter_socket_io/ios`
    -> Fetching podspec for `fluttertoast` from `.symlinks/plugins/fluttertoast/ios`
    -> Fetching podspec for `map_view` from `.symlinks/plugins/map_view/ios`
    -> Fetching podspec for `path_provider` from `.symlinks/plugins/path_provider/ios`
    -> Fetching podspec for `share` from `.symlinks/plugins/share/ios`
    -> Fetching podspec for `sqflite` from `.symlinks/plugins/sqflite/ios`
    -> Fetching podspec for `url_launcher` from `.symlinks/plugins/url_launcher/ios`
    Resolving dependencies of `Podfile`
    Comparing resolved specification to the sandbox manifest
      A FMDB
      A Flutter
      A GoogleMaps
      A Socket.IO-Client-Swift
      A Starscream
      A flutter_socket_io
      A fluttertoast
      A map_view
      A path_provider
      A share
      A sqflite
      A url_launcher
    Downloading dependencies
    -> Installing FMDB (2.7.5)
      > Copying FMDB from `/Users/harshavardhan/Library/Caches/CocoaPods/Pods/Release/FMDB/2.7.5-2ce00` to `Pods/FMDB`
    -> Installing Flutter (1.0.0)
    -> Installing GoogleMaps (2.7.0)
      > Copying GoogleMaps from `/Users/harshavardhan/Library/Caches/CocoaPods/Pods/Release/GoogleMaps/2.7.0-f79af` to `Pods/GoogleMaps`
    -> Installing Socket.IO-Client-Swift (13.3.1)
      > Copying Socket.IO-Client-Swift from `/Users/harshavardhan/Library/Caches/CocoaPods/Pods/Release/Socket.IO-Client-Swift/13.3.1-79f8f` to `Pods/Socket.IO-Client-Swift`
    -> Installing Starscream (3.0.6)
      > Copying Starscream from `/Users/harshavardhan/Library/Caches/CocoaPods/Pods/Release/Starscream/3.0.6-ef3ec` to `Pods/Starscream`
    -> Installing flutter_socket_io (0.0.1)
    -> Installing fluttertoast (0.0.2)
    -> Installing map_view (0.0.12)
    -> Installing path_provider (0.0.1)
    -> Installing share (0.5.2)
    -> Installing sqflite (0.0.1)
    -> Installing url_launcher (0.0.1)
      - Running pre install hooks
    [!] Unable to determine Swift version for the following pods:
    - `Socket.IO-Client-Swift` does not specify a Swift version and none of the targets (`Runner`) integrating it have the `SWIFT_VERSION` attribute set. Please contact the author or set the `SWIFT_VERSION` attribute in at least one of the targets that integrate this pod.
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/installer/xcode/target_validator.rb:115:in `verify_swift_pods_swift_version'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/installer/xcode/target_validator.rb:37:in `validate!'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/installer.rb:459:in `validate_targets'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/installer.rb:138:in `install!'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/command/install.rb:48:in `run'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/claide-1.0.2/lib/claide/command.rb:334:in `run'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/lib/cocoapods/command.rb:52:in `run'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/gems/cocoapods-1.6.1/bin/pod:55:in `<top (required)>'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/bin/pod:22:in `load'
    /usr/local/Cellar/cocoapods/1.6.1/libexec/bin/pod:22:in `<main>'
Error output from CocoaPods:
↳
    [!] Automatically assigning platform `ios` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
Error running pod install
Error launching application on iPhone Xʀ.
Exited (sigterm)
```

[katastreet]

Flutter Socket.io
Try this

Hi, does anyone know how to set the path parameter on creating socket io connection, like here:
var socket = io('http://www.example.com/my-namespace', { path: '/some-test-path'});

@kazrulit @marianoarga @ahmadudin did you find the way to set path parameter?

For all having issues with custom path parameter, I got around this by using adhara_socket_io package. Implementation is similar to this one.