ดาวน์โหลด angularjs chat - angularjs chat ซอร์สโค้ดดาวน์โหลด

angularjs chat

โค้ดแหล่งที่มา AI

2.0.0

ดาวน์โหลด

angularjs แชท

angularjs แชท

เปิดใช้งานประสบการณ์การส่งข้อความสำหรับแอพเว็บ iOS และ Android เร็ว ๆ นี้ AngularJs และเฟรมเวิร์กที่ดีที่สุด ionic, pubnub, phonegap

การติดตั้ง NPM

npm install angular-chat

การติดตั้ง Bower

bower 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"
        }
    }
} ) ;

ตัวอย่างคอนโทรลเลอร์

โมดูลแชทเปิดเผยวัตถุที่เรียกว่า Messages ซึ่งมีวิธี send และ 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 
        } ) ;
    } ;
} ] ) ;

ในคอนโทรลเลอร์นี้เราเก็บรายการข้อความไว้ใน $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 ตัวอย่าง/basic/index.html สำหรับตัวอย่างของห้องแชทที่ผู้เยี่ยมชมทุกคนสามารถแชทได้

สนับสนุนโต๊ะ (หลายต่อหนึ่ง) ตัวอย่าง

ตรวจสอบ /examples/support-chat/index.html และ /examples/support-chat/admin.html สำหรับตัวอย่างของห้องแชทประเภทสนับสนุนแบบฝังตัว page index.html สามารถแชทกับผู้ใช้บน admin.html เท่านั้น Page admin.html สร้างอินสแตนซ์ใหม่ของห้องแชทสำหรับผู้ใช้ใหม่ทุกคนบน index.html