Introducing the ChatEngine Plugin for Vue.js

Good News! We’ve launched an all new Chat Resource Center.

The SDK or APIs in this tutorial may be out of date. We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.

Take me to the Chat Resource Center →

Building a chat app is complicated. Architecting the back end can be done 100 different ways if 100 different software engineers are tasked with the same project. ChatEngine removes a lot of the thinking and inventing that would have been spent if you started from scratch.

ChatEngine

The original vision of ChatEngine was to get developers up and running with their next chat application in as little time and with as little pain as possible. As the market demand for chat climbs to new heights, the talented Engineering team at PubNub will continue to innovate and support its customers with the latest tech.

At PubNub we believe that the future is real-time. Personally I believe that anywhere you would have had a “forum” or “comments” section will be a chat in the future.

-Ian Jennings, ChatEngine Lead Software Engineer

Vue.js

npm install vue-chat-engine

Vue.js is a Progressive JavaScript framework for building modern UIs in the web browser. Similar to the latest front-end frameworks like React and Angular, Vue.js is reactive and follows the same pattern of Flux and Redux with its own library Vuex. In order to conform to best practices, we have produced a plugin for Vue to integrate ChatEngine with ease.

vue-chat-engine

The ChatEngine plugin for Vue is available on NPM. Integration into an existing Vue app is elegantly implemented in a few lines of code:

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);
    // ...
  },
});

In order to handle events emitted within ChatEngine, the plugin automatically attaches to any Vuex method prepended with CHATENGINE_. For instance a store mutator handler that fires whenever a ChatEngine message event arrives would look like:

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;
    }); 
  },
};

The ChatEngine instance can be accessed from any component using $chatEngine just like $store is referenced for the Vuex store. It is now even easier to build modern chat applications with Vue and ChatEngine.

Next Steps

So, now that we’ve introduced you to our Vue.js plugin, let’s put it to work! We built a working demo and wrote a comprehensive tutorial on building a chat app with Vue.js and ChatEngine. Check it out!

 

Try PubNub Today

Share this on facebookShare this on TwitterShare this on Linkedin