This is a full AngularJS chat app built with PubNub
- Load earlier messages with infinite scroll
- Typing indicator
- Realtime user roster
- OAuth 2.0 authentication flow with Github OAuth
- Private and secure communication
- Friends list
- Direct chat
- Sending pictures
- Group chat
- AES-256 encryption
- Digital Signature Message Verification
- IOS / Android native packaging with Ionic
- ...
Learn how to build this chat app by following these easy-to-follow tutorials:
- Getting started with PubNub’s new AngularJS SDK
- Building an AngularJS Chat App Using History API with Infinite Scroll
- Building an AngularJS Chat App with a User Roster Using Presence API
- Displaying a Typing Indicator in Your AngularJS Chat App Using Custom State API
- AngularJS User Authentication with OAuth 2.0 and Access Manager
- Building a Friend List using Advanced Channel Groups
- Visit https://github.com/settings/profile
- Select OAuth applications in the left panel
- Go to Developer applications tab, then click on the Register new application button
- Application name: Your app name
- Homepage URL: http://localhost:3000
- Authorization callback URL: http://localhost:3000
- Click on the Register application button
- Get your
Client ID
andClient Secret
- Visit https://admin.pubnub.com/ to login or create an account
- Click on the New app button and give it a name.
- Click on the Create new keyset button and give it a name
- Get your
Publish Key
,Subscribe Key
andSecret Key
- Insert your PubNub keys, OAuth keys and server configuration in a
client/config.json
file.
There is an example in theclient/sample.config.json
or below is how this file looks like:
{
"PUBNUB_SUBSCRIBE_KEY": "sub-c-61b076f2-fed0-...............",
"PUBNUB_PUBLISH_KEY": "pub-c-d22410bf-edc6-44fb-............",
"GITHUB_CLIENT_ID": "1e439e............",
"GITHUB_REDIRECT_URI": "http://localhost:9000/",
"GITHUB_ACCESS_TOKEN_REQUEST_URL": "http://localhost:3000/auth/github",
"SERVER_URL": "http://localhost:3000/"
}
- Execute the following commands in your terminal:
cd client
bower install
npm install
grunt serve
Run grunt build
for building the production app
- Insert your PubNub keys, OAuth keys and server configuration in a
server/.env
file.
There is an example in theserver/.sample.env
or below is how this file looks like:
PUBNUB_SUBSCRIBE_KEY=sub-c-61b076f2-fed0-...............
PUBNUB_PUBLISH_KEY=pub-c-d22410bf-edc6-44fb-............
PUBNUB_SECRET_KEY=sec-c-MGM4ZjJkNTYtNzQ1Zi0................
SERVER_PUBNUB_AUTH_KEY=....ANY-RANDOM-STRING.....
GITHUB_CLIENT_ID=1e439e............
GITHUB_CLIENT_SECRET=3c69fde2d90e3............
GITHUB_REDIRECT_URI=http://localhost:9000/
GITHUB_ACCESS_TOKEN_REQUEST_URL=http://localhost:3000/auth/github
- Execute the following commands in your terminal:
cd server
npm install
npm start