flutter_io_socket

Description:

flutter io socket

This is step to connect socket easly #
Example: #
// STEP1: Add Dependency
dependencies:
flutter_io_socket: ^0.0.7
copied to clipboard
//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);

}
copied to clipboard
//Step3: dispose the socket object
disposeSocket() {
socket.close();
socket.dispose();
}
copied to clipboard
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(_));
}
copied to clipboard
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();
copied to clipboard
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.
copied to clipboard
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") ;
}
});
});
copied to clipboard
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');
});
copied to clipboard
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);
});
copied to clipboard
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());
copied to clipboard
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,
);
},
),
);
}
}

copied to clipboard
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());
}
copied to clipboard