FlowiseAI
Ask or search…
K

Streaming

Flowise supports streaming back to your front end application when the final node is a Chain or OpenAI Function Agent.
  1. 1.
    Install socket.io-client to your front-end application
yarn add socket.io-client
or using npm
npm install socket.io-client
Refer official docs for more installation options.
  1. 2.
    Import it
import socketIOClient from 'socket.io-client'
  1. 3.
    Establish connection
const socket = socketIOClient("http://localhost:3000") //flowise url
  1. 4.
    Listen to connection
import { useState } from 'react'
const [socketIOClientId, setSocketIOClientId] = useState('');
socket.on('connect', () => {
setSocketIOClientId(socket.id)
});
  1. 4.
    Send query with socketIOClientId
async function query(data) {
const response = await fetch(
"http://localhost:3000/api/v1/prediction/<chatflow-id>",
{
method: "POST",
body: data
}
);
const result = await response.json();
return result;
}
query({
"question": "Hey, how are you?",
"socketIOClientId": socketIOClientId
}).then((response) => {
console.log(response);
});
  1. 5.
    Listen to token stream
socket.on('start', () => {
console.log('start');
});
socket.on('token', (token) => {
console.log('token:', token);
});
socket.on('sourceDocuments', (sourceDocuments) => {
console.log('sourceDocuments:', sourceDocuments);
});
socket.on('end', () => {
console.log('end');
});
  1. 6.
    Disconnect connection
socket.disconnect();
Last modified 2mo ago