Angularjs 채팅
웹, iOS 및 Android 앱에 대한 메시징 경험을 활성화하십시오. 곧 앵글 르즈 및 최고의 프레임 워크 Ionic, Pubnub, PhoneGap
npm install angular-chatbower install angular-chat템플릿에 각도 채팅 파일을 포함시킵니다.
< 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을 사용하려면 실시간 서비스에 대한 연결을 구성해야합니다. 이 라이브러리에는 RLTM.JS가 포함되어있어 Socket.io 및 PubNub와 같은 실시간 서비스 제공 업체간에 쉽게 전환 할 수 있습니다. 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 ()````````````````` ''에 첨부를 첨부하십시오.
우리는 $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 확인하십시오.
포함 된 지원 유형 채팅방의 예는 /examples/support-chat/index.html 및 /examples/support-chat/admin.html 확인하십시오. Page index.html admin.html 에서 사용자와 만 채팅 할 수 있습니다. Page admin.html index.html 의 모든 새 사용자에 대한 채팅방의 새 인스턴스를 만듭니다.