PricingBlog

Install socket.io-client on toddle

  • yoelfdz-1219585064539525140

    yoelfdz

    1 year ago

    Hey there everyone!

    I have created a chatbot UI, have been trying to connect it to Flowise API with streaming but no success with that so far. Here is their documentation on this: https://docs.flowiseai.com/using-flowise/streaming

    The first step is to Install socket.io-client to your front-end application, how can we do that in Toddle?

    Apart from that, here's what I've done:
    const io = require("socket.io-client");
    const fetch = require("node-fetch");

    async function flowiseStreaming(args, ctx) {
    const flowiseUrl = "http://localhost:3000"; // Reemplaza con tu URL de Flowise
    const chatflowId = "<chatflow-id>"; // Reemplaza con el ID de tu chatflow

    const socket = io(flowiseUrl);

    socket.on("connect", () => {
    const socketIOClientId = socket.id;

    async function sendQuery(data) {
    const response = await fetch(
    `${flowiseUrl}/api/v1/prediction/${chatflowId}`,
    {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    },
    body: JSON.stringify({
    question: args.question,
    socketIOClientId,
    }),
    }
    );

    const result = await response.json();
    return result;
    }

    sendQuery().then((response) => {
    console.log(response);
    });
    });

    socket.on("start", () => {
    ctx.triggerActionEvent("start");
    });

    socket.on("token", (token) => {
    ctx.triggerActionEvent("token", token);
    });

    socket.on("sourceDocuments", (sourceDocuments) => {
    ctx.triggerActionEvent("sourceDocuments", sourceDocuments);
    });

    socket.on("end", () => {
    ctx.triggerActionEvent("end");
    socket.disconnect();
    });
    }

    module.exports = flowiseStreaming;


    I am not a coder, trying my best to make this work but at this point I do not understand what's wrong here and don't know how to debug it. Any help would be very helpful 🙏🏻
    1
  • jacobkofoed-1219587544539463780

    Jacob Kofoed

    1 year ago

    There are some additional installation options here https://socket.io/docs/v4/client-api/

    If you're using a custom action, then you could do something like

    async function flowiseStreaming(args, ctx) {
    const { io } = await import("https://cdn.socket.io/4.7.5/socket.io.esm.min.js");

    ...rest of your code goes here...
    }
    ❤️1
  • yoelfdz-1219589204254920827

    yoelfdz

    1 year ago

    Oh, ok. Will try like that, thank you Jacob
  • yoelfdz-1219594517456486522

    yoelfdz

    1 year ago

    Getting this error on the console:
    Error in Custom Action ReferenceError: module is not defined
    at Object.handler (custom-code.js?v=cd95520&entry=Components:73:1)
    at T (runtime.ts:370:30)
    at runtime.ts:1437:11
    at Array.forEach (<anonymous>)
    at Object.onEvent [as triggerEvent] (runtime.ts:1436:30)
    at T (runtime.ts:203:13)
    at runtime.ts:1555:9
    at Array.forEach (<anonymous>)
    at HTMLButtonElement.y (runtime.ts:1532:21)
  • jacobkofoed-1219594783299997806

    Jacob Kofoed

    1 year ago

    How does custom action look?
  • The code
  • yoelfdz-1219600355151843359

    yoelfdz

    1 year ago

    Managed to do it! It's working now.

    You were right with the import, that error was referencing another part of the code 😅
    💪1
    🔥1
  • jacobkofoed-1219600991658184744

    Jacob Kofoed

    1 year ago

    Super cool. Looking forward to see what you are going to create with this 💪
    ❤️1
  • yoelfdz-1219601338292371520

    yoelfdz

    1 year ago

    You will 🙂

    Thanks for the help Jacob 🤝
    🚀1
  • Tod-1219601340020559948

    Tod

    1 year ago

    Great energy @! Your continuous contribution to the toddle Community just made you advance to Community Level 9!