1.
Mercure
Ou (A inesperada vontade de
abandonar websockets)

2.
Mercure é um protocolo que permite enviar atualizações de
dados para navegadores e outros clientes HTTP de maneira
conveniente, rápida, confiável e energeticamente eficiente. É
especialmente útil para publicar atualizações em tempo real de
recursos servidos por APIs e aplicativos web e mobile.

3.
Funcionalidades
● Suporte nativo (HTTP e SSE)
● Sem conexões persistentes? Não é um problema!
● Restabelecimento de conexão embutido…
● … assim como reconciliação de estado
● Autorização baseada em JWT
● Multiplexação HTTP/2
● HATEOAS e GraphQL
● Auto-descoberta através de web linking (RFC 5988)
● Encriptação de mensagens
● Suporta até IE7 (😱) usando um polyfill EventSource
● Envio "connection-less" em ambientes controlados

4.
Como?
1 Cliente assina a um tópico

5.
Como?
2 Aplicação publica em um tópico

6.
Como?
3 Hub notifica assinantes

7.
WebSocket
API de Alto Nível
Autorização
Reconxão
Reconciliação de Estado
HTTP/2
Draft de Standard
API Baixo Nível
Você deve implementar por si mesmo
Idem
Idem
Sem suporte
RFC6455
Mercure

8.
bit.ly/mercure-app

9.
HUB

10.
HUB 0.6.2
● Kubernetes
○ helm install stable/mercure
● Imagem Docker
○ dunglas/mercure
■ Demo no Azure App Services
● Serviço Gerenciado (beta fechado)
● Binário

11.
HUB 0.6.2
JWT_KEY=a-very-complex-key
ACME_HOSTS=hub.mercure.dev,hub2.mercure.dev
ADDR=:https # 127.0.0.1:3000
ALLOW_ANONYMOUS=1
CERT_FILE=x.crt
KEY_FILE=key.crt
COMPRESS=1
CORS_ALLOWED_ORIGINS=*
DEBUG=0
DEMO=0
HISTORY_SIZE=100
HISTORY_CLEANUP_FREQUENCY=0.3
PUBLISH_ALLOWED_ORIGINS=my.publisher.com
PUBLISHER_JWT_KEY=publisher-specific-key
SUBSCRIBER_JWT_KEY=subscriber-specific-key
Variáveis de Ambiente

12.
Subscriber

13.
Subscriber
export default {
data: () => ({
temperature: 23.4,
humidity: 42,
updatedAt: '2019-09-24 23:12:42'
}),
methods: {
updateWeather: function (payload) {
this.temperature = parseFloat(payload.temperature).toFixed(1)
this.humidity = parseInt(payload.humidity)
this.updatedAt = payload.updatedAt
}
},
created () {
const h = new URL('https://demo.mercure.com/hub')
h.searchParams.append('topic', 'http://hub.casimiro.tech/weather')
const es = new EventSource(h)
es.onmessage = e => this.updateWeather(JSON.parse(e.data))
}
Vue.js

14.
Publisher

15.
Publisher
use SymfonyComponentMercurePublisher;
use SymfonyComponentMercureUpdate;
class ReadDht11Command extends Command
{
protected $publisher;
public function __construct(Publisher $publisher)
{
$this->publisher = $publisher;
}
protected function execute(InputInterface $input, OutputInterface $output)
{
while(true){
// a:2:{s:8:"humidity";d:59.0;s:11:"temperature";d:21.8;}
$read = unserialize(`/home/pi/read-dht11`);
$update = new Update(
'http://hub.casimiro.tech/weather',
json_encode([
'temperature'=> $read['temperature'],
'humidity'=> $read['humidity'],
'updatedAt'=> date('Y-m-d H:i:s')
])
);
$this->publisher->__invoke($update);
usleep(100000);
}
}
}
Symfony

16.
Verificando os Updates

17.
Considerações

18.
Quer saber mais? https://mercure.rocks

19.
https://duodra.co
@duodraco
linkedin.com/in/andersoncasimiro
Ride the wind of a brand new day
High where mountains stand
Found my hope, and pride again
Rebirth… of a man
Time to fly…