reciveImageByWebsocket
An IMAGE input that a web page can hand you
- IMAGE
The reciveImageByWebsocket node answers a question you probably haven't asked yet: what if the image coming into your workflow wasn't a file on disk, but whatever your own web page just uploaded? Load Image reads from ComfyUI/input. This node reads from a websocket. Drop it in a graph, run your custom frontend, and the image that frontend pushes becomes a normal IMAGE tensor that every downstream node treats like any other input. It's img2img, inpainting, or IPAdapter-without-the-file-picker for people building their own ComfyUI web apps.
It's one half of a two-piece setup. The pack's README is blunt: use it with the author's companion project, xingBaGan/comfy-workflow-ui, a TypeScript library for embedding converted workflows into your own pages. connect-ui is the server side of that bridge. On its own, with nobody connecting, this node is a paperweight that outputs None.
How it works
The mechanism is worth understanding because it explains the node's quirks. The pack registers a custom websocket route at http://<your-comfy-address>/ws_live. Your client app connects there and posts a JSON message like {"type": "input_image_change", "data": {"image": "data:image/png;base64,..."}}. The handler base64-decodes it, writes it to images/placeholder.png inside the pack's own folder, and stashes that path in a module-level variable. When you run the workflow, receive_image() opens that file, converts it to a float tensor (B,H,W,C in 0–1), and hands it to the graph. It also echoes the image back over ComfyUI's own websocket so a floating preview pops up in the bottom-right corner of your browser - 250px wide, with a little minimize button.
Two quirks fall straight out of that code. First, the node keeps exactly one live image slot: a single global placeholder_image_path, overwritten on every message. Two clients pushing images means the last one wins. Second, the node's IS_CHANGED returns the current time, so it re-runs every queue execution - you don't have to poke it to pick up a new image, which is actually the right behavior for this use case.
Inputs and outputs
The info_schema is refreshingly small. No inputs at all. One output:
- IMAGE - the received image as a standard
IMAGEtensor. Wire it into anything that eats an IMAGE:VAEEncodefor img2img, aControlNetapply node,IPAdapter,Load Image's usual downstream. The node is an output node, so it also works as a bare graph endpoint.
The catch: until an image has actually arrived, receive_image() returns (None,). No placeholder file, no tensor. If you hit Queue without pushing anything first, whatever the IMAGE wire feeds gets a None and the graph will error downstream. Push from the client first, then run.
Install
This is a ComfyUI Manager one-click: open Manager → Custom Nodes Manager → search ComfyUI-connect-ui → Install, then restart ComfyUI. Or the manual route:
cd ComfyUI/custom_nodes
git clone https://github.com/xingBaGan/ComfyUI-connect-ui
# restart ComfyUI
No models to download, no heavy deps to worry about. The pack's requirements.txt is aiohttp, Pillow, and numpy - all already present in any normal ComfyUI install, so pip will likely install nothing. This is about as light as a custom node gets. It also carries no license drama: the companion repo is MIT.
Common issues
- Node outputs nothing. Nine times out of ten you haven't connected a client to
/ws_liveyet, or your frontend isn't sending theinput_image_changemessage shape. The floating preview is your debugger: if it shows the image, the node will too. - The preview only appears when the node is in the graph. The frontend glue registers the floating window when it sees a node titled
reciveImageByWebsocket. No node, no preview. - Multiple clients stomp each other. One shared image slot is by design, so a second connected client silently overwrites the first's image.
- Security. The
/ws_liveroute is unauthenticated, like most of ComfyUI's surface. Anyone who can reach your ComfyUI port can push an image into a running workflow. Fine on localhost or a VPN, not fine exposed to the internet without auth.
For a tiny two-star pack this node is genuinely clever - it's just aimed at a narrow audience: people shipping their own ComfyUI frontend. If that's you, it's the missing piece between "web upload" and "IMG tensor." If you're only ever running ComfyUI's own UI, Load Image already does everything you need.
Inputs (0)
No inputs
Outputs (1)
| Name | Type | Description |
|---|---|---|
| IMAGE | IMAGE | — |