Flutter 앱과 서버 간 실시간 양방향 통신을 가능하게 하는 Dart 기반의 Socket.IO 클라이언트 구현입니다. Android, iOS, Web, macOS, Windows, Linux 등 다양한 플랫폼에서 WebSocket 프로토콜을 지원합니다. 실시간 업데이트, 채팅 애플리케이션, 실시간 데이터 동기화와 같은 이벤트 기반 상호작용을 용이하게 합니다. 기존 Socket.IO 서버와의 원활한 통합을 위해 설계되었으며, 연결, 이벤트 발행, 서버 응답 수신을 위한 간단한 API를 제공합니다. 낮은 지연 시간 통신이 필요한 인터랙티브하고 반응성 있는 애플리케이션 개발에 이상적입니다.
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. See Issue #33.
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.
Custom WebSocket connector
Use setWebSocketConnector to plug in a custom WebSocket implementation — for
example CupertinoWebSocket/OkHttpWebSocket from package:cupertino_http /
package:cronet_http, or a dart:ioHttpClient with custom TLS/proxy
settings. The connector receives the extraHeaders you set via setExtraHeaders
(forwarded on native; browsers cannot send custom headers on the WebSocket
handshake, so they are ignored there).
HttpClientAdapter and OptionBuilder.setHttpClientAdapter() are deprecated
since 3.1.6 and will be removed in 4.0.0. (They were unintentionally dropped in
3.1.5 — see #442 —
and restored as deprecated shims to keep ^3.1.x builds compiling.) Replace them
with setWebSocketConnector. To keep using a custom dart:ioHttpClient on
native (e.g. for self-signed certificates or a proxy), add web_socket to your
dependencies and wrap the socket with IOWebSocket.fromWebSocket:
import'dart:io';
import'package:web_socket/io_web_socket.dart';
// Before (deprecated):// io('http://localhost:3000',// OptionBuilder().setHttpClientAdapter(myAdapter).build());// After:Socket socket = io('http://localhost:3000',
OptionBuilder()
.setTransports(['websocket'])
.setWebSocketConnector((uri, {protocols, headers}) async {
final raw = awaitWebSocket.connect(
uri.toString(),
protocols: protocols,
headers: headers,
customClient: myHttpClient, // your custom dart:io HttpClient
);
returnIOWebSocket.fromWebSocket(raw);
})
.build());
constList EVENTS = [
'connect',
'connect_error',
'disconnect',
'error',
'reconnect',
'reconnect_attempt',
'reconnect_failed',
'reconnect_error',
'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 asList;
final ack = dataList.last asFunction;
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 setupclassStreamSocket{
final _socketResponse= StreamController<String>();
voidFunction(String) get addResponse => _socketResponse.sink.add;
Stream<String> get getResponse => _socketResponse.stream;
voiddispose(){
_socketResponse.close();
}
}
StreamSocket streamSocket =StreamSocket();
//STEP2: Add this function in main function in main.dart file and add incoming data to the streamvoidconnectAndListen(){
IO.Socket socket = IO.io('http://localhost:3000',
OptionBuilder()
.setTransports(['websocket']).build());
socket.onConnect((_) {
print('connect');
socket.emit('msg', 'test');
});
//When an event received from server, data is added to the stream
socket.on('event', (data) => streamSocket.addResponse);
socket.onDisconnect((_) => print('disconnect'));
}
//Step3: Build widgets with StreamBuilderclassBuildWithSocketStreamextendsStatelessWidget{
constBuildWithSocketStream({Key key}) : super(key: key);
@overrideWidgetbuild(BuildContext context) {
returnContainer(
child: StreamBuilder(
stream: streamSocket.getResponse ,
builder: (BuildContext context, AsyncSnapshot<String> snapshot){
returnContainer(
child: snapshot.data,
);
},
),
);
}
}
Important Notice: Handling Socket Cache and subsequent lookups
There is a design decision in the baseline IO lookup command related to the caching of socket instances.
Lookup protocol
We reuse the existing instance based on same scheme/port/host.
It is important to make clear that both dispose() and destroy() do NOT remove a host from the cache of known connections. This can cause attempted
subsequent connections to ignore certain parts of your configuration if not handled correctly. You must handle this by using the options
available in the OptionBuilder during the first creation of the instance.
Examples
In the following example, there is a userId and username set as extra headers for this connection.
If you were to try and create the same connection with updated values, if the host is the same, the extra headers will not be updated and the old
connection would be returned.
In order to prevent this, depending on your application's needs, you can either use enableForceNew() or disableMultiplex() to the
option builder. These options would modify all connections using the same host, so be aware and plan accordingly.
An additional option, if it fits your use case, would be to follow the usage mentioned above in Update the extra headers.
By updating the extra headers outside of the building of the options, you can guarantee that your connections will have the values you are expecting.
Troubleshooting
Cannot connect "https" server or self-signed certificate server
