Le temps réel est devenu un pré-requis de nos applications mais pas seulement pour les données. Nous souhaitons également pouvoir informer nos utilisateurs qu’un événement vient de se produire (mention, blog post, pull request...). Mais quelle est la meilleure façon d’interagir en temps réel avec une API lorsque le délai de rafraichissement est imprévisible ? Vous avez probablement déjà entendu parler de WebHook et de WebSub. Peut-être même savez-vous que l’un est basé sur l’autre. Mais savez-vous vraiment quelles sont leurs différences ? Comment implémenter chaque solution ? Et plus important, quand utiliser l’une ou l’autre ? Dans cette session nous reviendrons en détail sur chaque solution pour trouver les réponses aux questions précédentes et bien sûr, nous les verrons en action avec une démo en live coding !

1. SMART APPLICATIONS PLATFORM
—
WebHooks vs WebSub
which one to stream your events in
Real Time?
Audrey Neveu - @Audrey_Neveu

2. ABOUT ME
Full Stack Developer Co-Leader France
@Audrey_Neveu

3. REAL-TIME IS THE NEW NORM

4. F.O.M.O (FEAR OF MISSING OUT)

5. DATA IS IMPORTANT, AND SO ARE EVENTS

6. BUT EVENTS… A/ ARE UNPREDICTABLEA/ ARE UNPREDICTABLE

7. BUT EVENTS… A/ ARE UNPREDICTABLEA/ ARE UNPREDICTABLE
B/ HAVE DIFFERENT USAGES

8. Polling

9. POLLING

10. 98.5% of polls are
wasted
Source:
http://resthooks.org/
POLLING MADNESS ™

11. 98.5% of polls are
wasted
Source:
http://resthooks.org/
POLLING MADNESS ™

12. WebHooks

13. ● webhooks.org
● aka User Defined HTTP Callback
● concept / method
●
WEBHOOKS

14. Consumer
HTTP/1.1 201 Created
Link:<http://subscription-serve
r.com/subscription>;
rel="subscription"
POST /eventsource HTTP/1.1
Host: subscription-server.com
Pragma: subscribe
Callback:
<http://example.com/callback>;
method="POST"
rel="subscriber"
API Provider
POST /callback HTTP/1.1
Host: example.com
Link:
<http://subscription-server.com
/subscription>;
rel="subscription"
Content-HMAC: sha1
C+7Hteo/D9vJXQ3UfzxbwnXaijM=
Content-Length: 21
Content-Type:
application/x-www-form-urlencod
ed
payload=Hello%20world
WEBHOOKS

15. ✓ Define a callback URL ✓ Create a subscription endpoint
- GET /webhook
- POST /webhook
- GET /webhook/{id}
- PUT /webhook/{id}
- DELETE /webhook/{id}
Consumer API Provider
WEBHOOKS

16. ✓ Define a callback URL
Consumer API Provider
✓ Implement your webhook queue
- inline HTTP Requests
- SQL-based queue
- AMQP broker
- batch
WEBHOOKS

17. CONSUMER SETUP EXAMPLE

18. EVENT RECEIVED
POST /callback HTTP/1.1
Host: www.example.com
X-Github-Delivery:
72d3162e-cc78-11e3-81ab-4c9367
dc0958
User-Agent:
GitHub-Hookshot/044aadd
Content-Type: application/json
Content-Length: 6615
X-GitHub-Event: issues
Payload=
{
"action": "opened",
"issue": {
"url": "https://api.github.com/repos/octocat/Hello-World/issues/1347",
"number": 1347,
...
},
"repository" : {
"id": 1296269,
"full_name": "octocat/Hello-World",
"owner": {
"login": "octocat",
"id": 1,
...
},
...
},
"sender": {
"login": "octocat",
"id": 1,
...
}
}

19. PROS AND CONS
✓ Easily consumed
✓ Without dedicated resources
■ Poor user experience
■ Does not work with all clients
■ Manual setup✓ Easily integrated
■ Debugging
✓ (almost) Real-Time updates

20. KNOWN ISSUES
Consumer API Provider
■ DDoS Attack
■ Missed notification
■ DDoS Attack
■ Deduplication

21. CHECK LIST
Consumer API Provider
✓ Implement authentication
✓ Expected answer?
✓ Monitor payload size
✓ Handle request number
✓ Handle duplicates
✓ One callback per webhook

22. WebSub

23. ✓ RSS / Atom feeds
✓ pubsubhubbub/ & w3c.github.io/websub
✓ Open Protocol
✓ Based on Publish / Subscribe Pattern and on topics
✓ Formerly known as PubSubHubbub, PubSub, Push...
WEBSUB
✓ W3C proposed recommandation since April 2017

24. Publishers SubscribersHub
WEBSUB

25. DiscoveryPublishers
Link: <https://my-hub.com/>; rel="hub"
Link: <https://my.resource.com>; rel="self"
<link rel="self" href="https://my-resource.com/">
<link rel="hub" href="https://my-hub.com/">
SUBSCRIBE - PUBLISHERS

26. Subscribers Send subscription request to the Hub
POST https://my-hub.com/
…
hub.mode="subscribe"
hub.topic="https://my-resource.com/"
hub.callback="http://example.com/callback"
SUBSCRIBE - SUBSCRIBERS 1/2
hub.secret="my-token"

27. Hub Verify intent of the subscribers
GET http://example.com/callback
…
hub.mode="subscribe"
hub.topic="https://my-resource.com/"
hub.challenge="a random string"
SUBSCRIBE - HUB

28. Subscribers
HTTP/1.1 200 OK
Body:{
hub.challenge: "a random string"
}
Answer verification request
SUBSCRIBE - SUBSCRIBERS 2/2

29. CONSUMER SETUP

30. Publishers Ping the Hub
POST https://my-hub.com/
…
hub.mode=publish
hub.url=https://my.updated-resource.com
PUBLISH - PUBLISHERS

31. Hub
POST http://example.com/callback
Link: <https://my-hub.com/>; rel="hub"
Link: <https://my.updated-resource.com>; rel="self"
Content Distribution
PUBLISH - HUB

32. Subscribers Pull the updated resource
GET https://my.updated-resource.com
PUBLISH - SUBSCRIBERS

33. {
"object":"page",
"entry":[
{
"id":"51044240199134611",
"time":1447342027,
"changes":[
{
"field":"leadgen",
"value":{
"adgroup_id":0,
"ad_id":0,
"created_time":1447342026,
"leadgen_id":55459717045641545,
"page_id":516540199134611,
"form_id":551111744595541
}
}
]
}
]
}
EVENT RECEIVED

34. Subscribers Send unsubscription request to the Hub
POST https://my-hub.com/
…
hub.mode="unsubscribe"
hub.topic="https://my-resource.com/"
hub.callback="http://example.com/callback"
UNSUBSCRIBE - SUBSCRIBERS 1/2

35. Hub Verify intent of the subscribers
GET http://example.com/callback
…
hub.mode="unsubscribe"
hub.topic="https://my-resource.com/"
hub.challenge="a random string"
UNSUBSCRIBE - HUB

36. Subscribers Answer verification request
HTTP/1.1 200 OK
Body:{
hub.challenge: "a random string"
}
UNSUBSCRIBE - SUBSCRIBERS 2/2

37. PROS AND CONS
✓ Easily consumed
✓ Without dedicated resources
■ Poor user experience
■ Does not work with all clients
■ Manual setup✓ Easily integrated
■ Debugging
✓ (almost) Real-Time updates
■ Manual setup

38. PROS AND CONS
✓ Easily consumed
✓ Without dedicated resources
■ Does not work with all clients
✓ Easily integrated
■ Debugging
✓ (almost) Real-Time updates ■ Need another call to get data

39. KNOWN ISSUES
■ DDoS Attack
■ Missed notification
■ DDoS Attack
■ Deduplication
Consumer API Provider
■ DDoS Attack ■ DDoS Attack

40. Prenez de la hauteur avec SaagieDEMO

41. CONCLUSION

42. Prenez de la hauteur avec SaagieTHANKS!