Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

 1 Answer(s)

  • I have converted code from above link into this:

    View file

    <html>
    <head>
        <style type="text/css">
            body {background-color: #ccc; padding: 20px;}
        </style>
        <script type='text/javascript' src='../bower&#95;components/jquery/dist/jquery.min.js'></script>
        <script type='text/javascript' src='../bower&#95;components/angular/angular.min.js'></script>
        <script type="text/javascript" src="../strophe.js"></script>
        <script type="text/javascript" src="customstrophe.js"></script>
    
    </head>
    
    <body ng-app="StropheApp">
        <div ng-controller="stropheController">
            <div id="fb-root"></div>
            <div id='login' style='text-align: center'>
                <form name='cred'>
                    <label for='jid'>JID:</label>
                    <input type='text' ng-model="jid" id='jid' value="">
                    <label for='pass'>Password:</label>
                    <input type='password' ng-model="passwd" id='pass' value="">
                    <input type='button' id='connect' value='connect' ng-click="connectXmpp()">
                </form>
    
                <label for='to'>
                    to:
                </label>
                <input type='text' ng-model="to" id='to'>
                <label for='message'>
                    message:
                </label>
                <input type='text' ng-model="message" id='message'>
                <input type='button' id='send' value='send' ng-click="sendMsg()">
            </div>
            <hr>
            <ul id='log'>
                <div>{{logMsg}}</div>
                <div>{{msgStatus}}</div>
                <div>{{messg}}</div>
                <div>{{onMesg1}}</div>
                <div>{{onMesg2}}</div>
            </ul>
        </div>
    </body>
    </html>
    

    Controller file

    angular.module( "StropheApp", [] ).controller( "stropheController", function( $scope ) {
        var BOSH&#95;SERVICE = 'http://localhost:5280/http-bind/';
        var connection = null;
        $scope.jid = "something@example.com";
        $scope.passwd = "*****";
        connection = new Strophe.Connection(BOSH&#95;SERVICE);
        $scope.connectXmpp = function () {
            var button = $('#connect').get(0);
            if (button.value == 'connect') {
                button.value = 'disconnect';
                $scope.logMsg = "kkk";
                connection.connect($scope.jid, $scope.passwd, $scope.onConnect);
            } else {
                button.value = 'connect';
                connection.disconnect();
            }
        };
    
        $scope.onConnect=function(status)
        {   $scope.status = status;
            setTimeout(function () {
            $scope.$apply(function () {
                $scope.status = status;
                });
            }, 100);
    
            if (status == Strophe.Status.CONNECTING) {
                $scope.logMsg = "Strophe is connecting.";
            } else if (status == Strophe.Status.CONNFAIL) {
                $scope.logMsg = "Strophe failed to connect.";
                $('#connect').get(0).value = 'connect';
            } else if (status == Strophe.Status.DISCONNECTING) {
                $scope.logMsg = "Strophe is disconnecting.";
            } else if (status == Strophe.Status.DISCONNECTED) {
                $scope.logMsg = "Strophe is disconnected.";
                $('#connect').get(0).value = 'connect';
            } else if (status == Strophe.Status.CONNECTED || status === Strophe.Status.ATTACHED) {
                $scope.logMsg = "Strophe is connected.";
                $scope.msgStatus = 'ECHOBOT: Send a message to ' + connection.jid + ' to talk to me.';
                connection.addHandler(onMessage, null,    'message', null, null,  null);
                connection.send($pres().tree());
            }
        };
    
        $scope.sendMsg = function (){
            if($scope.message && $scope.to){
                var reply = $msg({
                    to: to,
                    type: 'chat'
                })
                .cnode(Strophe.xmlElement('body', message)).up();
                connection.send(reply);
                $scope.messg = 'I sent ' + $scope.to + ': ' + $scope.message;
    
            }
        };
    
        function onMessage(msg) {
            var to = msg.getAttribute('to');
            var from = msg.getAttribute('from');
            var type = msg.getAttribute('type');
            var elems = msg.getElementsByTagName('body');
    
            if (type == "chat" && elems.length > 0) {
                        var body = elems[0];
                        $scope.onMesg1 = 'ECHOBOT: I got a message from ' + from + ': ' +Strophe.getText(body);
                        var text = Strophe.getText(body) + " (this is echo)";
                        $scope.onMesg2 = 'ECHOBOT: I sent ' + from + ': ' + Strophe.getText(body);
            }
            return true;
        }
    } );
    


    Hope this will help you..

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: