Adonis websocket client for VueJS
How it works
This package add new layer for use original AdonisWSClient in your vue.js project:
//For global acceessVuews //In vue componentthis$ws
For example you can handle adonisWS events in your vue components:
this$ws
Emit events from Vue components you can:
//if this topic does not exist, $emitToServer automatic trying to create itthis$ws
Install
npm
npm install adonis-vue-websocket
yarn
yarn add adonis-vue-websocket
Usage
1. Connect plugin
You can to plug original AdonisWSClient and connect with library:
Vue
Or
I recommend this way: add AdonisWS in index.html (for disable native AdonisJS logs):
and connect with library in main.js:
Vue
2. Init connection
Create file src/WsSubscriptions.js with content:
; const userTopicSubscriptions = { if id let subscription = Vuewssocket; if !subscription subscription = Vuews; subscription; }; { return { Vuews Vuews; Vuewssocket; // FOR EXAMPLE you can observe for userId or another variable from Vuex // store.watch( // () => store.getters.vgUserUid, // async id => { // if (id) { // userTopicSubscriptions(uid); // } // } // ); }};
In app.vue:
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view v-if="!loading"/> </div></template> <script> { return loading: true } async { await thisloading = false }</script>
3. Handle and emit events
You can handle events in any .js and .vue files and components, for example in vue component:
<template> <div class="about"> <h1>This is an about page</h1> <el-input v-model="message"/> <el-button @click="sendHello">Send!</el-button> </div></template><script>const topicName = 'user:1' { return message: 'Hello from about page!' } { this$ws this$ws } { //Remove listeners when component destroy this$ws; this$ws; } methods: { console } { this$ws } </script>
Profit!
Test
git clone https://github.com/reg2005/adonis-vue-websocket.gitcd adonis-vue-websocket
In first terminal
cd example/backcp .env.example .envnpm installadonis serve --dev
In second terminal
cd example/front npm installyarn serve
And open front in your browser