vue-chat-engine
v0.0.7
Published
PubNub ChatEngine plugin for vuejs and vuex
Downloads
10
Readme
Vue-Chat-Engine
A Vue.js 2 Plugin
Build chat apps with Vue and Vuex using PubNub ChatEngine.
Install
npm install chat-engine --save
npm install vue-chat-engine --save
Use in a Vue.js app
Main.js
import Vue from 'vue';
import App from './App';
import store from './store';
import VueChatEngine from 'vue-chat-engine';
import ChatEngineCore from 'chat-engine';
const chatEngine = ChatEngineCore.create({
publishKey: 'pub_key_here',
subscribeKey: 'sub_key_here'
}, {
globalChannel: 'chatengine-vue-demo-global',
enableSync: true,
});
// ChatEngine injected into every component instance
Vue.use(VueChatEngine, {chatEngine, store});
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
components: {App},
template: '<App/>',
created() {
const ChatEngine = this.$chatEngine;
const store = this.$store;
// ChatEngine.connect(me.uuid, me);
// ...
},
});
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// root state object.
// each Vuex instance is just a single state tree.
const state = {
chats: {},
chatMessages: {},
me: {},
};
const mutations = {
setMe(state, {me}) {
state.me = me;
},
CHATENGINE_message(state, {event, sender, chat, data}) {
let channel = chat.config.channel;
if (!state.chatMessages[channel]) {
Vue.set(state.chatMessages, channel, []);
}
let myUuid = this.state.me.uuid;
let message = data;
if (sender.uuid === myUuid) {
message.who = 'me';
} else {
message.who = 'them';
}
state.chatMessages[channel].push(message);
state.chatMessages[channel].sort((msg1, msg2) => {
return msg1.time > msg2.time;
});
},
};
Build
npm run build