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 :)
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.
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'), );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
StreamBuilderwidget 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}' : ''); }, )Send data to the server.
To send data to the server,
add()messages to the sink provided by the WebSocketChannel.channel.sink.add('Hello!');Close the WebSocket connection.
After you're done using the WebSocket, close the connection:
channel.sink.close();
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.