Web Sockets vs Server Sent Events

Web Sockets and Server Sent Events stream events from server to client. This PDF compares the technologies in several areas and finds them to be comparable. Note, the most aggressive test in the PDF streamed to 100 clients every 500ms --not aggressive enough imo,

"Websockets and Server sent events were in the experiments measured to have very similar performance and they were measured to be the most performance efficient of the compared technologies in the experimental conditions used in this study. This suggests that to increase server performance and reduce hardware costs these technologies would be better than the other technologies compared."

Facebook use SSE subscriptions and some argue that websockets should be deprecated. Reasons people have given for choosing SSE,

• SSEs work better with corporate firewalls that block web sockets,
• SSEs work better w/ AWS Lambda and load balancing (seems no longer true),
• SSEs are easier for clients to setup and use,
• SSEs use less resources (conceptually this seems correct, but I have not seen proof of this),
• SSE connections automatically reconnect without additional scripting needed

note regardding http2: apollo-server's http2 functionality is broken. Apollo-server Sockets and SSE must use http

Two Apollo Services: web-sockets and server-sent events

We made a Web Socket and an SSE Apollo service to understand differences between both stream types. Note: there is currently no public package for adding SSE support to Apollo Graphql and we added just enough support to get minimal grqphql Subscription functionality. The Apollo script used to add websocket subscriptions is here.

Here are two succesful client requests that did not use any special Apollo package (this is similar to Quill and MXR which generate their own requests without any special package). Both C# and javascript clients require fewer loc for SSE requests than Web Socket requests.

socket

const webSock = new WebSocket('ws://localhost:4000/graphql', 'graphql-ws')

webSock.onopen = () => {
  webSock.send(JSON.stringify({
    type: 'connection_init',
    payload: {
      // Authorization:'Bearer eyJhbG.....HIDDEN....dDgw'
    }
  }))
  webSock.send(JSON.stringify({
    id: '1',
    type: 'start',
    payload:{
      variables: {},
      extensions: {},
      operationName: null,
      query:'subscription{presence}'
    }
  }))
}

webSock.onmessage = event => {
  console.log(event.data)
}

sse

const eventSrc = new EventSource('http://localhost:4000/graphql?queryId=specialId')
eventSrc.addEventListener('message', m => {
  console.log('message', m)
})
eventSrc.addEventListener('open', m => {
  console.log('open', m)
})
eventSrc.addEventListener('error', m => {
  console.log('error', m)
})