Para la versión en español ve a mi blog
In this post we are going to see how to logout a user after idle using Nuxt and Web Workers. I found out is a long process so im gonna keep it simple and well explained so everybody can follow along. Due to its extension I'm going to divide it into different sections.
In this section we are going to:
- Install and configure everything needed to use web workers with Nuxt.
- Code our very first worker
- Execute our worker
I'm not going to explain what web workers are, but we are going to see how they work.
Are you ready? Here we go!
Installation and configuration
First we are going to install worker-loader this will help us to make webpack register our worker
Install with yarn:
yarn add worker-loader
Next we are goint to nuxt.config.js
and add the following code over build
build: {
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
test: /\.worker\.js$/,
loader: 'worker-loader',
exclude: /(node_modules)/
})
}
}
}
With this we are telling webpack to get all the files with extension .worker.js
and load them through worker-loader
All the files that serve as workers must have .worker.js extension*
Coding our very first worker
Let's add a new file under plugins directory (the name is up to you) and add the following.
import SessionWorker from '~/assets/js/session.worker.js'
export default (context, inject) => {
inject('worker', {
createWorker () {
return new SessionWorker()
}
})
}
and then we register it in nuxt.config.js
plugins: [
{ src: '~/plugins/web-worker.js', ssr: false }
/* Important ssr: false
cause the workers wont work server side, just client*/
],
At the moment the compilation will fail because we have not created our file
session.worker.js
but patience, we are going to that.
Here we are basically giving the necessary instruction to create our worker. If you have doubts about plugins head to the documentation, its explained very simple.
Now we will create a folder and a file inside assets
(assets -> js -> session.worker.js)
It is important that the new file is called in the same way as the one we import in our plugin, and it is on the same path.
And add:
self.addEventListener('message', (event) => {
console.log('[WORKER] worker con data: ', event.data)
})
What is this?
self
references the worker itself
message
it is the first parameter that the function receives and should not say otherwise.
If its different than message It wont work
The event
parameter is the one it receives when worker is called (we'll get to that)
So what my worker will do? just print to console the received message
But, how? Lets see.
Executing our worker
Lets head to pages -> index
(you can actually run it anywhere, I chose in that specific place because it is the first contact of the application) and we add the following:
created: function () {
if (process.browser) { // Remember workers just work in client?
const worker = this.$worker.createWorker() // Instruction assigned in plugin
worker.addEventListener('message', this.workerResponseHandler)
worker.postMessage('Message sent to worker')
}
},
methods: {
workerResponseHandler: function (event) {
console.log('[WORKER REPONSE]', event.data)
}
}
What did we just see?
const worker = this.$worker.createWorker()
We are creating the worker variable to start it.
worker.addEventListener('message', this.workerResponseHandler)
We are creating the event by passing two parameters:
-
message
this must keep it's name, otherwise wont work -
this.workerResponseHandler
function that handles worker response.
worker.postMessage('Message sent to worker')
We send a message to our worker so it can be printed in console
Lastly:
workerResponseHandler
print the worker response.
Its done! It is all for our first part, an apology if the explanation is very extensive, however it is a complicated process and I wanted it to be as clear as possible.
What we saw in this tutorial?
- Install and configure everything needed to use web workers with Nuxt.
- Code our very first worker
- Execute our worker
Stay with me to see the next steps to logout a user after X time of inactivity.
Any questions or comments you have, with pleasure you can find me on twitter as @c3ppeu
Greetings!
Top comments (1)
Hey, where's the rest parts? Would be interesting to see a web-worker handling authorization, like checking tokens in a background, then refresh/logout when needed.