Angularjsチャット
Web、iOS、Androidアプリのメッセージングエクスペリエンスを有効にします。すぐにangularjsと最高のフレームワークIonic、pubnub、phonegap
npm install angular-chatbower install angular-chatテンプレートにAngularチャットファイルを含めます。
< 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' ] ) ; Angularjs-chatを使用するには、リアルタイムサービスへの接続を構成する必要があります。このライブラリには、socket.ioやpubnubなどのリアルタイムサービスプロバイダーを簡単に切り替えることができる依存関係としてRLTM.JSが含まれています。迅速に開始し、InfinityにスケーリングするためにPubnubでセットアップすることをお勧めします。
angular . module ( 'chat' ) . constant ( 'config' , {
rltm : {
service : "pubnub" ,
config : {
"publishKey" : "demo" ,
"subscribeKey" : "demo"
}
}
} ) ; チャットモジュールは、 sendおよびreceiveメソッドを含むMessagesと呼ばれるオブジェクトを公開します。
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
} ) ;
} ;
} ] ) ;このコントローラーでは、メッセージのリストを$scope.messagesに保持し、 Messages.receive()コールバックが呼び出されるたびに新しいメッセージをプッシュします。
インターネット上でメッセージを送信するには、 Messages.send()メソッドを使用し、 `` $ scope.send() `` ``に添付して、domにバインドすることができます。
ビューでは$scope.send()メソッドと$scope.messages変数を使用します。
< 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 >このユーザーの識別を設定します。
Messages . user ( { id : MY_USER_ID , name : sillyname ( ) } ) ;別のユーザーにメッセージを送信します。
Messages . send ( { to : target_user_id , data : message_body } ) ;一時的なランダムユーザーIDが必要な場合は、ユーザーのリストを「グローバル」チャネルに公開し、オンラインになった各ユーザーを受信できます。
すべての訪問者がチャットできるチャットルームの例については、 /examples/basic/index.html index.htmlをご覧ください。
/examples/support-chat/index.htmlおよび/examples/support-chat/admin.htmlは、組み込みサポートタイプのチャットルームの例をご覧ください。 Page index.html 、 admin.htmlでユーザーとのみチャットできます。 Page admin.html 、 index.html上のすべての新しいユーザー向けにチャットルームの新しいインスタンスを作成します。