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

Switching between a secondary menu using ClassieJS or jQuery?

"Comparison: Java Installation vs. Enabling Java in Your Web Browser

Is it possible to dispatch actions from getters in Vuex?

Exploring Tmbd Movie Database with React.js - Results of searches will only display after the application is recompiled

Centering navigation using HTML5

Removing the column name from a JSON return in C# involves using a variety of techniques

Incorporate a JavaScript variable within the src attribute of a script tag

Error message received from GitHub when attempting to create a repository through the REST API states that JSON cannot

What method is used to initialize the variables in this JavaScript snippet, and what other inquiries are posed?

Modify CSS image according to the user interface language in asp.net

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Issue with inconsistent functionality of Socket.io

Welcome to the launch of OpenWeatherMap!

Connect a function to create a new document element in order to modify the

When attempting to use jQuery to click on a button that triggers an ajax callback, the functionality does not

Sharing application state between different routes in React Router v4 can be achieved by using methods such

Random crashes are observed in Selenium tests during the execution of JavaScript code

What is the reason for React.Component being implemented as a function rather than an ES6 class?

Utilizing AngularJS: Using ng-click with ng-repeat to retrieve all data simultaneously

When the component is initialized, the computed property is not being evaluated