We're hiring
Products

Channels

Beams

Chatkit

DocsTutorialsSupportCareersPusher Blog
Sign InSign Up
Products

Channels

Build scalable, realtime features into your apps

Features Pricing

Beams

Send push notifications programmatically at scale

Pricing

Chatkit

Build chat into your app in hours, not days

Pricing
Developers

Docs

Read the docs to learn how to use our products

Channels Beams Chatkit

Tutorials

Explore our tutorials to build apps with Pusher products

Support

Reach out to our support team for help and advice

Status

Check on the status of any of our products

Products

Channels

Build scalable, realtime features into your apps

Features Pricing

Beams

Send push notifications programmatically at scale

Pricing

Chatkit

Build chat into your app in hours, not days

Pricing
Developers

Docs

Read the docs to learn how to use our products

Channels Beams Chatkit

Tutorials

Explore our tutorials to build apps with Pusher products

Support

Reach out to our support team for help and advice

Status

Check on the status of any of our products

Sign InSign Up

Build a live customer support app with Symfony and Vue - Part 1: Setting up the project

  • Gideon Onwuka
January 28th, 2019
You will need PHP 7.1+, Node 8.9+, Vue 2.x and Symfony 4.1. Some familiarity with PHP will be helpful.

We don't need to write much code for chat apps any longer. Over time, we have utilized Channels to build our awesome chat apps. But we had to write most of the logic ourselves. We had to set up a database to store chat messages, write code to know when a user is online, know when a user is typing and many other chat features.

It's entirely different using Chatkit. By default, Chatkit brings out of the box most of all those features we needed to write ourselves.

In this two-part series, I will walk you through building a chat app using Chatkit. Along the line, we'll build a customer live support app. The app will help us interact with our customers so we can respond to their needs. We'll use the Symfony PHP framework for the backend while Vue handles the frontend DOM rendering.

This tutorial consist of two parts:

  • Part one - we'll go through a step by step approach to set up a Symfony and a Vue.js app. Here, we'll make sure your machine has the basic requirements.
  • Part two - we’ll design and build up the user interface, set up Chatkit and make sure the app works.

Here is a preview of what we’ll be building:

Prerequisites

This tutorial uses the following:

  • PHP version 7.1 or higher
  • Symfony version 4.1
  • Composer (You can get the latest version)
  • Vue.js version 2.x
  • Node.js version 8.9 or above
  • Yarn version 1.7.0 or higher

To follow along with this tutorial, you should have a basic understanding of the PHP language. Knowledge of the Symfony framework is not entirely required. I will assume you have some knowledge of Vue.js otherwise you can go through the basics on the doc to get you up to speed in a couple of minutes.

Let's get started.

Setting up the project

First of all, open up a terminal and make sure you have PHP installed by typing the below command:

    $ php --version

This should print out the version of PHP you have installed, otherwise, you need to install PHP. We are using Symfony 4.1 to build this app which requires PHP 7.1.3 or higher to run.

Next, make sure you have Composer installed on your machine:

    $ composer --version

If the command does not print out the version of the composer that you have installed, this means you need to install Composer. You can do that here.

Next, create a new folder that will contain the files of the project in any convenient location on your system and then change your directory to the folder:

    $ mkdir live-support && cd live-support

Creating a Symfony project

Next, initialize a Symfony project through Composer:

    $ composer create-project symfony/website-skeleton .

This will download some dependencies into the project folder and generate the basic directories and files we need to get started.

Now start up the server:

    $ php -S localhost:9030 -t public

If everything goes well, the app will now be accessible from http://localhost:9030. Open your browser and navigate to the URL, you should see a welcome page like so:

Do not close the terminal so that we can be observing changes while we build along.

Open a new terminal and add a package that will enable us to use [annotations](http://composer require annotations) to create our routes:

     $ composer require annotations

Getting your Chatkit API keys

To start using Chatkit, we need an API key. Register an account if you don't have one already, otherwise log in to your dashboard.

Once you are logged in and on the dashboard:

  • Create a new app instance by:
    • Clicking the CREATE button in the CHATKIT area to create a new instance. You will get a popup.
    • Fill in the name of the instance as “live-support” or any name you prefer.

  • Then submit the form by clicking on the CREATE button.
  • After submitting the form, you will be taken to a new page where you will find your ChatKit credentials.
    • Click on the Credentials tab.

  • Copy out your Instance Locator key and your Secret Key. Add them to the .env file as below:
    CHATKIT_INSTANCE_LOCATOR=YOUR_CHATKIT_INSTANCE_LOCATOR
    CHATKIT_KEY=YOUR_CHATKIT_SECRET_KEY

Make sure to replace YOUR_CHATKIT_INSTANCE_LOCATOR and YOUR_CHATKIT_SECRET_KEY placeholders with their actual values.

  • Also, create a new file named config.js, then add the instance locator key to it:
    export default {
        instanceLocator: 'YOUR_CHATKIT_INSTANCE_LOCATOR',
    }

We want to be able to use this key within our Vue component without adding the key directly to the code. Make sure to replace YOUR_CHATKIT_INSTANCE_LOCATOR placeholder with the actual value.

Adding Vue to the project

The next thing we'll do now is to add Vue to the project.

Install WebPack Encore by executing the below command:

    $ composer require encore

Webpack encore is a simpler way to integrate Webpack into Symfony applications.

Next, install the dependencies:

    $ yarn install

Install the required packages for Vue:

    $ yarn add vue vue-loader@^15.0.11 vue-template-compiler --dev

Then update webpack.config.js as follows:

    // ./webpack.config.js

    var Encore = require('@symfony/webpack-encore');

    Encore
        // directory where compiled assets will be stored
        .setOutputPath('public/build/')
        // public path used by the web server to access the output path
        .setPublicPath('/build')
        /*
         * ENTRY CONFIG
         *
         * Add 1 entry for each "page" of your app
         * (including one that's included on every page - e.g. "app")
         *
         * Each entry will result in one JavaScript file (e.g. app.js)
         * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
         */
        .addEntry('app', './assets/js/app.js')
        .enableVueLoader()
        /*
         * FEATURE CONFIG
         *
         * Enable & configure other features below. For a full
         * list of features, see:
         * https://symfony.com/doc/current/frontend.html#adding-more-features
         */
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())
        // enables hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
    ;

    module.exports = Encore.getWebpackConfig();

We enabled the Vue loader by adding the *.*``enableVueLoader() line so that any .vue file can be compiled.

Finally, run the dev server:

    $ yarn encore dev-server --hot

Don’t close the terminal, so that all changes we do to the .vue files will be picked up and updated automatically.

For the app, we'll have two pages. A page for clients that everyone can access to chat and a page for admin which is limited to only admins.

We'll create two main component for the app pages:

  • Client.vue. This will be the main component that will house all other components, which will make up the client facing view of the app.
  • Admin.vue. This component will accommodate all component that will constitute the admin page.

First, create a folder named components in the assets/js folder where we'll put all our Vue components.

Then, create two new files named Admin.vue and Client.vue in the components folder you just created.

Next, include the components in the assets/js/app.js file:

    // ./assets/js/app.js

    [...]

    import Vue from 'vue';

    Vue.component('client-chat', require('./components/Client.vue').default );
    Vue.component('admin-chat', require('./components/Admin.vue').default );

    const app = new Vue({
        el: '#app',
    });

In the code above, we first imported Vue. Then, we require the two component files we created and named it chat-app and admin-chat respectively.

If we need to add the client view, we’ll add <client-chat> </client-chat> to the HTML file where we want it to show likewise admin-chat.

Finally, we created a Vue instance to target an app element in the body of the HTML.

Install the Chatkit library and SDK

Next, add the Chatkit JavaScript library using:

    $ yarn add @pusher/chatkit-client

Then, add the PHP SDK. Install it via Composer using:

    $ composer require pusher/pusher-chatkit-server

And that’s it! we are now ready to start building our chat application.

Conclusion

In the part one of this tutorial series, we have been able to set up our working environment for the project. We added Symfony and Vue to the project. While Symfony takes care of the server side job, Vue will sit on the frontend to handle DOM manipulations. In the second part of the tutorial, we'll build the full app and go through Chatkit features for building the chat application.

You can also grab the code for this project on GitHub.

Clone the project repository
  • Chat
  • JavaScript
  • PHP
  • Vue.js
  • Chatkit

Products

  • Channels
  • Beams
  • Chatkit

© 2019 Pusher Ltd. All rights reserved.

Pusher Limited is a company registered in England and Wales (No. 07489873) whose registered office is at 160 Old Street, London, EC1V 9BW.