Connect flutter client

[fredchess]

Hello,
Have a question. I have a laravel api and flutter app.
So can I use socket.io client on my flutter app? If no, how can I connect flutter to my soketi server?

Thanks.

[afridishaikh07]

Yes, you can use a Socket.IO client in your Flutter app to connect to a Socket.IO server. Use https://pub.dev/packages/socket_io_client

[fsdevchivalry]

Hello fredchess,
hope this code will help you.

 // Initialize the socket connection
  void initSocket({required String username, required String token}) async {
    _client = io.io('wss://xx.xxx.com:449', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    }); // Connect to the server
    await emitConnect(username, token);
  }

 // Async funtion
 Future<void> emitConnect(String username, String accessToken) async {
  try {
    if (_client != null) {
      _logger.debug('attempting to connect to socket');
      _client?.onConnect((args) {
        try {
          _logger.info("Socket Connected");
          _logger.debug("Socket.Id: ${_client?.id}");
          // Add all on functions here
          //seperate into functions
          _client!.on('join', (data) {
            _logger.info('Joined: $data');
            isJoined = true;
          });

         
          _client?.onDisconnect((error) {
            _logger.info('Disconnected from socket $error');
          });

          emitJoin(username, accessToken);
        } catch (ex) {
          // displayReportResultTrack(ex);
        }
      });
      _client?.onConnectError(
          (data) => {_logger.error('Failed to connect https')});
      _client?.connect();
    }
  } catch (ex) {
  }
}

[merlinstwart0922]

That's so useful.

[fsdevchivalry]

Maybe you can visit the https://pub.dev/packages/socket_io_client.
There are all documentation about the socket.io connection with flutter.

[jonasermert]

dependencies:
  socket_io_client: ^2.0.0

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as io;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  io.Socket socket;

  @override
  void initState() {
    super.initState();
    // Connect to your socket.io server
    socket = io.io('http://your_socket_server_url');
    socket.on('connect', (_) {
      print('Connected to server');
    });
    socket.on('message', (data) {
      print('Received message: $data');
    });
    socket.connect();
  }

  @override
  void dispose() {
    // Disconnect from the socket when the widget is disposed
    socket.disconnect();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket.io Flutter App'),
      ),
      body: Center(
        child: Text('Socket.io connection established!'),
      ),
    );
  }
}