ResponseType.stream returns responce all at once on Web #2268

reza00farjam · 2024-07-04T14:13:51Z

Package

dio

Version

5.5.0+1

Operating-System

Web

Adapter

Default Dio

Output of `flutter doctor -v`

[√] Flutter (Channel stable, 3.22.0, on Microsoft Windows [Version 10.0.22621.3737], locale en-US)
    • Flutter version 3.22.0 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (8 weeks ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\reza\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Users\reza\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.6.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.6.33801.468
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.91.0)
    • VS Code at C:\Users\reza\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.93.20240702

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.3737]   
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 126.0.6478.127
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 126.0.2592.81

[√] Network resources
    • All expected network resources are available.

• No issues found!

Dart Version

3.4.0

Steps to Reproduce

ResponseType.stream does not actually stream, it waits until all chunks are over and then reads it all at once instead of one chunk at a time.

You can reproducing it by running the following simple example:

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dio Streaming Response Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: fetchStreamedData,
            },
            child: Text('Fetch Streamed Data'),
          ),
        ),
      ),
    );
  }
}
 
Future<void> fetchStreamedData() async {
  try {
    var dio = Dio();
    dio.options.headers['Content-Type'] = 'application/json';
    Response<ResponseBody> response = await dio.post<ResponseBody>(
      'https://ai--engine.azurewebsites.net/api/textgen/generator_free'
      data: {
        "prompt": "write an article on russia",
        "llm_model_name": "gpt-35-turbo",
        "stream": true,
        "markdown": false,
      },
      options: Options(
        responseType: ResponseType.stream,
      ),
    );
 
    response.data!.stream.listen(
      (List<int> chunk) {
        // Process the streamed data
        print(String.fromCharCodes(chunk));
      },
      onDone: () => print('Stream finished.'),
      onError: (e) => print(e.toString()),
      cancelOnError: true,
    );
  } catch (e) {
    print(e.toString());
  }
}

Expected Result

By running the following sample Html code that does exactly the same job, you will notice the diffrence:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stream Response with Body Example</title>
</head>
<body>
<h1>Streaming Response with Body Example</h1>
<button id="startStream">Start Streaming</button>
 
    <script>
        document.getElementById('startStream').addEventListener('click', () => {
            const url = 'https://ai--engine.azurewebsites.net/api/textgen/generator_free';
            const data = {
                prompt: "write an article on russia",
                llm_model_name: "gpt-35-turbo",
                stream: true,
                markdown: false
            };
 
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            }).then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
 
                function read() {
                    reader.read().then(({done, value}) => {
                        if (done) {
                            console.log('Stream finished.');
                            return;
                        }
                        console.log(decoder.decode(value, {stream: true})); // Process chunk
                        read(); // Read the next chunk
                    });
                }
 
                read(); // Start reading
            }).catch(err => console.error('Fetch error:', err));
        });
</script>
</body>
</html>

Browser inspector after button press:

2024-07-04_17-36-02.mp4

Actual Result

Browser inspector after button press of the code provided in Steps to Reproduce section:

2024-07-04_17-42-27.mp4

The text was updated successfully, but these errors were encountered:

AlexV525 · 2024-07-04T14:26:17Z

This is because XHR-based requests does not support SSE while fetch supports SSE natively. There is nothing we can do for the current implementation and maybe migrating to package:web would help to solve the issue.

reza00farjam added h: need triage This issue needs to be categorized s: bug Something isn't working labels Jul 4, 2024

AlexV525 closed this as not planned Won't fix, can't repro, duplicate, stale Jul 4, 2024

AlexV525 added i: duplicate This issue or pull request already exists and removed h: need triage This issue needs to be categorized s: bug Something isn't working labels Jul 4, 2024

AlexV525 changed the title ~~ResponseType.stream returns responce all at once~~ ResponseType.stream returns responce all at once on Web Jul 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ResponseType.stream returns responce all at once on Web #2268

ResponseType.stream returns responce all at once on Web #2268

reza00farjam commented Jul 4, 2024

AlexV525 commented Jul 4, 2024

ResponseType.stream returns responce all at once on Web #2268

ResponseType.stream returns responce all at once on Web #2268

Comments

reza00farjam commented Jul 4, 2024

Package

Version

Operating-System

Adapter

Output of flutter doctor -v

Dart Version

Steps to Reproduce

Expected Result

Browser inspector after button press:

Actual Result

Browser inspector after button press of the code provided in Steps to Reproduce section:

AlexV525 commented Jul 4, 2024

Output of `flutter doctor -v`