Receiving messages in AngularJS with the help of Strophe.js

Question

Receiving messages in AngularJS with the help of Strophe.js

My XMPP client in AngularJS, inspired by this stackoverflow link.

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d282e382f1d282e382f7331323e3c31">[email protected]</a>

can send messages successfully, but

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f2f4e2f5c7f2f4e2f5a9ebe8e4e6eb">[email protected]</a>

doesn't receive them as expected when messaging from

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f5fafbe0fcf1e6d4e1e7f1e6baf8fbf7f5f8">[email protected]</a>

.

I'm unsure if I've implemented the addHandler and onMessage functions correctly. Can anyone offer assistance?

<html>
<head>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="strophe.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="init">
    </div>

    <script type="text/javascript">

    BOSH_SERVICE = 'http://localhost/http-bind';
    xmpp_user = "user";
    xmpp_domain = "user.local";
    xmpp_userdomain = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="add8dec8dfedd8dec8df83c1c2cecc91d3c4c8cac7">[email protected]</a>";
    xmpp_password = "userpassword";

    angular.
    module('myApp', []).
    controller('init', function(xmppAuth){
        xmppAuth.auth(xmpp_userdomain,xmpp_password);
    }).
    service('xmppAuth', function() {
        return {
            auth: function(login, password) {
               connect = new Strophe.Connection(BOSH_SERVICE);
               connect.connect(login, password, function (status) {
                   if (status === Strophe.Status.CONNECTED) {
                        console.log("Connection successful");

                        //trying to send message
                        var message = "Hello";
                        var to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b0bfbea5b9b4a391a4a2b493dfaabda9bab295d7a0acaead">[email protected]</a>";
                        if(message && to){
                            var reply = $msg({
                                to: to,
                                type: 'chat'
                            })
                            .cnode(Strophe.xmlElement('body', message)).up()
                            .c('active', {xmlns: "http://jabber.org/protocol/chatstates"});
                            connect.send(reply);
                            console.log('Sent message to ' + to + ': ' + message);
                        }

                        //adding handler for receiving messages
                        connect.addHandler(onMessage, null, "message", null, null, null);
                        var onMessage = function (message){
                            console.log('Received message');
                            return true;
                        }

                   }
               })
            }
        }
    })

    </script>
</body>
</html>

javascript angularjs xmpp strophe

Answer 1

Answer №1

UPDATE: I have successfully integrated the on_presence and on_message functions within the controller, resulting in successful functionality!

<html>
<head>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="strophe.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="init">
    </div>

    <script type="text/javascript">

    BOSH_SERVICE = 'http://localhost/http-bind';
    xmpp_user = "user";
    xmpp_domain = "user.local";
    xmpp_userdomain = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354046504775404650471b595a565459">[email protected]</a>";
    xmpp_password = "userpassword";

    angular.
    module('myApp', []).
    controller('init', function(xmppAuth){
        xmppAuth.auth(xmpp_userdomain,xmpp_password);

        on_presence = function (presence){
            console.log('presence');
            return true;
        }

        on_message = function (message){
            //console.log('message');
            console.log(message);
            return true;
        }
    }).
    service('xmppAuth', function() {
        return {
            auth: function(login, password) {
               connect = new Strophe.Connection(BOSH_SERVICE);
               connect.connect(login, password, function (status) {
                   if (status === Strophe.Status.CONNECTED) {
                        console.log("auth pass");

                        //try send helo
                        var message = "helo";
                        var to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b8b7b6adb1bcab99acaabcabf7b5b6bab8b5">[email protected]</a>";
                        if(message && to){
                            var reply = $msg({
                                to: to,
                                type: 'chat'
                            })
                            .cnode(Strophe.xmlElement('body', message)).up()
                            .c('active', {xmlns: "http://jabber.org/protocol/chatstates"});
                            connect.send(reply);
                            console.log('I sent ' + to + ': ' + message);
                        }

                        //addhandler receive messg
                        connect.addHandler(onMessage, null, "message", null, null, null);
                        var onMessage = function (message){
                            console.log('message');
                            return true;
                        }

                   }
               })
            }
        }
    })

    </script>
</body>
</html>

Answer 2

UPDATE: I have successfully integrated the on_presence and on_message functions within the controller, resulting in successful functionality!

<html>
<head>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="strophe.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="init">
    </div>

    <script type="text/javascript">

    BOSH_SERVICE = 'http://localhost/http-bind';
    xmpp_user = "user";
    xmpp_domain = "user.local";
    xmpp_userdomain = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354046504775404650471b595a565459">[email protected]</a>";
    xmpp_password = "userpassword";

    angular.
    module('myApp', []).
    controller('init', function(xmppAuth){
        xmppAuth.auth(xmpp_userdomain,xmpp_password);

        on_presence = function (presence){
            console.log('presence');
            return true;
        }

        on_message = function (message){
            //console.log('message');
            console.log(message);
            return true;
        }
    }).
    service('xmppAuth', function() {
        return {
            auth: function(login, password) {
               connect = new Strophe.Connection(BOSH_SERVICE);
               connect.connect(login, password, function (status) {
                   if (status === Strophe.Status.CONNECTED) {
                        console.log("auth pass");

                        //try send helo
                        var message = "helo";
                        var to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b8b7b6adb1bcab99acaabcabf7b5b6bab8b5">[email protected]</a>";
                        if(message && to){
                            var reply = $msg({
                                to: to,
                                type: 'chat'
                            })
                            .cnode(Strophe.xmlElement('body', message)).up()
                            .c('active', {xmlns: "http://jabber.org/protocol/chatstates"});
                            connect.send(reply);
                            console.log('I sent ' + to + ': ' + message);
                        }

                        //addhandler receive messg
                        connect.addHandler(onMessage, null, "message", null, null, null);
                        var onMessage = function (message){
                            console.log('message');
                            return true;
                        }

                   }
               })
            }
        }
    })

    </script>
</body>
</html>

Answer 3

Answer №2

Based on the link provided, it seems that upon successful authentication, you should set the presence status to online.

var handlePresence = function(presence) {
    // Perform some actions
    return true;
};

According to the XMPP protocol, it is possible that the recipient needs to be set as online before receiving any messages.

Answer 4

Based on the link provided, it seems that upon successful authentication, you should set the presence status to online.

var handlePresence = function(presence) {
    // Perform some actions
    return true;
};

According to the XMPP protocol, it is possible that the recipient needs to be set as online before receiving any messages.

Receiving messages in AngularJS with the help of Strophe.js

Answer №1

Answer №2

Similar questions

Guide to continuously polling a GET request in JavaScript until the response status is successful

Extra assistance might be required to manage the output from these loaders

Modal window closed - back to the top of the page

Allowing certain routes to be processed by Groovy while others are managed by react-router v4

Swap out a div identifier and reload the page without a full page refresh

Switch up the picture when you press on it

How should .has(), .get() and .set() be properly implemented for a JavaScript Map() within an ExpressJS server?

Attach a click event listener to content loaded through AJAX using only JavaScript, without relying on jQuery

Ways to retrieve the value of the chosen radio button using Prototype or JQuery

showing sections that collapse next to each other

When refreshing, the useEffect async function will not execute

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server

What is the best way to handle multiple axios calls with pagination in a React application?

Utilizing Angular to bind a variable as an index for another variable within markup

What is the process for obtaining an API Key in order to access a service prior to authorization?

What is the best way to merge two ajax functions into a single function?

Issue: TableHead inside an Expandable Row in MUI-Datatable is being duplicated for each row, causing the table to not be centered.Explanation: The

Selected jQuery plugin is not updating HTML select option

Importing JSON data into JavaScript

Looking for jQuery bbq... is the grill fired up yet?