search

stephenlb / angularjs-chat

AngularJS Chat - Enable chat messaging experiences in your iOS, Android and Web apps.
https://stephenlb.github.io/angularjs-chat/
MIT License
73 stars 64 forks source link
angular chat socket

readme

AngularJS Chat

AngularJS Chat

Enable messaging experiences for Web, iOS and Android apps. Coming Soon AngularJS and the best frameworks Ionic, PubNub, PhoneGap

AngularJS Chat Website

NPM Install

npm install angular-chat

Bower Install

bower install angular-chat

Include the files

Include the angular chat files in your template.

<script src="https://github.com/stephenlb/angularjs-chat/raw/master/bower_components/angular/angular.js"></script>
<script src="https://github.com/stephenlb/angularjs-chat/raw/master/bower_components/rltm/web/rltm.js"></script>
<script src="https://github.com/stephenlb/angularjs-chat/raw/master/bower_components/angular-chat/angular-chat.js"></script>

Include the Angular module

var chat = angular.module('BasicChat', ['chat']);

Configure

In order to use angularjs-chat, you must configure a connection to a realtime service. This library includes rltm.js as a dependency which lets you switch between realtime service providers like Socket.io and PubNub easily. We recommend setting up with PubNub to get started quickly and scale to infinity.

angular.module('chat').constant('config', {
    rltm: {
        service: "pubnub",
        config: {
            "publishKey": "demo",
            "subscribeKey": "demo"
        }
    }
});

Example Controller

The chat module exposes an object called Messages which includes a send and receive method. 

chat.controller( 'chat', [ 'Messages', '$scope', function( Messages, $scope ) {
    // Message Inbox
    $scope.messages = [];
    // Receive Messages
    Messages.receive(function(message) {
        $scope.messages.push(message);
    });
    // Send Messages
    $scope.send = function() {
        Messages.send({ 
            data: $scope.textbox 
        });
    };
}]);

In this controller we keep a list of messages in $scope.messages and push a new message every time the Messages.receive() callback is called.

To send a message over the Internet, we use the Messages.send() method and attach it to ```$scope.send()```` so we can call bind it to the DOM.

Create your view

We use the $scope.send() method and $scope.messages variable in our view.

<div ng-app="BasicChat">
    <div ng-controller="chat">
        <div ng-repeat="message in messages">
            <strong>{{message.user.name}}:</strong>
            <span>{{message.data}}</span>
        </div>
        <form ng-submit="send()">
            <input ng-model="textbox">
        </form>
    </div>
</div>

Set User ID

Set some identification for this user.

Messages.user({ id: MY_USER_ID, name : sillyname() });

Send to User

Send a message to another user.

Messages.send({ to: target_user_id, data : message_body });

If you want random user id's that are transient... you can publish the LIST of users to the "global" channel and receive each user who has come online.

Basic Example

Check out /examples/basic/index.html for an example of a chatroom that every visitor can chat in.

Support Desk (many to one) Example

Check out /examples/support-chat/index.html and /examples/support-chat/admin.html for an example of a embedded support type chatroom. The page index.html can only chat with the user on admin.html. The page admin.html creates a new instance of a chatroom for every new user on index.html.

AngularJS Chat Resources