Flutter WebSockets connect to Socket.io Server

Question

I have built a socket.io server using Node.js and Express. All works fine from browser and normal socket.io client but when I try to use WebSocket in Flutter I get the error

HttpException: Connection closed before full header was received, uri = http://csw.abbadabba.tech:3001

I am just trying to get it to work with a basic connect like this:

var _url = 'ws://csw.abbadabba.tech:3001';
WebSocket chatsocket = await WebSocket.connect(_url);
chatsocket.add('connect');

Looking for anyone who has done this already and has some samples to look at, trying to have a chat server that my app is always connected to, so if there is a better server architecture to use I am open to that as well. Any help would be great.

Thanks in advance.

Solution 1

The problem is that you are trying to use Flutter's WebSocket implementation to connect to a socket.io server. Although socket.io does use WebSockets, it is NOT a pure web socket implementation and isn't recognized by default WebSocket client as valid. You'll need to use a specific socket.io flutter package.

From the socket.io documentation: https://socket.io/docs/#What-Socket-IO-is-not

What socket.io is not

Socket.IO is NOT a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server either.

Solution 2

adhara_socket_io

dependencies:
adhara_socket_io: ^0.1.11

This is good implementation of socket.io for flutter ->

Solution 3

I also recently tried to connect a Flutter App to a socket.io service.

Unfortunately you can not simply use WebSocket without implementing the socket.io protocol. Because i do not want to implement this by myself i tried to find a socket.io library for Dart. There is a library (https://github.com/rikulo/socket.io-dart) but it is not working in flutter because it uses dart html. Until now, i have not found a good solution to this problem.

Regards

Solution 4

Regular Dart packages not suitable for the Flutter, so I created a package, but currently, it only works on the Android devices. Check it out: https://github.com/AlexeySemigradsky/socket_io

Example of usage:

const uri = 'http://192.168.1.38:8080';
final socket = await SocketIO.createNewInstance(uri);
await socket.on(SocketIOEvent.connecting, () async {
  print('Connecting...');
});
await socket.on(SocketIOEvent.connect, () async {
  print('Connected.');

  final id = await socket.id;
  print('Client SocketID: $id');
});
await socket.on(SocketIOEvent.connectError, (error) {
  print('Error: $error');
});
await socket.on('sayHello', (greeting) {
  print('Hello, ${greeting['Hello']}');
});
await socket.connect();
await socket.emit('sayHello', [
  {'Hello': 'world!'},
]);

Solution 5

There is no official Socket.IO release for Flutter however, the implementation is still possible by one of the best Dart libraries called adhara_socket_io which is developed according to the Socket.IO Java client and Swift. It supports Android and iOS.

Implementation

SocketIOManager manager = SocketIOManager();

SocketIO socket = manager.createInstance(SocketOptions(
    'http://192.168.1.12:5555',
    nameSpace: '/yournamespace',
    enableLogging: true,
    transports: [Transports.POLLING]
));

socket.onConnect((data) {
  print("onConnected");
  print(data);
});

socket.on("news", (data) {
  print("onNews");
  print(data);
});

socket.connect();

Emit

socket.emit("some_event", ["Hello world!"]);

Documentation: GitHub | Dart

Before implement, the library, refer to the latest version always. Releases

View more solutions

Comments

[Mariano Argañaraz]

I dont see how can this code work in Flutter+Socket.io

[Robert]

Is there a specific question? I did not use socket.io

[Artjom B.]

While this library may help answer the question, you should at least explain why it does so in more detail.

[willy wijaya]

you can try this