Messenger App (XMPP + Ionic framework)

demo
21

@pink_tshirt Thankx mate, Let us know when it is live on playstore.

22

Have you an example of your login form?

23

Could you post an example how to pass from login to main form? How to have organized index.html for this?

24

Im Curious, how you would manage which message ties to each conversation or even Group Conversation.

25

@pink_tshirt awesome work.

I was talking to a potential client today about a chat app and my friend who does back was talking about xmpp.

1 Like
26

Hi.
Would you be open to share your source code?
I am especially interested in the way you integrated strophe.js into ionic.
Did you defined it as an angularJS service or module?
If you could share an example on how you authenticate and make an iq request using strophe.js in ionic it would be great!
Thanks

27

Hi, I am using strophe as a service. So the basic structure of my app goes like this:

...
$stateProvider
     .state('login', {
	url: '/',
	templateUrl: 'templates/login.html', // this is my login form
	controller: 'loginCtrl'
     })
...

.controller('loginCtrl', function(xmppAuth) {

    xmpp.auth(login, password);

})

.service('xmpp', function() {

return {

auth: function(login, password) {
   connect = new Strophe.Connection('http://mydomain.net/http-bind');
   connect.connect(login, password, function (status) {
       if (status === Strophe.Status.CONNECTED) {
           // we are in, addHandlers and stuff
           $state.go('dashboard') // proceed to the next screen
       }
   }
}

}

})
28

@pink_tshirt How did you keep keyboard open on send button click ? I am stuck in this. :frowning:
Any help would be highly appreciated.

Thanks in advance.

29

Thanks for the answer.
Actually, I already found that “solution” to use strophe.js as a service in that post: http://stackoverflow.com/questions/24337123/xmpp-angularjs-strophe-js
But I don’t understand how you can use the connection out of the “auth” function to send and receive iq stanza for example.
I tried to return “connect” at the end of the “auth” function to reuse it in other functions but the issue is that the connection take some time to be established so connect is returned while status!=CONNECTED
So, if you could post a more complete version of your strophe service (with an example of a function making stanza requests to the server), it would really help me.
Thanks

30

Well, this is the code for auth-service https://gist.github.com/mikekoro/4cf6a29e58e37ce4d322 which I invoke during login:

.controller('loginCtrl', function($scope, $rootScope, xmpp) {
    xmpp.auth(login, password);
})
.controller('contactsCtrl', function($scope, $rootScope) {
    // you will be redirect to this controller by auth-service (Line 24)
    // query your roster, build a contact list, etc
    // at this point "connect" is defined and available throughout the whole application
})
.controller('chatCtrl', function($scope, $state) {
    
    // at some point you may invoke connect to send a message:
    $scope.sendMessage = function(message,recipient) {
    
        if(!message) {
	   return false
	}
	
        var sendMessageQuery = $msg({to: recipient, type: 'chat'}).c('body').t(message);
        connect.send(sendMessageQuery);
		
     }

})

31

@pink_tshirt The screenshots you attached are now not avaialble. Can you please share it again ?

32

Awesome work pink_shirt. I was wondering if you had a repository of your code for this project. I am trying to learn XMPP and build a messaging app and I was thinking we could collaborate on it. Also, if you need help with submitting to the Apple and Google store let me know. I’ve done this before and can help alleviate a lot of the headache involved. Cheers!

33

I dont have a repository, but you can ask me about xmpp and I can share some parts of the code.

34

Hi @mrameezraja,

This is a quite difficult question…
The only way I found to perform that is to automatically re-focus the input field.

I wrote a directive for that. If it could help :

// keep focus on input while keyboard is open
.directive('focusOnKeyboardOpen', function($window){
  'use strict';
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      var keyboardOpen = false;
      // require cordova plugin https://github.com/driftyco/ionic-plugins-keyboard
      $window.addEventListener('native.keyboardshow', function(e){
        keyboardOpen = true;
        element[0].focus();
      });
      $window.addEventListener('native.keyboardhide', function(e){
        keyboardOpen = false;
        element[0].blur();
      });

      element[0].addEventListener('blur', function(e){
        if(keyboardOpen){
          element[0].focus();
        }
      }, true);
    }
  };
})

While the keyboard is opened, the input field will be automatically re-focused.
You have to close the keyboard (back button on android) to do things outside the output.

35

Great work!
I am working on integrating strophe.js with angular but no success yet and not able to login.
Let me know if you share the code?

36

I second this. I’ve been working on my messaging app and have been unsuccessful with it. I would be willing to share my repo if anybody wants to see where I am at so far but I don’t have any of the Strophe.js code as I have been unable to get it working. Let me know if anyone would like to see my repo.

37

Hi:
Can you share the screen shots again?
Thanks!

38

Some screenshots https://www.behance.net/gallery/24911689/iPhone-Chat-App

39

Hi @pink_tshirt, can you please share the screenshots again? Did you was able to implement Group Chats based on XMMP Conference Rooms? By the way, what server are you using? Best Regards…

40

I wonder the same thing :slight_smile: