Nodes/ComfyUI-connect-ui/SaveImageByWebsocket
ComfyUI Node

SaveImageByWebsocket

Save Image, but straight to your own web page

By xingBaGan·Created about a year ago·Updated about a year ago· 2
SaveImageByWebsocket
  • images

    SaveImageByWebsocket is the built-in Save Image node's extroverted cousin. Save Image writes your PNG into ComfyUI/output and shows it in ComfyUI's own image browser. This node skips the disk entirely: it base64-encodes each image and pushes it over websocket to whatever frontend is listening. If you're building your own web app around ComfyUI - a custom gallery page, a "generate" button on your own site - this is how the finished image gets from the graph to your <img> tag without anyone fishing through the output folder.

    It ships in xingBaGan/ComfyUI-connect-ui, a tiny pack (a couple of stars, one active month of commits) that exists to bridge ComfyUI and the author's companion project, comfy-workflow-ui - a TypeScript library for embedding converted workflows in your own pages. Together they give you a "ComfyUI backend, my frontend" setup. This node is the output side of that bridge; its sibling reciveImageByWebsocket is the input side.

    How it works

    Feed it an IMAGE, and its save_images() function loops over every image in the batch. Each one gets converted from tensor to PIL, encoded as a PNG in memory, base64'd, and wrapped in a data:image/png;base64,... URI. The message is then fired through PromptServer.instance.send_sync("send_image_from_websocket", ...) - the same event channel ComfyUI itself uses to talk to the browser. Your client app subscribes to that event, unpacks the data URI, and renders it. One message per image, so a batch of four becomes four updates.

    Two grounded details worth knowing. The name oversells the transport: despite the "WebSocket" in the title, it doesn't use the pack's own custom socket at all - it rides the standard ComfyUI websocket event bus. And the author's own code comments warn that no metadata gets embedded in the images this node emits, so don't expect the usual PNG sidecar with your workflow settings. If you want that, use real Save Image.

    Inputs and outputs

    The node is dead simple, straight from its info_schema:

    • images (required, IMAGE) - the tensor batch to send. Wire the output of your VAEDecode here.

    There are no outputs, and it's marked as an output node, so it sits at the end of the line like Save Image or Preview Image.

    Install

    ComfyUI Manager is the easy path: Custom Nodes Manager → search ComfyUI-connect-ui → Install → restart ComfyUI. Manual install is equally painless:

    cd ComfyUI/custom_nodes
    git clone https://github.com/xingBaGan/ComfyUI-connect-ui
    # restart ComfyUI
    

    No model files to download. Its requirements.txt (aiohttp, Pillow, numpy) is already satisfied by any stock ComfyUI, so the "install dependencies" step typically does nothing. This is one of the lighter packs you'll ever add.

    Common issues

    • "Where's my image?" The classic trap. Nothing appears in ComfyUI's own image browser, because nothing was written to /output. The images went over the websocket to a client that has to be listening. Run this node with no frontend connected and the images just evaporate.
    • "My frontend isn't getting it." Make sure your app subscribes to the send_image_from_websocket event on ComfyUI's websocket, not to the pack's /ws_live socket - that custom route is for the receive side, not this one.
    • No metadata. If you're archiving generations and relying on embedded workflow info, this node won't carry it.
    • Unauthenticated, by default. Like the rest of ComfyUI's API, the websocket it sends over isn't authenticated. On localhost or a VPN, no problem; don't expose it raw to the internet (the custom-node ecosystem has more than enough horror stories about unauthenticated ComfyUI instances).

    Honestly, you'll only reach for this node if you're already building a custom frontend - in which case it's a nice 20-line replacement for reimplementing image transfer yourself. Everyone else should keep using Save Image and move on with their lives.

    Categoryapi/image

    Inputs (1)

    NameTypeDefaultDescription
    imagesIMAGE

    Outputs (0)

    No outputs