How to listen to an laravel websockets event from flutter

Question

we are working on a restaurant t management system with multiple roles using laravel as the back-end and flutter for the front end (building desktop, mobile app).

So when the waiter launches an order its goes to the waiter, so we want to implement a realtime push notifications using Laravel WebSockets (without pusher), it's our first time that we work with websockets,

So i followed the doc to setup laravel websockets in my laravel project,

I created an event for testing: MessageSent

    <?php

    namespace App\\Events;

    use Illuminate\\Broadcasting\\Channel;
    use Illuminate\\Notifications\\Channels\\BroadcastChannel;
    use Illuminate\\Queue\\SerializesModels;
    use Illuminate\\Broadcasting\\PrivateChannel;
    use Illuminate\\Broadcasting\\PresenceChannel; 
    use Illuminate\\Foundation\\Events\\Dispatchable;
    use Illuminate\\Broadcasting\\InteractsWithSockets;
    use Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;

    class MessageSent implements ShouldBroadcast{
        use Dispatchable, InteractsWithSockets, SerializesModels;

        public $message;
    
        public function __construct($message){
           $this->message = $message;
        }
    
        public function broadcastOn(){
           return new Channel('chat');
        }
    }

And in web.php i added this route to fire the event: Route::get('/send-event', function () { broadcast(new MessageSent("Hello World")); return "Event has been sent!"; });

and i typed text to test it and its works as you can see in the screenshot.

The problem is that i want just to get that message from my flutter app, to make sure its working,

In flutter i add this code for testing,

   `
    import 'package:flutter/material.dart';
    import 'package:web_socket_channel/io.dart';
    import 'package:web_socket_channel/status.dart' as status;

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

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

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

  class _MyHomePageState extends State<MyHomePage> {
     final channel = IOWebSocketChannel.connect('ws://localhost:6001/app/websocketkey');

     @override
     Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar(
        title: const Text('WebSocket Demo'),
     ),
     body: StreamBuilder(
        stream: channel.stream,
        builder: (context, snapshot) {
        if (snapshot.hasData) {
           final data = snapshot.data;
           print('Received message: $data');
           return Center(
              child: Text(data),
           );
           } else if (snapshot.hasError) {
              print('Error occurred: ${snapshot.error}');
              return Center(
                  child: Text('Error occurred: ${snapshot.error}'),
              );
           } else {
              return const Center(
              child: Text('Waiting for messages...'),
           );
         }
       },
     ),
  );
}

 @override
 void dispose() {
    channel.sink.close(status.goingAway);
    super.dispose();
  }
}
   `

But its only reciev this message: flutter: Received message: {"event":"pusher:connection_established","data":"{"socket_id":"728762177.893521280","activity_timeout":30}"} can someone help to solve this issue, and how to listen to the MessageSent event to get the data

I tried alot of packages, socket io, web socket channet and they didnt works !