Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephenlb/angularjs-chat
AngularJS Chat - Enable chat messaging experiences in your iOS, Android and Web apps.
https://github.com/stephenlb/angularjs-chat
angular chat socket
Last synced: about 4 hours ago
JSON representation
AngularJS Chat - Enable chat messaging experiences in your iOS, Android and Web apps.
- Host: GitHub
- URL: https://github.com/stephenlb/angularjs-chat
- Owner: stephenlb
- License: mit
- Created: 2015-12-30T19:41:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T19:35:03.000Z (over 1 year ago)
- Last Synced: 2024-04-13T21:42:18.435Z (6 months ago)
- Topics: angular, chat, socket
- Homepage: https://stephenlb.github.io/angularjs-chat/
- Size: 14.1 MB
- Stars: 73
- Watchers: 12
- Forks: 64
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# AngularJS Chat
> [AngularJS Chat](http://angular.chat)
Enable messaging experiences for Web, iOS and Android apps.
Coming Soon AngularJS and the best frameworks Ionic, PubNub, PhoneGap
## NPM Install
```shell
npm install angular-chat
```
## Bower Install
```shell
bower install angular-chat
```
## Include the files
Include the angular chat files in your template.
```html
```
## Include the Angular module
```js
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](https://github.com/pubnub/rltm.js#pubnub)
to get started quickly and scale to infinity.
```js
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.
```js
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.
```html
{{message.user.name}}:
{{message.data}}
```
### Set User ID
Set some identification for this user.
```js
Messages.user({ id: MY_USER_ID, name : sillyname() });
```
### Send to User
Send a message to another user.
```js
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
- [AngularJS Chat Website](http://angular.chat)
- [AngularJS Chat Documentation](https://github.com/stephenlb/angularjs-chat/wiki/AngularJS-Chat-Module)
- [AngularJS Chat GitHub](https://github.com/stephenlb/angularjs-chat)
- [Twitter](https://twitter.com/stephenlb)
- [Get PubNub API Keys](https://www.pubnub.com/get-started/?medium=sbng2016&source=sbng2016&campaign=sbng2016&keyword=sbangularjs&content=sbng2016)
- [YouTube](https://www.youtube.com/c/StephenBlum)
- [LinkedIn](https://www.linkedin.com/in/stephenlb)
- [Vine](https://vine.co/Stephen.Blum)
- [G+](https://plus.google.com/+StephenBlum)