Tag Archives: Javascript

Επικοινωνία με το πρωτόκολλο Xmpp μέσω XMPP.js: Προβλήματα και workaround.

Ο παρακάτω οδηγός είναι υπό συχνή ανανέωση καθώς καταγράφω της εμπειρίες μου όπως αναπτύσσω εφαρμογές με την βιβλιοθήκη xmpp.js

Στο master thesis μου έπρεπε να αναπτύξω μια εφαρμογή σε electron και Node.js που ουσιαστικά ήταν ένας xmpp client. Κατά την ανάπτυξη αυτής συνάντησα τα εξής προβλήματα αξιοποιώντας αυτήν την βιβλιοθήκη, τα οποιά στην συνέχεια σας δείχνω πως τα έχω επιλύσει.

Σύμφωνα με την τεκμηρίωση της βιβλιοθήκης ο συνιστώμενος κώδικας είναι ο εξής:



const xmpp = client({
service: 'xmpp://example.com',
domain: 'example',
username: 'user',
password: 'password',
})

xmpp.on('error', err => {
console.error('❌', err.toString())
})

xmpp.on('offline', () => {
console.log('🛈', 'offline')
})

xmpp.on('online', async address => {
console.log('🗸', 'online as', address.toString())

// Sends a chat message to itself
const message = xml(
'message',
{type: 'chat', to: address},
xml('body', 'hello world')
)
xmpp.send(message)
})

xmpp.on('stanza', stanza => {
console.log('⮈', stanza.toString())
xmpp.stop()
})

xmpp.start()
 Όμως έτσι σκέτος μου παρουσιάζει το εξής πρόβλημα, λόγο ότι  by default ενεργοποιεί SSL/TLS συνδέσεις, δεν μου επιτρέπει να διαχειρηστώ την περίπτωση που η SSL/TLS σύνδεση χρησιμοποιεί Self-signed πιστοποιητικά. Αυτό είναι γενικότερο θέμα της Node.js στον τρόπου που διαχειρίζεται το SSL. Λύνετε απλά θέτοντας την μεταβλητή περιβάλλοντος NODE_TLS_REJECT_UNAUTHORIZED στην τιμή 0. Πέρα από τις εντολές κονσόλας npm κλπ κλπ μπορεί να γίνει και μέσω κώδικα javascript, απλά προσθέστε στην αρχικό script που εκτελεί η εφαρμογή σας την παρακάτω γραμμή κώδικα:
process.env.NODE_TLS_REJECT_UNAUTHORIZED=0

Καλή ιδέα είναι να εκτελείτε η παραπάνω όταν είστε σε περιβάλλον ανάπτυξης και μόνο.

Πέρα από αυτό όταν κάνεις έναν client πρέπει να μπορείς να εμφανίζεις τουλάχιστον τον κατάλληλο μήνυμα είτε στον τελικό χρήστη είτε στον sysadmin έτσι πρέπει να διαχειρίζεσε κατάστάσεις όπως:

  • Ο χρήστης δίνει λάθος server ή o client δεν μπορεί να επικοινωνήσει στον server.
  • Ο χρήστης δίνει λάθος credentials.

Προσωπικά λόγο της φύσης της Node.js ο τρόπος που μπορούσα να το διαχειριστώ είναι ελέγχοντας μέσω regular expression (well μπορεί να μην σου αρέσει αλλά θέλοντας και μη πρέπει να μάθεις να γράφεις PCRE συμβατές regular expressions) το μήνυμα του σφάλματος. Ένα snippet κώδικα από την εφαρμογή μου που χρησιμοποιεί electron (που έχει ενσωματωμένη nodejs) είναι:

const errorRegex = {
DNS_NOT_FOUND: /^getaddrinfo ENOTFOUND/,
AUTH_FAILED: /^not-authorized/,
}; 
xmpp.on('error', (err) => {
  console.error('Error occured', err.message, Object.getPrototypeOf(err));
  if (errorRegex.DNS_NOT_FOUND.test(err.message)) {
      console.error('Connection Error', `The provided server ${connectionInfo.service} does not exist.`);
     // Add handling stuff here
     destructClient(xmpp);
  } else if (errorRegex.AUTH_FAILED.test(err.message)) {
    console.error('Authentication Error', 'The provided username and password are not valid');
    // Add further handling here
    destructClient(xmpp);
  }
});

Ουσιαστικά ανάλογα με το ποιο regular expression ορισμένο στο αντικείμενο errorRegex εφαρμόζω τον κατάλληλο έλεγχο.

Ακόμη εν λόγο βιβλιοθήκη κάνει αυτόματες επανασυνδέσεις, και το κάνει ΕΠ’ ΑΠΕΙΡΟΝ, πράγμα που δίνει άσχημο user experience στον τελικό χρήστη. Γι αυτό το περιορίζω σε 10 προσπάθειες που με το παρακάτω κομμάτι κώδικα:

let connectionCounter = 10;
xmpp.reconnect.on('reconnecting', () => {
  if (connectionCounter===0) {
    destructClient();
  }
  connectionCounter-=1;
})

Ουσιαστικά κάνω abort με xmpp.stop() που καλείτε εντός της destructClient(). Για μήνυμα σφάλματος δοκιμάστε το να το εκτυπώσετε στο event error:

xmpp.on('error', (e)=>{
 if (err.code === 'ECONNREFUSED' && connectionCounter === 0) {
   dialogsHelper.errorDialog('Connection Error', `Failed to connect into ${err.address}.`);
 }
}

Αξιοδημείωτε δε είναι ότι η διεύθυνση σύνδεσης έρχετε μαζί με το error όπως και ο τύπος του error στη μεταβλητή στιγμιότυπου error.

Επιπλέων ένα θέμα είναι ότι θέλω να τρέχω έναν κώδικα μια φορά όταν ο χρήστης κάνει login, για κάποιο λόγο η βιβλιοθήκη καλεί 2 φορές το event login, όμως δεν θέλουμε να τρέχουν κάποια πράγματα 2 φορές έτσι θα πρέπει να ορίζουμε κάποια μορφής flag που να μην επιτρέπει την εκτέλεση κάποιων κομματιών κώδικα 2 φορές (πχ. να εμφανίζει στον τελικό χρήστη δύο φορές ένα μήνυμα σύνδεσης):


let flag=false

//Some code goes here
xmpp.on('offline', () => {
 flag=false;
}

xmpp.on('online',(address) => {
  if(!flag){
   flag=true;
   console.log(`You logged in as ${address}`); 
  }
})

Επιπλέον τα μηνύματα που αποστέλλονται μέσω XMPP ονομάζονται stanzas και υπάρχονυ πάρα πολλά είδη. Για κάθε ένα είδος ορίζω και μια ξεχωριστή function όπως βλέπετε στον παρακάτω κώδικα:

xmpp.on('stanza',(stanza)=> {
  try {
 if(presenceReply(stanza) !== false) return;
 if(handleRoster(stanza) !== false) return;
 // Add your function here
 } catch(e) {
   console.error(e);
 }
});

Αυτή η δομή λόγο όχι χρησιμοποιεί πολλές function για να επεξεργαστεί καταλλήλως το εισερχόμενο μύνημα πρέπει στην αρχή να ελέγχετε ο τύπος με τον εξής τρόπο πχ στην function presenceReply:

const presenceReply = (stanza) => {
  if(!stanza.is('presence')) return false;
  if(loginAddress.bare().equals(from.bare())) return false;
  
  const from = jid(stanza.attrs.from);
  const message = xml('presence', { to: stanza.attrs.from });
  console.log('Sent To', stanza.attrs.from);
  sendMessage(message);
  return true;
};

Όπως βλέπουμε καλύτερα να ελέγχουμε εάν ο τύπος ΔΕΝ είναι αυτός που ζητάμε και να επιστρέφουμε, από προσωπική εμπειρία αυτό είναι ένας bulletrpoof τρόπος να αποτρέπει στο να σπάει το πρόγραμμα σε ΠΟΛΛΕΣ περιπτώσεις. Ακόμη όπως βλέπετε όταν το μύνημα δεν είναι ο κατάλληλος τύπος επιτρέφουμε false και την τιμή αυτή την ελέγχουμε στην callback το event ‘stanza’, εάν ελέγχθηκε τότε προχωράμε στην επόμενη function η ιδέα είναι ότι δεν θέλουμε να εκτελέσουμε κάποια function εάν ήδη έχουμε επεξεργαστεί το μήνυμα.

Τέλος ο έλεγχος γίνετε ελέγχοντας εάν η τιμή ΔΕΝ είναι false με το σύμβολο !== λόγο ότι με αυτόν τον τρόπο σε επιτιχία μπορούμε επιτρέπουμε να ΜΗΝ επιστρέφει τιμή,
εναλλακτική προσέγγιση είναι η χρήση reqular expression που επιστρέφετε με την μέθοδο stanza.toString(). Ακόμη δε, χρήζει σημείωσης, όλη η σειρά των ifs είναι σε ένα try ... catch block επιτρέποντας όποιο σφάλμα συμβαίνει να ΜΗΝ κρασάρει όλη την εφαρμογή αλλά να μένει και να διαχειρίζεται τοπικά. Ενδεικτικά βάζω console.error αλλά μπορεί στην θέση του να οποιοδήποτε κομμάτι κώδικα.

Ακόμη όταν θέλετε να τραβήξετε όλους τους φίλους και τους κάνετε render, καλό είναι να ακολουθήσετε την εξής διαδικασία (δοκιμασμένη σε electron που ουσιαστικά είναι ένας browser και nodejs που σε αυτόν τρέχω και την xmpp.js άρα δεν υπάρχει communication overhead):

  1. Αποστείλετε ένα roster request.
  2. Όταν το λάβετε κάντε το render.
  3. Όταν γίνει render αποστείλετε ότι είστε online με το δικό σας presence

Για ποιο ολοκληρωμένη εικόνα δείτε την παρακάτω εικόνα, σε περίπτωση web client συνηστώ η χρήση websocket λόγο φόρτου επικοινωνίας.
Διαδικασία μεταξύ Application Backend και Ui για συγχρονισμό και σωστή ενημέρωση αυτού.

Ακόμη δε κατά το event presense response όπου δείχνετε στην πάνω εικόνα να αποστέλλετε ολόκληρο το roster εφόσον το έχετε ενημερώσει εσωτερικά στο backend της εφαρμογής σας (πχ. σε μια in-memory database ή σε ένα object vatiable). Ακόμα θεμιτό είναι να μαζεύετε όσα περισσότερα status updates μπορείτε εάν σας νοιάζει το πάρε-δώσε μεταξύ ui και εφαρμογής. Ακόμη δε να έχετε στον νου σας ότι ένα participant στο roster μπορεί να είναι συνδεδεμένος σε πολλαπλές συσκευές και το status είναι ανά συσκευή.

Κατά την γνώμη μου είναι hacky ο παραπάνω τρόπος αλλά είναι η μόνη βιβλιοθήκη η οποία αναπτύσσετε προς το παρόν και συντηρείτε ενεργά (περίοδο που γράφετε το άρθρο). Αλλά λόγο ότι το API είναι βασικό και σπαρτιάτικο σε "μαθαίνει" xmpp
Advertisements