Nuxt + Web Workers, logout after idle (part 1)
Tags: nuxt, intermediate, webworker, vue
Published: 2020-05-22 17:28:23

> Para la versión en español [ve a mi blog](https://agustintm.com/blog/nuxt-y-web-workers-p1)

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:
1. Install and configure everything needed to use web workers with Nuxt.
2. Code our very first worker 
3. 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](https://github.com/webpack-contrib/worker-loader) this will help us to make webpack register our worker

Install with yarn:
```Bash
yarn add worker-loader
```

Next we are goint to `nuxt.config.js` and add the following code over *build*
```Javascript
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.
```Javascript
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`
```Javascript
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,](https://nuxtjs.org/guide/plugins/) 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:
```Javascript
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:
```Javascript
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?
1. Install and configure everything needed to use web workers with Nuxt.
2. Code our very first worker 
3. 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](https://twitter.com/c3ppeu)**

Greetings!