Skip to content
Object oriented event emitter based framework for building chat applications in Javascript.
Branch: develop
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_docs Chat/docs revamp (#397) Oct 12, 2018
dist 0.9.18 - Patch entry points for web/node (#382) Jul 18, 2018
guide Rm getting-started. Added PN app setup to install. (#454) May 15, 2019
scripts Tool/ce docs deploy to gh pages (#448) Apr 26, 2019
src Client changes to make event-status work [CHAT-506] (#434) Jan 24, 2019
test Refactor itest to work with new modular CE server. [CHAT-704] (#446) Mar 19, 2019
.eslintignore ecma6 the setup Nov 8, 2017
.eslintrc.yml CHAT-307 Use tests to document $.created augmentation (#365) May 30, 2018
.gitignore Advanced Concepts, Cleanup Docs, and Refactor Docs Outline (#402) Oct 19, 2018
.npmignore Add concepts, plugin previews, and more details to readme (#358) Apr 27, 2018
.pubnub.yml Correcting typos and updated version (#452) May 15, 2019
.travis.yml Tool/ce docs deploy to gh-pages branch (#447) Apr 25, 2019
LICENSE
README.md Wording changes in the README (#455) May 15, 2019
doc.json Chat/docs revamp (#397) Oct 12, 2018
gulpfile.js Added 'exit': true flag to stop hanging connections in mocha tests. (#… Jan 22, 2019
jsdoc.json Tool/ce docs deploy to gh pages (#448) Apr 26, 2019
package.json Add PN CE LICENSE (#457) May 17, 2019
webpack.config.js RE: Support ticket 6465 - swap from using babel preset 'env' to 'es20… May 30, 2018

README.md

PubNub ChatEngine Framework

Build Status Codacy Badge Codacy Badge

PubNub ChatEngine is an object-oriented event emitter based framework for building chat applications in Javascript. It reduces the time to build chat applications drastically and provides essential components like typing indicators, online presence monitoring and message history out of the box.

The real-time server component is provided by PubNub. ChatEngine is designed to be extensible and includes a plugin framework to make adding new features simple.

For more information on building chat applications with PubNub, see our Chat Resource Center.

Documentation

You can find the full docs on the documentation website.

Getting Started

Prerequisites

  • NodeJS
  • Twitter Bootstrap
  • jQuery

PubNub Account Set Up

To set up ChatEngine on PubNub, one must first set up a PubNub Key. The following steps outlines how to manually set up a PubNub Key to work with ChatEngine client-side SDKs.

Sign Up for a PubNub Account

If you don't already have an account, you can create one for free here.

Set Up the REST API Service using PubNub Functions

The ChatEngine framework and client-side SDKs interact with a REST API service that runs as a PubNub Function.

You'll need to set up the function on your PubNub Account before you can use the SDKs.

Follow the ChatEngine Server Setup Instructions.

Download Code

Create a new NPM project

Since we'll be installing dependencies, it's helpful to create a new package.json to keep track of all of the packages we're going to install.

In your project directory, run this command to create a new package. Complete the interactive set up guide and we'll be ready to go.

npm init

That'll create a package.json in your project directory.

{
  "name": "chat-engine-tutorial",
  "version": "0.0.1",
  "description": "An example PubNub ChatEngine Tutorial",
  "main": "index.js",
  "author": "Ian Jennings"
}

Install PubNub ChatEngine

Alright, now for the part you've probably never done before! Install PubNub ChatEngine by running:

npm install chat-engine@latest --save

Additional Resources

Plugins

Check out the jQuery Kitchen Sink and Angular Kitchen Sink examples to see plugins in action.

Videos

Tutorials

Javascript

  • Getting Started tutorial.
  • Chat - Really simple chat example. The "hello world" of ChatEngine.
  • Online List - No chats, just renders who is online. See the Kitchen Sinks for how to combine this with private chats.

React Native + Mobile

React

  • React - Bare bones react web example.

Vue

  • Vue Guide - Guide on using ChatEngine and Vue together. Uses the following resources.
  • Vue Example - Full featured ChatEngine vue example.
  • Vue Plugin - ChatEngine plugin for vue.

Angular

  • Angular Simple - Angular "Hello World" app. Simple app that uses a custom Angular plugin to render when anything updates.
  • Angular Kitchen Sink - The largest demo app out there, almost a complete Desktop Team Chat clone (Slack, Stride, Flowdock). Persistent URLs and renders into a real desktop app with Electron!

jQuery

  • jQuery Simple - jQuery ChatEngine "Hello World" app. A simple app where everyone chats together.
  • jQuery Kitchen Sink - Huge example that uses most ChatEngine features. Has an online list that spawns new chats when you click on usernames.

3rd Party Authentication

NodeJS + Chatbot

  • NodeJS ChatBot - An example bot that responds to messages and emulates typing. Works with the jQuery Kitchen Sink example by default.

Development

Cloning

Clone repos (chat-engine and plugins).

All repos should be siblings of one another. This is required for rendering docs properly.

chat-engine
chat-engine-desktop-notifications
chat-engine-emoji
chat-engine-examples
//...

Setting up the Environment

nvm use v6

Run http-server from my /development directory which has all chat-engine repos:

cd chat-engine

node server.js

Load http://localhost:8080 in browser and navigate to /chat-engine-examples/jquery/kitchen-sink

Compiling

Run gulp to compile, but you should probably run gulp watch to get consistent changes.

Running Tests

You will need to assign environment variables PUB_KEY_0 and SUB_KEY_0 to your own PubNub keys. Add these variables into your .bashrc or .zshrc.

# pubnub chatengine keys
export PUB_KEY_0="YOUR PUBNUB PUBLISH KEY"
export SUB_KEY_0="YOUR PUBNUB SUBSCRIBE KEY"

Then, in the root folder run:

gulp test

Releasing a patch (chat engine and plugins)

npm version patch && git push origin master --tags

Support

  • If you need help, have a general question, have a feature request or to file a bug, contact support@pubnub.com
You can’t perform that action at this time.