diff --git a/public/js/activity.js b/public/js/activity.js index ea22d89..d973042 100644 --- a/public/js/activity.js +++ b/public/js/activity.js @@ -8,7 +8,10 @@ const dicoverMercureHub = async () => fetch(window.location) .get('Link') .match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]; - return new URL(hubUrl); + return { + url: new URL(hubUrl), + token: response.headers.get('X-Mercure-JWT'), + } } ) @@ -24,12 +27,14 @@ const addLogItem = (message) => { } document.addEventListener('DOMContentLoaded', async () => { - const hubUrl = await dicoverMercureHub(); + const { url, token } = await dicoverMercureHub() - hubUrl.searchParams.append('topic', 'http://localhost/activity') - hubUrl.searchParams.append('topic', 'http://localhost/dinosaurs') + url.searchParams.append('topic', 'http://localhost/activity') + url.searchParams.append('topic', 'http://localhost/dinosaurs') - const es = new EventSource(hubUrl, { withCredentials: true }); + const options = token ? { headers: { Authorization: `Bearer ${token}` }, withCredentials: true } : {} + + const es = new EventSourcePolyfill(url, options) es.addEventListener('login', e => { const message = JSON.parse(e.data) diff --git a/public/js/dinosaurs.js b/public/js/dinosaurs.js index 007ffe3..c1929d1 100644 --- a/public/js/dinosaurs.js +++ b/public/js/dinosaurs.js @@ -9,7 +9,10 @@ const dicoverMercureHub = async () => fetch(window.location) .get('Link') .match(/<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/)[1]; - return new URL(hubUrl); + return { + url: new URL(hubUrl), + token: response.headers.get('X-Mercure-JWT'), + } } ) @@ -57,11 +60,13 @@ const removeDinosaur = (id, message) => { } document.addEventListener('DOMContentLoaded', async () => { - const hubUrl = await dicoverMercureHub(); + const { url, token } = await dicoverMercureHub(); - hubUrl.searchParams.append('topic', 'http://localhost/dinosaurs') + url.searchParams.append('topic', 'http://localhost/dinosaurs') - const es = new EventSource(hubUrl, { withCredentials: true }); + const options = token ? { headers: { Authorization: `Bearer ${token}` }, withCredentials: true } : {} + + const es = new EventSourcePolyfill(url, options); es.addEventListener('created', e => { const message = JSON.parse(e.data) diff --git a/public/js/eventsource.min.js b/public/js/eventsource.min.js new file mode 100644 index 0000000..689c7cd --- /dev/null +++ b/public/js/eventsource.min.js @@ -0,0 +1,6 @@ +/** @license + * eventsource.js + * Available under MIT License (MIT) + * https://github.com/Yaffle/EventSource/ + */ +!function(e){"use strict";var r,H=e.setTimeout,N=e.clearTimeout,j=e.XMLHttpRequest,o=e.XDomainRequest,t=e.ActiveXObject,n=e.EventSource,i=e.document,w=e.Promise,d=e.fetch,a=e.Response,h=e.TextDecoder,s=e.TextEncoder,p=e.AbortController;function c(){this.bitsNeeded=0,this.codePoint=0}"undefined"==typeof window||void 0===i||"readyState"in i||null!=i.body||(i.readyState="loading",window.addEventListener("load",function(e){i.readyState="complete"},!1)),null==j&&null!=t&&(j=function(){return new t("Microsoft.XMLHTTP")}),null==Object.create&&(Object.create=function(e){function t(){}return t.prototype=e,new t}),Date.now||(Date.now=function(){return(new Date).getTime()}),null==p&&(r=d,d=function(e,t){var n=t.signal;return r(e,{headers:t.headers,credentials:t.credentials,cache:t.cache}).then(function(e){var t=e.body.getReader();return n._reader=t,n._aborted&&n._reader.cancel(),{status:e.status,statusText:e.statusText,headers:e.headers,body:{getReader:function(){return t}}}})},p=function(){this.signal={_reader:null,_aborted:!1},this.abort=function(){null!=this.signal._reader&&this.signal._reader.cancel(),this.signal._aborted=!0}}),c.prototype.decode=function(e){function t(e,t,n){if(1===n)return 128>>t<=e&&e<>t<=e&&e<>t<=e&&e<>t<=e&&e<>6?3:31>10)))+String.fromCharCode(56320+(i-65535-1&1023)))}return this.bitsNeeded=o,this.codePoint=i,r};function u(){}null!=h&&null!=s&&function(){try{return"test"===(new h).decode((new s).encode("test"),{stream:!0})}catch(e){}return!1}()||(h=c);function I(e){this.withCredentials=!1,this.readyState=0,this.status=0,this.statusText="",this.responseText="",this.onprogress=u,this.onload=u,this.onerror=u,this.onreadystatechange=u,this._contentType="",this._xhr=e,this._sendTimeout=0,this._abort=u}function l(e){return e.replace(/[A-Z]/g,function(e){return String.fromCharCode(e.charCodeAt(0)+32)})}function f(e){for(var t=Object.create(null),n=e.split("\r\n"),r=0;rgetRequest(); + $response = $event->getResponse(); - $this->authorization->setCookie($request, $topics); + // Generate the JWT token + $JWTfactory = $this->hubInterface->getFactory(); + + if (null === $JWTfactory) { + throw new \RuntimeException('The hub factory is not available.'); + } + + $token = $JWTfactory->create($topics); + + $response->headers->set('X-Mercure-JWT', $token); } } diff --git a/templates/activity.html.twig b/templates/activity.html.twig index af75758..49f59cc 100644 --- a/templates/activity.html.twig +++ b/templates/activity.html.twig @@ -3,6 +3,7 @@ {% block title %}Activity panel{% endblock %} {% block javascripts %} + {% endblock %} diff --git a/templates/dinosaurs-list.html.twig b/templates/dinosaurs-list.html.twig index 3da7009..de8812f 100644 --- a/templates/dinosaurs-list.html.twig +++ b/templates/dinosaurs-list.html.twig @@ -8,6 +8,7 @@ {% endblock %} {% block javascripts %} + {% endblock %}