i am trying to create an chat system with the backend of laravel but the problem is how can i listen to the incoming messange and send message without showing loading spinner to the page
this is how i tried to fetch message from api and store in my model
static Future<Message?> getMessage(BuildContext context) async {
String? token;
SharedPreferences prefs = await SharedPreferences.getInstance();
final userData = prefs.getString("userData");
if (userData != null) {
token = jsonDecode(userData)['token'];
}
try {
final apiUrl = ApiRoute().getChat();
final response = await http.get(Uri.parse(apiUrl!), headers: {
"Content-Type": "application/json",
"Authorization": "Bearer $token"
});
if (response.statusCode == 200) {
print("This is response ${response.body}");
return messageFromJson(response.body);
} else if (response.statusCode == 403) {
AlertBox().AlertBox403(context);
} else if (response.statusCode == 400) {
AlertBox().AlertBox400(context);
} else if (response.statusCode == 401) {
AlertBox().AlertBox401(context);
} else if (response.statusCode == 500) {
AlertBox().servererror(context);
} else if (response.statusCode == 503) {
AlertBox().servererror(context);
} else {
AlertBox().universalAlertBox(context);
}
} catch (e) {
rethrow;
}
}
this is the function to send message to server
static Future<String?> sendMessage(
String? message, List<File> galleryImages, BuildContext context) async {
int? userId;
String? token;
SharedPreferences prefs = await SharedPreferences.getInstance();
final userData = prefs.getString("userData");
if (userData != null) {
userId = jsonDecode(userData)['user_id'];
token = jsonDecode(userData)['token'];
}
try {
final apiUrl = ApiRoute().chat(userId, message);
http.MultipartRequest request =
http.MultipartRequest("POST", Uri.parse(apiUrl!));
Map<String, String> jsonData = {
"Content-Type": "multipart/form-data",
"Authorization": "Bearer $token"
};
for (int i = 0; i < galleryImages.length; i++) {
FileImage(File(galleryImages[i].path.toString()))
.file
.readAsBytesSync();
request.files.add(await http.MultipartFile.fromPath(
'files[]', galleryImages[i].path,
contentType: MediaType("image", "jpeg")));
}
request.headers.addAll(jsonData);
request.fields['message'] = message!;
request.fields['user_id'] = userId.toString();
http.StreamedResponse response = await request.send();
response.stream.transform(utf8.decoder).listen((event) {});
if (response.statusCode == 200) {
print("Success");
} else if (response.statusCode == 403) {
AlertBox().AlertBox403(context);
} else if (response.statusCode == 400) {
AlertBox().AlertBox400(context);
} else if (response.statusCode == 401) {
AlertBox().AlertBox401(context);
} else if (response.statusCode == 500) {
AlertBox().servererror(context);
} else if (response.statusCode == 503) {
AlertBox().servererror(context);
} else {
AlertBox().universalAlertBox(context);
}
} catch (e) {
rethrow;
}
}
this is my controller for both send and reveive message
class MessageController extends GetxController {
var isLoading = true.obs;
Message? messageData;
Future<String?> sendMessage(
String? message, List<File> galleryImages, BuildContext context) async {
try {
isLoading(true);
return await Services.sendMessage(message, galleryImages, context);
} finally {
isLoading(false);
}
}
Future<Message?> getMessageData(BuildContext context) async {
try {
isLoading(true);
messageData = await Services.getMessage(context);
return messageData;
} finally {
isLoading(false);
}
}
}
this is my screen
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
// _timerForInter = Timer.periodic(Duration(seconds: 2), (result) {
fetchApiData();
// });
getUserId();
});
}
List<String?> messages = [];
MessageController mC = Get.put(MessageController());
fetchApiData() async {
try {
final result = await InternetAddress.lookup("example.com");
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
print("connected");
await mC.getMessageData(context).whenComplete(() {
setState(() {
messages.clear();
mC.messageData!.message;
for (int i = 0; i < mC.messageData!.message!.length; i++) {
messages.add(mC.messageData!.message![i].message);
}
});
});
}
} on SocketException catch (_) {
print("Not connected");
showSnackBar();
}
}
Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Obx(() {
if (mC.isLoading.value) {
return Expanded(child: LinearProgressIndicator());
} else {
return Expanded(
child: SingleChildScrollView(
reverse: true,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: messages.length,
itemBuilder: (ctx, i) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 15.0, left: 15),
child: Row(
children: [
// mC.messageData!.message![i].admin != null &&
// mC.messageData!.message![i].to == 0 &&
mC.messageData!.message![i].isRead == 0
? Container(
alignment: Alignment.topLeft,
child: Column(
children: [
Container(
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context)
.size
.width *
0.60),
decoration: BoxDecoration(
color: Colors.grey.shade400,
borderRadius:
const BorderRadius.all(
Radius.circular(5))),
child: Padding(
padding: EdgeInsets.only(
top: 8.0,
left: 8,
right: 8,
bottom: 5),
child: Text(
'${messages[i]}',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Text(
"${mC.messageData!.message![i].createdAt.toString().split(" ")[0]} "),
Padding(
padding: EdgeInsets.symmetric(
vertical:
size.width * 0.015),
child: Text(
" - ${mC.messageData!.message![i].createdAt.toString().split(" ")[1].split(".")[0]}"),
)
],
)
],
),
)
: Container(),
const SizedBox(
width: 10,
),
],
),
),
const SizedBox(
height: 10,
),
mC.messageData!.message![i].from == userId
? Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context)
.size
.width *
0.60),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: const BorderRadius.all(
Radius.circular(5))),
child: Padding(
padding: EdgeInsets.only(
top: 8.0,
left: 8,
right: 8,
bottom: 5),
child: Text(
'${messages[i]}',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"${mC.messageData!.message![i].createdAt.toString().split(" ")[0]} "),
Padding(
padding: EdgeInsets.symmetric(
vertical: size.width * 0.015),
child: Text(
" - ${mC.messageData!.message![i].createdAt.toString().split(" ")[1].split(".")[0]}"),
)
],
)
],
)
: Container()
],
);
}),
),
);
}
}),
BottomAppBar(
child: Padding(
padding: const EdgeInsets.only(right: 10.0, left: 5),
child: Container(
alignment: Alignment.bottomCenter,
decoration: const BoxDecoration(
color: Colors.white,
),
height: 45,
child: TextFormField(
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.all(8),
child: GestureDetector(
onTap: () {
openBottomSheet(context);
},
child: Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color(0xff8F3F97),
),
child: const Icon(
Icons.add,
color: Colors.white,
)),
),
),
suffixIcon: const Icon(
Icons.emoji_emotions,
color: Colors.grey,
size: 28,
),
contentPadding: const EdgeInsets.only(top: 5, left: 55),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(25.0),
),
hintText: 'Type a message',
hintStyle:
const TextStyle(fontSize: 16, color: Colors.black45)),
textCapitalization: TextCapitalization.sentences,
controller: messageController,
onFieldSubmitted: (value) async {
try {
final result = await InternetAddress.lookup("example.com");
if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
setState(() {
mC.sendMessage(
messageController.text, imageFileList, context);
fetchApiData();
messageController.text = "";
});
}
} on SocketException catch (_) {
showSnackBar();
}
},
),
),
),
),
]),
is there a way to continously listen to server and send message to server without showing loading spinner. I am trying to build chat app like messanger but i am stuck here and dont know what i can do to achieve that need some help thanks