Vue.js Basic Customer Chat Tutorial

This tutorial is for you if you are a software developer. Specifically an Vue.js JavaScript software developer. This walk-through is open source and free; MIT style. You can also get started with the Vue Chat GitHub repository.

Vue.js is an open source JavaScript framework with a massive developer following. Its architecture is considered cutting edge in the web development community because it composes user interfaces of reactive web components. And luckily for you, it’s a perfect framework for building interactive chat applications.

Chat apps are being built and deployed across basically every industry and vertical. And for those industries and verticals, it’s transforming the way consumers and businesses communicate. Who wants to wait on hold on the telephone in 2019? It’s way simpler for customers to contact businesses through text correspondence. This societal change has enabled companies like Intercom.io and LiveAgent to bring in substantial profits as businesses make their customer support teams chat accessible.

PubNub and ChatEngine make building an in-website support chat possible in a remarkably short amount of time. Using modern web UI frameworks like Vue.js make this next programming project or business venture a no-brainer.

This tutorial expands on my first ChatEngine example with Vue.js. The multi-user private chat interface will serve as the support agent view, so a support team can manage incoming messages from all website customers.

Let’s get started building the customer chat user interface that you see in the first picture. Lucky for us, there is a robust, open source Vue package that slashes our design and development time. On npmjs.com and GitHub, you can find Vue-Beautiful-Chat. It currently has over 200 stars and 50 forks on GitHub, so you can say it is in high demand. As a developer, I’m happy to promote it, because working with it is easy.

We will combine Vue-Beautiful-Chat with my multi-user chat and ChatEngine to provide a clean experience for all users. Support team members will be able to sign-in to the protected support page using a username and password. The authentication flow is super simple thanks to PubNub Functions. Below is a diagram of the full stack.

ChatEngine

Before we continue, it’s very important that you first create a ChatEngine key set. ChatEngine runs on top of PubNub. When you sign up for a free PubNub account, you must click the ChatEngine deploy button to configure your app back-end. This is all free for you — up to 1 million PubNub transactions in a month.

The ChatEngine deploy button makes PubNub Functions event handlers for ChatEngine in your PubNub account, and it deploys them to data centers around the world. If you try to use a traditional PubNub key set in your ChatEngine app, it will not work, unless you copy over the Functions and deploy them. It’s easier for you to make a new key set in the form below.

The Customer View

One of my favorite parts about using Vue-Beautiful-Chat is that you can add the component to an existing website, and it will automatically seat itself in the lower right-hand corner of the page, overlapping the existing content. All we need to do to make the UI appear is add a beautiful-chat HTML tag, and pass a series of event handlers and parameters as HTML attributes.

Here is the markup for the customer’s view (src/views/Customer.vue):

All of the event handlers referenced are within the script section of the file. The application’s message data is held in the Vuex Store. This global datastore enables a clean State Management Pattern to separate stateful logic from the visual component’s code.

ChatEngine events are bound to the Vuex store out-of-the-box thanks to the Vue ChatEngine plugin, which this app is also using. Name your store event handlers with CHATENGINE_ prepended for auto registration.

Vuex Data Flow. From vuex.vuejs.org, accessed November 2018.

The store declarations can be found in the src/store.js file.

Making the ChatEngine Instance

In the main.js file, we initialize our Vue app and also configure the ChatEngine object.

Notice that you need to fill in some account specific keys in this file. You need to fill in the PubNub keys that you configured for a ChatEngine app. You also need to include the URL of the support authentication API. This is a secure microservice that allows your support agents to sign in with their username and password. We will need to deploy some server-side JavaScript in the PubNub admin dashboard to continue.

First, go to your PubNub Admin Dashboard and click on your ChatEngine Application. Next, click on the Functions tab on the left side.

Next, click on the existing ChatEngine Function.

You should see the ChatEngine Function endpoint, and at the bottom of the screen, there is a create button. Click create and make a new API endpoint for your new service. Make sure that it is of type On Request. The route should be support-state.

You should now see the endpoint alongside your ChatEngine Endpoint. Click on it so we can add the new JavaScript code.

Once you see the Functions editor, you can add your API code.

Serverless Microservice

Now we add the service code. Copy and paste the code from my repository in the src/pubnub-functions/SupportChatState.js file (it’s also hosted in this GitHub Gist).

You can set your support user’s username and password in SupportChatState.js. It’s in plaintext for example purposes. It’s a better practice to move username and password to the secure PubNub Functions Vault. That way there isn’t sensitive strings in your source code. You can retrieve the keys programmatically during execution.

To globally deploy your new service, click the Restart button in the top right corner. Clicking this button will not harm the state of your existing ChatEngine app, and it will start the 2nd service.

Remember the API URL that we need to set in main.js? In your new API endpoint, click the copy URL button to get the address of the live service. Paste the URL into the code in main.js on line 22 for the variable window.$supportAPI.

Now your application is ready to run! Using your command line, navigate to the directory where you cloned the project with git. If you haven’t already, you will need to install Node.js and npm (do LTS). If you already have your $PATH set up to run node on the command line, go to the project parent directory and run:

npm i
npm run serve

This will boot up a local server on your computer. It will serve your Vue application at http://localhost:8080 by default. Open your web browser to view the app!

The / URL will serve the customer view. You should see the vue-beautiful-chat interface on the lower right corner of the web page. To check out the support user page, open another browser tab and navigate to /support.

The support page is protected by the username and password that you set in your PubNub Functions API code. When you enter the information and click the button, an API request will be made. If the credentials are correct, the Vue app will proceed to the support user chat UI.

Thanks for reading!

Because ChatEngine and Vue.js are both incredibly flexible, you can take this chat far beyond simple customer service. Take the core chat capabilities and make it your own with ChatEngine’s extensive plugin library (file sharing, blocking/muting, SMS/email alerts and notifications). And if you want to explore other use cases or chat more about your project, you can always reach out to us, we’re here to help.

Security

Protecting your users and the data in your chat app is paramount. Taking a couple considerations into mind when building a chat app can save you a ton of headaches down the road. As a realtime messaging backend, PubNub and ChatEngine are built for security first, with end-to-end encryption baked in, as well as access management (via PubNub Access Manager), for fine-grain control over user permissions.

Reliability and Scale

You need to deliver a seamless chat experience for your users, no matter where they are on Earth. PubNub delivers reliability and scale for chat applications, from development, to deployment, to your app becoming the next big thing.

PubNub is globally scaled with 15 points of presence spread across the globe, so you get low-latency chat anywhere on Earth. And with a ton of features focusing on reliability like message catchup/caching and fast, efficient realtime protocols, your chat app scales as your users grow, without all the headaches of maintaining and orchestrating a messaging backend.

Originally published at vuejs.chat.