This repository shows us how we can use Seneca pin, patterns & actions within the frontend of your application. We define what we want to pass on the frontend and listen for certain pin's on the backend.
The frontend of Seneca-Browser is built in Vue.js with Vue Cli but you could use it with pretty much anything. Within the main.js file we tell Vue to use Seneca and then pass it into the Vue object.
This lets us access Seneca from within any Vue component and call actions or define patterns within the frontend.
We use Vue lifecycle hooks to initialize our patterns as the app loads up in the browser.
-
The green and blue components each have a single pattern loaded that is defined in their lifecycle hooks.
-
The red component has two methods which contain Seneca actions.
-
These two actions target the patterns which were initialized in the green and blue components as our app loaded.
This provides the seneca browser functionality.
On the frontend we pass all actions of a:* & b:* to the backend client.
.client({type:'browser', pin:'a:*'})
.client({type:'browser', pin:'b:*'})On our backend we listen for
.listen({type:'browser', pin:'a:*'})
.listen({type:'browser', pin:'b:*'})To run this from the terminal
Within the seneca-browser folder
$ npm installWithin /smoke/SenecaVueCli folder
$ npm install
$ npm run buildThen navigate to /smoke folder
node server.js