From 9cc3e34673900e8796573eba0768c158f94707a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Mon, 5 Aug 2019 17:45:34 +0200 Subject: [PATCH] feat(vue-app): use EventSource instead of WebSocket for build indicator (#6186) --- distributions/nuxt/package.json | 2 +- .../components/nuxt-build-indicator.vue | 49 +++++-------------- yarn.lock | 48 +++++++++--------- 3 files changed, 38 insertions(+), 61 deletions(-) diff --git a/distributions/nuxt/package.json b/distributions/nuxt/package.json index 11c652a0ca..975149d735 100644 --- a/distributions/nuxt/package.json +++ b/distributions/nuxt/package.json @@ -61,7 +61,7 @@ "@nuxt/cli": "2.8.1", "@nuxt/core": "2.8.1", "@nuxt/generator": "2.8.1", - "@nuxt/loading-screen": "^0.5.2", + "@nuxt/loading-screen": "^1.0.0", "@nuxt/opencollective": "^0.2.2", "@nuxt/webpack": "2.8.1" }, diff --git a/packages/vue-app/template/components/nuxt-build-indicator.vue b/packages/vue-app/template/components/nuxt-build-indicator.vue index 2cc222e564..6fcd2baf9a 100644 --- a/packages/vue-app/template/components/nuxt-build-indicator.vue +++ b/packages/vue-app/template/components/nuxt-build-indicator.vue @@ -26,21 +26,16 @@ export default { } }, mounted() { - if (WebSocket === undefined) { + if (typeof EventSource === undefined) { return // Unsupported } - this.wsConnect() + this.sseConnect() }, beforeDestroy() { - this.wsClose() + this.sseClose() clearInterval(this._progressAnimation) }, computed: { - wsURL() { - const _path = '<%= router.base %>_loading/ws' - const _protocol = location.protocol === 'https:' ? 'wss' : 'ws' - return `${_protocol}://${location.hostname}:${location.port}${_path}` - }, options: () => (<%= JSON.stringify(buildIndicator) %>), indicatorStyle() { const [ d1, d2 ] = this.options.position.split('-') @@ -77,37 +72,17 @@ export default { } }, methods: { - wsConnect() { + sseConnect() { if (this._connecting) { return } this._connecting = true - this.wsClose() - this.ws = new WebSocket(this.wsURL) - this.ws.onmessage = this.onWSMessage.bind(this) - this.ws.onclose = this.wsReconnect.bind(this) - this.ws.onerror = this.wsReconnect.bind(this) - setTimeout(() => { - this._connecting = false - if (this.ws.readyState !== WebSocket.OPEN) { - this.wsReconnect() - } - }, 5000) + this.sse = new EventSource('<%= router.base %>_loading/sse') + this.sse.addEventListener('message', (event) => this.onSseMessage(event)) }, - - wsReconnect() { - if (this._reconnecting || this.reconnectAttempts++ > 10) { - return - } - this._reconnecting = true - setTimeout(() => { - this._reconnecting = false - this.wsConnect() - }, 1000) - }, - - onWSMessage(message) { + onSseMessage(message) { const data = JSON.parse(message.data) + if (!data.states) return this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length) @@ -123,10 +98,10 @@ export default { } }, - wsClose() { - if (this.ws) { - this.ws.close() - delete this.ws + sseClose() { + if (this.sse) { + this.sse.close() + delete this.sse } } } diff --git a/yarn.lock b/yarn.lock index e0b61e918e..a4c5b049a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1637,15 +1637,15 @@ error-stack-parser "^2.0.0" string-width "^2.0.0" -"@nuxt/loading-screen@^0.5.2": - version "0.5.2" - resolved "https://registry.npmjs.org/@nuxt/loading-screen/-/loading-screen-0.5.2.tgz#4226543ca00506a0a61d400f3c5df79548e5eea3" - integrity sha512-5PfYC0+NvpWi14BbZ10OQVfdWORsfL3llldX8O0TenHFbt3/62DCXYsoDakNj6OUZvkZoDViFXVFJ4/vh1bnQA== +"@nuxt/loading-screen@^1.0.0": + version "1.0.0" + resolved "https://registry.npmjs.org/@nuxt/loading-screen/-/loading-screen-1.0.0.tgz#8cb22ef992548923c8fa5d8757e3ae91d7709751" + integrity sha512-RuTECBAlaEzI90wi5OKdRTH9Y77ocKgLfb3W7wDRnLYIYmWOFiNG9sBVfYYlkLbNsvN84DFQJyT5zvdy7GWklQ== dependencies: - connect "^3.6.6" - fs-extra "^7.0.1" - serve-static "^1.13.2" - ws "^7.0.0" + connect "^3.7.0" + fs-extra "^8.1.0" + node-res "^5.0.1" + serve-static "^1.14.1" "@nuxt/opencollective@^0.2.2": version "0.2.2" @@ -3439,7 +3439,7 @@ config-chain@^1.1.11: ini "^1.3.4" proto-list "~1.2.1" -connect@^3.6.6, connect@^3.7.0: +connect@^3.7.0: version "3.7.0" resolved "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8" integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ== @@ -4121,7 +4121,7 @@ des.js@^1.0.0: inherits "^2.0.1" minimalistic-assert "^1.0.0" -destroy@~1.0.4: +destroy@^1.0.4, destroy@~1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA= @@ -5181,15 +5181,6 @@ from2@^2.1.0: inherits "^2.0.1" readable-stream "^2.0.0" -fs-extra@^7.0.1: - version "7.0.1" - resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" - integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== - dependencies: - graceful-fs "^4.1.2" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs-extra@^8.0.1, fs-extra@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" @@ -7436,7 +7427,7 @@ mime-db@1.40.0, "mime-db@>= 1.40.0 < 2": resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32" integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA== -mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24: +mime-types@^2.1.12, mime-types@^2.1.19, mime-types@~2.1.19, mime-types@~2.1.24: version "2.1.24" resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81" integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ== @@ -7802,6 +7793,17 @@ node-releases@^1.1.25: dependencies: semver "^5.3.0" +node-res@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/node-res/-/node-res-5.0.1.tgz#ffaa462e206509d66d0ba28a4daf1f032daa6460" + integrity sha512-YOleO9c7MAqoHC+Ccu2vzvV1fL6Ku49gShq3PIMKWHRgrMSih3XcwL05NbLBi6oU2J471gTBfdpVVxwT6Pfhxg== + dependencies: + destroy "^1.0.4" + etag "^1.8.1" + mime-types "^2.1.19" + on-finished "^2.3.0" + vary "^1.1.2" + "nopt@2 || 3": version "3.0.6" resolved "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" @@ -8022,7 +8024,7 @@ octokit-pagination-methods@^1.1.0: resolved "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4" integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ== -on-finished@~2.3.0: +on-finished@^2.3.0, on-finished@~2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947" integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc= @@ -10109,7 +10111,7 @@ serve-placeholder@^1.2.1: dependencies: defu "^0.0.1" -serve-static@1.14.1, serve-static@^1.13.2, serve-static@^1.14.1: +serve-static@1.14.1, serve-static@^1.14.1: version "1.14.1" resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9" integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg== @@ -11324,7 +11326,7 @@ validate-npm-package-name@^3.0.0: dependencies: builtins "^1.0.3" -vary@~1.1.2: +vary@^1.1.2, vary@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=