title: How to use WebSockets and Socket.IO with flutter?
body: <p>I have been trying to integrate my flutter app with a node js server using sockets and I am using WebSockets for the flutter part and Socket.io for the nodejs part and making a server to connect it to the flutter client.</p>
  <pre><code>const express= require('express');
  const app= express();
  const http=require('http');
  const socketio= require('socket.io');
  const server= http.createServer(app);
  const io=socketio(server);
  app.get('/',(req,res)=&gt;{
      res.send('hey people')
  })
  const PORT= process.env.PORT||3000;
  io.on('connection', (socket) =&gt; {
      console.log('a user connected');
    });
  server.listen(PORT,()=&gt; console.log('app started'));
  </code></pre>
  <p>I created a server on 3000 port here and now I want to communicate with this server using flutter client side.</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://localhost:3000'),
        ),
      );
    }
  }
  
  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; {
    TextEditingController _controller = TextEditingController();
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              Form(
                child: TextFormField(
                  controller: _controller,
                  decoration: InputDecoration(labelText: 'Send a message'),
                ),
              ),
              StreamBuilder(
                stream: widget.channel.stream,
                builder: (context, snapshot) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
                  );
                },
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _sendMessage,
          tooltip: 'Send message',
          child: Icon(Icons.send),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      );
    }
  
    void _sendMessage() {
      if (_controller.text.isNotEmpty) {
        widget.channel.sink.add(_controller.text);
      }
    }
  
    @override
    void dispose() {
      widget.channel.sink.close();
      super.dispose();
    }
  }
  </code></pre>
  <p>After these when I am trying to send a message and get it back, I am not able to do it. I really think this should work. If not What should? Really need some help here.
  Thanks!</p>