Search code examples
javascripthttpwebsocketsocket.iohttp2

What is the meaning of - HTTP2 doesn't provide API used by the clients, while websockets do?

https://stackoverflow.com/a/42465368/462608

Where might websockets still have a place? The big one is server->browser pushed binary data. HTTP/2 does allow server->browser pushed binary data, but it isn't exposed in browser JS. For applications like pushing audio and video frames, this is a reason to use websockets.

What does it mean when they say that that pushed binary data isn't exposed in browser JS? I request some example to help me understand this.

https://stackoverflow.com/a/47108355

And so HTTP2 push is really something between your browser and server, while Websockets really expose the APIs that can be used by both client (javascript, if its running on browser) and application code (running on server) for transferring real time data.

I request some examples to make me understand the meaning of HTTP2 push is really something between your browser and server and Websockets (socket.io) has API which can be used by clients.

What does all this mean?

Solution

  • Here, we are talking about bidirectional(bidi) message passing between server and client. In your case/question, client is a Browser.

    To understand what's going on, we should understand what are HTTP/2 and WebSocket.

    • Both of them are protocols related to Application layer
    • HTTP/2 is successor of HTTP/1. While WebSocket is a distinct from HTTP and was created to provide full-duplex communication between client and server.
    • HTTP/2 supports bidirectional stream but you don't have access to this stream from JavaScript
    • HTTP/2 can use this stream to "Push" data to the browser. But pushed data will be processed by only by Browser and your JavaScript would not know anything about it. It can be used by a server to push additional resources. For example Browser requested index.html and server with index.html returns also index.css because it knows that Browser will request index.css. So when browser start to parse index.html and find link on index.css it will take it from the cache.
    • WebSocket provide bidirectional stream, and you have access to this stream from JavaScript. So you can use send method to push a message to the server. And vice versa, the server can push a message to the browser using the same stream/channel

    So now we can try to answer on questions

    What does it mean when they say that that pushed binary data isn't exposed in browser JS?

    It means that if server "Push" additional data on your request you will not know about it in JavaScript.

    fetch('/index.html') 
// Server respond with index.html data and
// "Push" index.css data but in response you get only index.html data
.then((res) => res.text()).then(console.log) // Only index.html data

    And so HTTP2 push is really something between your browser and server, while Websockets really expose the APIs that can be used by both client (javascript, if its running on browser) and application code (running on server) for transferring real time data.

    HTTP/2 "Push"'ed additional data can be used by Browser to fulfil the Browser cache. You can read about it here. With WebSocket you can get any pushed by server data using WebSocket onmessage property in JavaScript

    websocket.addEventListener('message', (data) => {
  console.log(data) // Pushed by server data
})

    BUT! Browser provide Server Sent Event(SSE) functionality which allow you to use HTTP/2 stream but in read-only mode. It means that you can subscribe to server events, but could not send events from the client to the server. So it works only in one direction (from server -> to client). Also, if server doesn't support HTTP/2 browser fallback on HTTP/1.x for SSE