LES SERVER-SENT EVENTS,

UNE ALTERNATIVE AUX WEBSOCKETS

Pauline Huguenel

@PaulineHu12

Construire une app de Karaoké

Contrôle en temps réel

Télécommande

Lecteur de vidéos

Contrôle

Websockets

Server-sent events

Server-sent events

data: Here is a one line message

data: You can also send
data: multiline messages

event: playSong
data: 7712c944-4fd3-437b

event: songData
data: {"title": "Jolie nana", "artist": "Aya Nakamura"}

Server-sent events

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log('Message received : ' + event.data)
}
// Output -> Message received : 'Here is a one line message'

eventSource.addEventListener('playSong', (event) => {
  console.log('Playing song : ' + event.data)
})
// Output -> Playing song : '7712c944-4fd3-437b'

WebSockets

SSE

  • Communication unilatérale

 

  • Protocole HTTP

 

  • Données UTF8 seulement

 

  • Pas de support pour IE 🙈
  • Communication bi-directionnelle

 

  • Protocole custom

 

  • Données UTF8 et binaires

 

  • Supporte tous les navigateurs récents

+ reconnexion automatique

WebSockets

SSE

Retour d'expérience

https://mercure.rocks/

  • Notre choix : les SSE

 

  • Attention au stockage des connexions ouvertes ! ⚠️

 

  • Migration vers 

Merci !

https://slides.com/paulinehuguenel/sse/

Pauline Huguenel

@PaulineHu12

SSE

By Pauline Huguenel