title: Websockets in Flutter
body: <p>I'm trying to listen to my Laravel BackEnnd using flutter websockets. There is no documentation about the backend of such a situation and i'm not sure how to go about it. The laravel app seems to work fine when i listen on browser but not on my flutter app.
  <a href="https://flutter.dev/docs/cookbook/networking/web-sockets" rel="nofollow noreferrer">https://flutter.dev/docs/cookbook/networking/web-sockets</a> This documentation is just copied by every article on the internet and every youtuber but no realtime implementation</p>
  <p><strong>Current Flutter Code</strong></p>
  <pre><code>import 'package:flutter/foundation.dart';
  import 'package:web_socket_channel/io.dart';
  import 'package:flutter/material.dart';
  import 'package:web_socket_channel/web_socket_channel.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final title = 'WebSocket Demo';
      return MaterialApp(
        title: title,
        home: MyHomePage(
          title: title,
          channel: IOWebSocketChannel.connect('ws://192.168.0.164:8000/Message/Socket/123'),
        ),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    final String title;
    final WebSocketChannel channel;
  
    MyHomePage({Key key, @required this.title, @required this.channel})
        : super(key: key);
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: StreamBuilder(
            stream: widget.channel.stream,
            builder: (context, snapshot) {
  
              print(&quot;XXX : ${snapshot.data}&quot;);
  
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
              );
            },
          ),
        ),
      );
    }
  
    @override
    void dispose() {
      widget.channel.sink.close();
      super.dispose();
    }
  }
  </code></pre>
  <p><strong>Laravel Routes</strong></p>
  <pre><code>Route::get('/Message/Socket/{message}', [WebSocket_Message::class, 'fetchMessages']);
  Route::get('/Message/Socket/Send/{message}', function ($message) {
      broadcast(new MessagePlus_Messages(&quot;$message&quot;));
  });
  </code></pre>
  <p><strong>JS for Web Implementation</strong> (Works)</p>
  <pre><code>    &lt;script src=&quot;{{ asset('js/app.js') }}&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
          Echo.channel('Test').listen('MessagePlus_Messages', (e) =&gt; {
              
              var date = new Date();
              var now = date.getTime();
  
              document.write(JSON.stringify(e, null));
  
              // alert(&quot;Receievd&quot;);
          });
      &lt;/script&gt;
  </code></pre>
  <p>When this works on the browser, why isn't it working on my flutter app? It's not an IP related issue as i can use the websockets in my mobile's browser. There just isn't enough documentation and i'm facing a real hard time. Any help is appreciated</p>