flutter_io_socket 0.0.7

Socket.io common parser library.

This is step to connect socket easly

Example:

// STEP1: Add Dependency

dependencies:
  flutter_io_socket: ^0.0.7

//STEP2: Add this in widget

Socket socket;

init()
{
socket = io('http://localhost:3000',, <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    });

socket.connect();

connectAndListen();

}

void connectAndListen(){

    socket.onConnect((_) => print('connect'));
    socket.onDisconnect((_) => print('disconnect'));
    socket.onError((_) => print('error'));
    socket.onConnecting((_) => print('connecting'));
    socket.onConnectError((_) => print('connect Error'));
    socket.onConnectTimeout((data) => print('timeout'));
    socket.on('connect_error', (value) {print('connect error ${value.toString()}');});

    //When an event recieved from server, data is added to the stream
    socket.on('event', (data) => streamSocket.addResponse);

    //when sending message using emit
    Map<String, dynamic> map= new Map<String, dynamic>();
    map["message"] = "Hello";
    socket.emit('sendMessage', map);

}

//Step3: dispose the socket object

  disposeSocket() {
    socket.close();
    socket.dispose();
  }

Dart Client

import 'package:socket_io_client/socket_io_client.dart' as IO;

main() {
  // Dart client
  IO.Socket socket = IO.io('http://localhost:3000');
  socket.onConnect((_) {
    print('connect');
    socket.emit('msg', 'test');
  });
  socket.on('event', (data) => print(data));
  socket.onDisconnect((_) => print('disconnect'));
  socket.on('fromServer', (_) => print(_));
}

Connect manually

To connect the socket manually, set the option autoConnect: false and call .connect().

For example,

Socket socket = io('http://localhost:3000', 
    OptionBuilder()
      .setTransports(['websocket']) // for Flutter or Dart VM
      .disableAutoConnect()  // disable auto-connection
      .setExtraHeaders({'foo': 'bar'}) // optional
      .build()
  );
socket.connect();

Note that .connect() should not be called if autoConnect: true (by default, it's enabled to true), as this will cause all event handlers to get registered/fired twice.

Update the extra headers

Socket socket = ... // Create socket.
socket.io.options['extraHeaders'] = {'foo': 'bar'}; // Update the extra headers.
socket.io..disconnect()..connect(); // Reconnect the socket manually.

Emit with acknowledgement

Socket socket = ... // Create socket.
socket.onConnect((_) {
    print('connect');
    socket.emitWithAck('msg', 'init', ack: (data) {
        print('ack $data') ;
        if (data != null) {
          print('from server $data');
        } else {
          print("Null") ;
        }
    });
});

Socket connection events

These events can be listened on.

const List EVENTS = [
  'connect',
  'connect_error',
  'connect_timeout',
  'connecting',
  'disconnect',
  'error',
  'reconnect',
  'reconnect_attempt',
  'reconnect_failed',
  'reconnect_error',
  'reconnecting',
  'ping',
  'pong'
];

// Replace 'onConnect' with any of the above events.
socket.onConnect((_) {
    print('connect');
});

Acknowledge with the socket server that an event has been received.

socket.on('eventName', (data) {
    final dataList = data as List;
    final ack = dataList.last as Function;
    ack(null);
});

Usage (Flutter)

In Flutter env. not (Flutter Web env.) it only works with dart:io websocket, not with dart:html websocket or Ajax (XHR), so in this case you have to add setTransports(['websocket']) when creates the socket instance.

For example,

IO.Socket socket = IO.io('http://localhost:3000',
  OptionBuilder()
      .setTransports(['websocket']) // for Flutter or Dart VM
      .setExtraHeaders({'foo': 'bar'}) // optional
      .build());

Usage with stream and streambuilder in Flutter

import 'dart:async';


// STEP1:  Stream setup
class StreamSocket{
  final _socketResponse= StreamController<String>();

  void Function(String) get addResponse => _socketResponse.sink.add;

  Stream<String> get getResponse => _socketResponse.stream;

  void dispose(){
    _socketResponse.close();
  }
}

StreamSocket streamSocket =StreamSocket();

//STEP2: Add this function in main function in main.dart file and add incoming data to the stream
void connectAndListen(){
  IO.Socket socket = IO.io('http://localhost:3000',
      OptionBuilder()
       .setTransports(['websocket']).build());

    socket.onConnect((_) {
     print('connect');
     socket.emit('msg', 'test');
    });

    //When an event recieved from server, data is added to the stream
    socket.on('event', (data) => streamSocket.addResponse);
    socket.onDisconnect((_) => print('disconnect'));

}

//Step3: Build widgets with streambuilder

class BuildWithSocketStream extends StatelessWidget {
  const BuildWithSocketStream({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: StreamBuilder(
        stream: streamSocket.getResponse ,
        builder: (BuildContext context, AsyncSnapshot<String> snapshot){
          return Container(
            child: snapshot.data,
          );
        },
      ),
    );
  }
}

Troubleshooting

Cannot connect "https" server or self-signed certificate server

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

void main() {
  HttpOverrides.global = new MyHttpOverrides();
  runApp(MyApp());
}