How to enable compression for LiveView diffs

Phoenix Forum Questions / Help
, ,
1

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

2 Likes
2

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.

7 Likes
3

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

4

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.

3 Likes
5

Old post, but phoenix dashboard total input / total output clearly shows that compression works :slight_smile: Sending 1MB of test data roundtrip results in just over a 1MB increase in those numbers with compression off, and about 110kB with compression on. Browsers still completely hide whether or not compression was used.

  socket "/my-socket", MyWeb.MySocket,
   longpoll: true,
   websocket: [compress: true]
3 Likes