how to send parametrs in signal r with several requests?

user_16357470 0
Viewed 24

I have several separate requests to my websockets and I wanted to get data from all of these using parametrs. AnimalID in getImageAnimal - parametrs for getting image of fixed animals. here is requests I am trying to make

 final hubConnection1 = HubConnectionBuilder()
        .withUrl(
          'http://10.10:8000/animalHub',
          options: httpConnectionOptions,
        )
        .build();
    await hubConnection1.start();
    List fixationAnimals = [];
   if (hubConnection1.state == HubConnectionState.Connected) {
  await hubConnection1
      .invoke('GetAnimalFixations')
      .then((value) => fixation = value as List)
      .then((value1) => hubConnection1.invoke('GetImageAnimal',
          args: [imageId ?? '']).then((value2) => imageId == value2));
}

hubConnection1.onclose(({error}) {
  logger?.finer(error);
});
print(imageId);
print(fixation);
return fixation;

in GetAnimalFixations I have such field:

[
  {
    "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
    "animalId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
    "name": "string",
    "fixedTimeAnimal": "2022-08-23T07:25:29.898Z",
    "imageId": "3fa85f64-5717-4562-b3fc-2c963f66afa6"
  }
]
signalr dart
1 Answers

I found out how to do it. Everything i post here is just for testing pupose, just to make sure it is really works. Please do not write like below (as I know it is a bad decision to manipulate FutureBuilder as I did below, but it is ONLY for testing purpose)

I have several requests and one of them are depended on the other one.

  1. GetAnimalFixations (the main request)-> GetImageAnimal (depended one, where I should put arguments imageId from the first request)

STEP 1

Create two separate requests with methods above like that:

 Future<List> fetchAnimalFixation() async {
    final hubConnection1 = HubConnectionBuilder()
            .withUrl(
              'http://10.10:8000/animalHub',
              options: httpConnectionOptions,
            )
            .build();
        await hubConnection1.start();
        List fixationAnimals = [];
       if (hubConnection1.state == HubConnectionState.Connected) {
      await hubConnection1
          .invoke('GetAnimalFixations')
          .then((value) => fixation = value as List);
    }
    
    hubConnection1.onclose(({error}) {
      logger?.finer(error);
    });
    print(fixation);
    return fixation;
}

Second request:

Future<String> fetchAnimalImage(String imageId) async {
        final hubConnection1 = HubConnectionBuilder()
                .withUrl(
                  'http://10.10:8000/animalHub',
                  options: httpConnectionOptions,
                )
                .build();
            await hubConnection1.start();
            String image = [];
           if (hubConnection1.state == HubConnectionState.Connected) {
          await hubConnection1
              .invoke('GetImageAnimal', args[imageId])
              .then((value) => image= value as String);
        }
        
        hubConnection1.onclose(({error}) {
          logger?.finer(error);
        });
        print(image);
        return image;
    }

STEP 2

First preparation is over, now we a go into the second steps to achive our goal: You need to create the screen where all data will be displayed. For my testing purpose (again: ONLY for testing and small piece of data) I use future builder:

 body: FutureBuilder<List>(
        future: AllFixation().fetchAnimalFixation(),
        builder: (context, snapshot) {
          return ListView.builder(
              itemCount: 2,
              itemBuilder: (context, index) {
                return Card(
                  child: Column(
                    children: [
                      Text(snapshot.data?[index]['name'].toString() ?? ''),
                      FutureBuilder<String?>(
                          future: AllFixation().fetchAnimalImage(
                              snapshot.data?[index]['imageId'].toString() ??
                                  ''),
                          builder: (context, snapshotImage) {
                            Uint8List bytes =
                                base64.decode(snapshotImage.data ?? '');
                            return Image.memory(bytes);
                          
                          }),

Voila! All is ready. You can use and enjoy the picture and the name of the animal. All this via websocket and using signalR package. I higly recommend to use some state management and think that you are going to do next, because it is the solid piece of code and if someday it will need to change, it turn out to be the biggest pain.

user_163574700
Related