How to make a mysql realtime database with flutter?

user_13781573 0
Viewed 2764

I am working on this chat app and I obviously don't have any idea how to do this but I have donr the basics such as I made the connection between my app and the mysql db and fetch the data but I think that I will need to make the db a real-time db which again I have no idea how to do so any help with that part ? also new to flutter :)

flutter real-time mysql
2 Answers

https://flutter.dev/docs/cookbook/networking/web-sockets use this tutorial. Also look into the concept of sockets. Keep in mind when you making a chat application you should also take into account privacy and security.

  1. Connect to a WebSocket server.

    The web_socket_channel package provides the tools you need to connect to a WebSocket server. The package provides a WebSocketChannel that allows you to both listen for messages from the server and push messages to the server.

    In Flutter, use the following line to create a WebSocketChannel that connects to a server:

    final channel = WebSocketChannel.connect(
  Uri.parse('wss://echo.websocket.org'),
);

  2. Listen for messages from the server.

    Now that you've established a connection, listen to messages from the server. After sending a message to the test server, it sends the same message back. In this example, use a StreamBuilder widget to listen for new messages, and a Text widget to display them.

    StreamBuilder(
  stream: channel.stream,
  builder: (context, snapshot) {
    return Text(snapshot.hasData ? '${snapshot.data}' : '');
  },    
)

  3. Send data to the server.

    To send data to the server, add() messages to the sink provided by the WebSocketChannel.

    channel.sink.add('Hello!');

  4. Close the WebSocket connection.

    After you're done using the WebSocket, close the connection:

    channel.sink.close();
user_68569460

Check out Askless, it simplifies the creation of real-time Flutter Apps using any database

I developed this package with the goal of simplifying the websocket usage. The library will automatically send again the data to the server if the client loses a connection, also it has other benefits. The Askless server side needs to be coded in JavaScript/TypeScript.

The Flutter Client will be able to listen to real-time updates using MySQL or other databases, like:

//other widgets...

AsklessClient.instance
    .listenAndBuild(
      route: 'allProducts',
      builder: (context,  snapshot) {
          if(!snapshot.hasData)
             return Container();

          final listOfProductsNames =
              (snapshot.data as List)
              .map((product) => Text(product['name'])).toList();

          return Column(
             children: listOfProductsNames,
          );
      }
    ),

//other widgets...

It also has a JavaScript/TypeScript client support that can be paired with Flutter if, for example, there is a web version of your App using React or other SPA framework.

user_45087580
Related