Entonces, comencemos creando un nuevo proyecto flutter. Este es el comando que creará un nuevo proyecto de Flutter y lo ejecutará.

flutter create example && cd example && flutter run

Si todo funciona bien, abramos nuestro archivo pubspec.yaml y agreguemos web_socket_channel: ^2.1.0.

dependencies:
  flutter:
    sdk: flutter
    web_socket_channel: ^2.1.0 # Add this line to it.

Ahora que esto se ha completado, abramos main.dart en su carpeta lib. Como puede ver, Flutter ya ha preparado un ejemplo para una aplicación básica de Flutter.

Entonces, eliminemos todo lo que no nos sea útil en este momento. Además, dado que esta es una aplicación utilizada para una aplicación de back-end, no nos centraremos en la interfaz de usuario.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(),
    );
  }
}

TextField & TextButton

¡Estupendo! Ahora tienes una aplicación realmente aburrida que no hace nada. Cambiemos eso un poco haciendo que haga algo. Así que crearemos en la clase _MyHomePageState un widget TextField y TextButton.

También podemos crear un vacío para que si pulsas el botón se imprima el mensaje. Puedes seguir este ejemplo aquí mismo.

class _MyHomePageState extends State<MyHomePage> {
  String? _message;

  // This function will send the message to our backend.
  void sendMessage(msg) {
    // Print the message in the terminal temporarily
    print(msg);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: TextField(
                  onChanged: (e) => _message = e,
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: TextButton(
                  child: const Text("Send"),
                  onPressed: () {
                    // Check if the message isn't empty.
                    if (_message!.isNotEmpty) {
                      sendMessage(_message);
                    }
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Así es como se verá nuestra aplicación. Ahora hagamos posible que enviemos ese mensaje a nuestro backend. Además, debe importar web_socket_channel para asegurarse de que podamos usar ese paquete.

import ‘package:web_socket_channel/io.dart’;

// This function will send the message to our backend.
void sendMessage(msg) {
  IOWebSocketChannel? channel;
  // We use a try - catch statement, because the connection might fail.
  try {
    // Connect to our backend.
    channel = IOWebSocketChannel.connect('ws://localhost:3000');
  } catch (e) {
    // If there is any error that might be because you need to use another connection.
    print("Error on connecting to websocket: " + e.toString());
  }
  // Send message to backend
  channel?.sink.add(msg);

  // Listen for any message from backend
  channel?.stream.listen((event) {
    // Just making sure it is not empty
    if (event!.isNotEmpty) {
      print(event);
      // Now only close the connection and we are done here!
      channel!.sink.close();
    }
  });
}

¡La parte divertida es que es tan fácil y genial al mismo tiempo! Así que ahora nuestra aplicación Flutter se ha completado. Ahora podemos continuar con el backend de Node.js. Vamos a crear un nuevo proyecto ejecutando este comando.

mkdir server && cd server && touch index.js && npm init

Esto creará un nuevo proyecto de Node.js para nosotros. Ahora tendremos que importar a nuevos paquetes, usaremos express y ws.

npm install ws && npm install express

Su archivo package.json debería ser así:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3",
    "ws": "^8.5.0"
  }
}

Abramos index.js para realizar cambios en ese archivo. Vamos a crear una función express estándar. Algo como esto:

const express = require('express');
const { Server } = require('ws');

const PORT = process.env.PORT || 3000; //port for https

const server = express()
    .use((req, res) => res.send("Hi there"))
    .listen(PORT, () => console.log(`Listening on ${PORT}`));

const wss = new Server({ server });

Pero no estamos manejando ningún dato de back-end proveniente de nuestra aplicación en este momento. Así que podemos hacerlo ahora mismo creando otra función como esta:

const express = require('express');
const { Server } = require('ws');

const PORT = process.env.PORT || 3000; //port for https

const server = express()
    .use((req, res) => res.send("Hi there"))
    .listen(PORT, () => console.log(`Listening on ${PORT}`));

const wss = new Server({ server });

wss.on('connection', function(ws, req) {
    ws.on('message', message => {
        var dataString = message.toString();
        console.log(dataString)
    })
})

Intente enviar un mensaje desde la aplicación al servidor para ver si funciona. Si no te funciona, es posible que hayas hecho algo mal. Ahora enviemos datos a la aplicación si el usuario dice: “Hola”, por ejemplo.

ws.on('message', message => {
    var dataString = message.toString();
    if (dataString == "Hello") {
        console.log(dataString)
        ws.send("Hi from Node.js");
    } else{
        console.log(dataString)
        ws.send("Are you not saying hi to me 🥺👉👈");
    }
})

¡Y eso es! Ha creado correctamente una aplicación básica con un backend básico. Ahora ha aprendido cómo enviará datos de un lado a otro.

Hay muchas más posibilidades que puedes hacer con esto, recuerda que la única limitación es tu imaginación. Y si tiene alguna pregunta, no dude en preguntar. Además, haré un tutorial sobre cómo hacer una aplicación de chat. ¡Manténganse al tanto!