How to enable compression for LiveView diffs

Hi everyone

I’m currently developing an app using Phoenix LiveView, and we’ve got one component (search) where we’ve got to push rather large chanes over the wire (html up to ca. 700kB).

When I was checking on how we could speed the transfer of this up I realized that the websocket does not seem to use compression for the diffs, is there a way to turn this on? I’ve looked around on the web, and setting:

x_web/config/prod.exs
config x_web, XWeb.Endpoint,
  http: [compress: true ...]

does not seem to help. This will compress the http requests, but the diffs over the Websocket seem to be still uncompressed.

I’ve tested this using Firefox and Chrome, and have the same result in both environments (using Phoenix 1.5, LiveView 0.14.1, cowboy 2.8.0)

Thanks for the help

1 Like

Ok, found it after digging through the documentation in depth. Just enable the compress=true in the socket, like for any other channel, the setting is then passed along to cowboy.

I.e. in your endpoint.ex, do this:

socket "/live", Phoenix.LiveView.Socket, websocket: [compress: compress]

And here ist the documentation for it.

3 Likes

Have you measured the difference before and after in size and maybe also processing time?

Sadly I’ve found no way to measure the size, all browsers seem to display only the size of the uncompressed message.

However I was able to “somewhat” measure the reduced time. Messages took roughly 450 ms to deliver before (I knew that ~150ms where spend on the server on the actual logic), and times are now down to ~200ms. So seems to be working as expected.

1 Like