1

So I am creating an application using Flutter, nodeJs and mongoDB. So what I want to do in it is that when I post json data from nodejs backend to mongoDB, after being posted it should show up on my flutter app page. How can I do that (I have tried using websocket for my Flutter app, such that it constantly and actively listen to POST request(from nodejs to mongodb) from backend and try to take data from that request to display it. But websocket isn't working properly I guess, because the data isn't showing up on flutter app page.) enter image description here

Here is the function (nodeJs) for posting the data to mongoDB database, (actions.js)

//Event is here a college event like webinar or something.
var Event = require('../models/user') //has the schema

var functions={
    //for adding the new event
    addNewEvent: function(req, res){
        //if fields not filled
        if((!req.body.Title ) || (!req.body.EventInfo)|| (!req.body.Date)|| (!req.body.RegDeadline)|| (!req.body.Timings)){
            res.json({success:false, msg: 'Enter all fields'})
            console.log("\n"+req.body.Title+"\n"+req.body.EventInfo+"\n"+req.body.Date+"\n"+req.body.RegDeadline+"\n"+req.body.Timings);
        }
        else{
            var newEvent=  Event({
                Title: req.body.Title,
                EventInfo: req.body.EventInfo,
                Date: req.body.Date,
                RegDeadline: req.body.RegDeadline,
                Timings: req.body.Timings,
            });

            newEvent.save(function(err, newEvent){
                if(err){
                    res.json({success:false, msg: 'Failed to save event'})
                }
                else{
                    res.json({success:true, msg: 'Successfully saved new event'})
                    
                }
            })
        }
        
 
module.exports=functions

I run this on localhost (port:8080). Here is the file containing routes:

const express = require('express')
const actions = require('../methods/actions')
const router = express.Router()

//we send a message to our server (makes a GET request)
router.get('/',(req, res)=>{
    res.send('Your server is running...')
})

//routing to another page section on our port
router.get('/dashboard',(req, res)=>{
    res.send('Dashboard')
})

]

router.post('/addevent',actions.addNewEvent)

router.get('/addevent',actions.addNewEvent)

module.exports = router

Here is the dart file that uses websocket and tries to listen if any recent post request has been made, if it has been made take json data from it and display it.

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(
          channel: WebSocketChannel.connect(
              Uri.parse("ws://localhost:8080/addevent"))
          //channel: IOWebSocketChannel.connect("ws://localhost:8080/addevent"),
          ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final WebSocketChannel channel;
  MyHomePage({required this.channel});

  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  //TextEditingController editingController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Web Socket"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            StreamBuilder(
              stream: widget.channel.stream,
              builder: (context, snapshot) {
                return Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
                );
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    widget.channel.sink.close();
    super.dispose();
  }
}

Am I doing something wrong, due to which the data isn't showing up? Photo of flutter page: enter image description here

Manny
  • 21
  • 5

0 Answers0