angularjs chat
2.0.0
AngularJS -Chat
Aktivieren Sie Messaging -Erfahrungen für Web-, iOS- und Android -Apps. Kurz kommen AngularJs und die besten Frameworks Ionic, Pubnub, PhoneGap
npm install angular-chatbower install angular-chatGeben Sie die Angular -Chat -Dateien in Ihre Vorlage ein.
< 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' ] ) ; Um AngularJS-CHAT zu verwenden, müssen Sie eine Verbindung zu einem Echtzeitdienst konfigurieren. Diese Bibliothek umfasst RLTM.JS als Abhängigkeit, mit der Sie leicht zwischen Echtzeit -Dienstleister wie Socket.io und Pubnub wechseln können. Wir empfehlen, mit Pubnub einzurichten, um schnell loszulegen und in Unendlichkeit zu skalieren.
angular . module ( 'chat' ) . constant ( 'config' , {
rltm : {
service : "pubnub" ,
config : {
"publishKey" : "demo" ,
"subscribeKey" : "demo"
}
}
} ) ; Das Chat -Modul enthüllt ein Objekt namens Messages , das eine send und receive enthält.
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 diesem Controller führen wir eine Liste von Nachrichten in $scope.messages und geben jedes Mal eine neue Nachricht, wenn die Messages.receive() .
Um eine Nachricht über das Internet zu senden, verwenden wir die Messages.send() -Methode und fügen sie an "" "$ scope.send ()` `` `hinzu, damit wir sie an die DOM Bindung aufrufen können.
Wir verwenden die Methode $scope.send() und $scope.messages variable in unserer Ansicht.
< 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 >Legen Sie eine Identifikation für diesen Benutzer fest.
Messages . user ( { id : MY_USER_ID , name : sillyname ( ) } ) ;Senden Sie eine Nachricht an einen anderen Benutzer.
Messages . send ( { to : target_user_id , data : message_body } ) ;Wenn Sie zufällige Benutzer -IDs vorübergehend sind, können Sie die Liste der Benutzer in den "globalen" Kanal veröffentlichen und jeden Benutzer empfangen, der online gekommen ist.
Schauen Sie sich /examples/basic/index.html für ein Beispiel für einen Chatroom an, in dem jeder Besucher chatten kann.
Schauen Sie sich /examples/support-chat/index.html und /examples/support-chat/admin.html an, um ein Beispiel für einen eingebetteten Support-Chatroom zu erhalten. Der Page index.html kann nur mit dem Benutzer unter admin.html chatten. Die Seite admin.html erstellt eine neue Instanz eines Chatrooms für jeden neuen Benutzer auf index.html .
