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
.