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]
5 Likes
6

[See correction below]

I send a 1.1MB payload - a JSON string - from the server via a pushEvent along the liveSocket.
The network/socket shows that I send indeed 1.1MB.
To inspect the “real” size, I inspect the loopback with Wireshark.
Without compress: true, I see 70 TCP packets × ~16 KB = ~1.1 MB. No compression is applied.
Digging further, I should see RSV1 bit should be set 1, but Wireshark displays nothing.
This confirms that Bandit does only negotiate but does not apply any compression at all on the frames
So how do you see your results above?

Edit. :double_exclamation_mark: When you do set “compress”, I see that 18 packets have been sent for a length of 276kB. This means that Bandit compression correctly.

1 Like