Chat angularjs
Activez les expériences de messagerie pour les applications Web, iOS et Android. À venir bientôt angularjs et les meilleurs frameworks ionic, pubnub, phonegap
npm install angular-chatbower install angular-chatIncluez les fichiers de chat angulaires dans votre modèle.
< 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' ] ) ; Afin d'utiliser AngularJS-chat, vous devez configurer une connexion à un service en temps réel. Cette bibliothèque comprend Rltm.js comme dépendance qui vous permet de basculer entre les fournisseurs de services en temps réel comme Socket.io et PubNub facilement. Nous vous recommandons de m'installer avec PubNub pour commencer rapidement et évoluer vers l'infini.
angular . module ( 'chat' ) . constant ( 'config' , {
rltm : {
service : "pubnub" ,
config : {
"publishKey" : "demo" ,
"subscribeKey" : "demo"
}
}
} ) ; Le module de chat expose un objet appelé Messages qui comprend une méthode send et receive .
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
} ) ;
} ;
} ] ) ; Dans ce contrôleur, nous conservons une liste de messages dans $scope.messages et poussons un nouveau message chaque fois que le rappel Messages.receive() est appelé.
Pour envoyer un message sur Internet, nous utilisons la méthode Messages.send() et la joignons à `` `$ scope.send () ''` afin que nous puissions appeler le lier au DOM.
Nous utilisons la méthode $scope.send() et $scope.messages variable à notre avis.
< 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 >Définissez une certaine identification pour cet utilisateur.
Messages . user ( { id : MY_USER_ID , name : sillyname ( ) } ) ;Envoyer un message à un autre utilisateur.
Messages . send ( { to : target_user_id , data : message_body } ) ;Si vous voulez des ID utilisateur aléatoires transitoires ... vous pouvez publier la liste des utilisateurs sur la chaîne "globale" et recevoir chaque utilisateur qui est venu en ligne.
Consultez /examples/basic/index.html index.html pour un exemple de discussion dans laquelle chaque visiteur peut discuter.
Consultez /examples/support-chat/index.html -chat/index.html et /examples/support-chat/admin.html support-chat/admin.html pour un exemple de chat de type de type de support intégré. La page index.html ne peut discuter qu'avec l'utilisateur sur admin.html . La page admin.html crée une nouvelle instance d'une salle de discussion pour chaque nouvel utilisateur sur index.html .