AngularJS Chat - Enable chat messaging experiences in your iOS, Android and Web apps.
MIT License
Enable messaging experiences for Web, iOS and Android apps. Coming Soon AngularJS and the best frameworks Ionic, PubNub, PhoneGap
npm install angular-chat
bower install angular-chat
Include the angular chat files in your template.
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/rltm/web/rltm.js"></script>
<script src="bower_components/angular-chat/angular-chat.js"></script>
var chat = angular.module('BasicChat', ['chat']);
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"
}
}
});
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.
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 some identification for this user.
Messages.user({ id: MY_USER_ID, name : sillyname() });
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.
Check out /examples/basic/index.html
for an example of a chatroom that
every visitor can chat in.
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
.