search

liveblocks / liveblocks

Liveblocks is the platform for adding collaborative editing, comments, and notifications into your application.
https://liveblocks.io
Apache License 2.0
3.33k stars 260 forks source link

Yjs image upload > 500KB raises websocket error with code 1005 #1428

Closed sunxivincent closed 7 months ago

sunxivincent commented 7 months ago

Describe the bug We are using Yjs for liveblocks for our editor. We noticed that if we upload image >600KB the websocket will raise 1005 error and shutdown the connection, so any subsequent edit will not be persisted. We tested 512KB <= images it works. Attached the error we found in the console.

I was wondering if this is intentionally set by Liveblock or a potential bug.

We are thinking to create a customized image node with id encoded, and fetch / render dynamically based on that into editor if we cannot encode entire image into liveblock. Let us know if this is the right way to do it!

image

To Reproduce

Upload a 1mb image

Expected behavior

A clear and concise description of what you expected to happen. Ex: I should see the updates performed on storage while I was disconnected.

Illustrations

If applicable, add screenshots or video recordings to help explain your problem. Upload your file with a drag and drop on the text area.

Environment (please complete the following information):

        "@liveblocks/client": "^1.2.0",
        "@liveblocks/node": "^1.2.0",
        "@liveblocks/react": "^1.2.0",
        "@liveblocks/yjs": "^1.2.0",

Additional context

Add any other context about the problem here.

nvie commented 7 months ago

The 1005 error code is deliberate if invalid or too large messages are sent over WebSocket. Large WebSocket messages can have an adverse effect on performance for everyone in the room. Liveblocks isn't designed to store images or other large content. We recommend storing image assets elsewhere, and just saving the URL pointing to that asset in Liveblocks for the best experience.

sunxivincent commented 7 months ago

Thanks! We also decided to store the id in liveblock and do dynamic fetching in the realtime to overcome the size issue.