Not logged in. · Lost password · Register
Forum: MatriX JS RSS
Avatar
Lightbarrier #1
Member since Jul 2014 · 52 posts
Group memberships: Members
Show profile · Link to this post
Subject: MatriX JS Using Chat Room Functionality
Hey Alex,

I was wondering if you had a good example to show how to use the chat room functionality to connect and message within a chat room using MatriX JS?

When compared to the .NET SDK I know you could use MucManager to manage a user's connection to a chat room however, I didn't see anything similar to it within MatriX JS. I did see some other objects that seem to relate to chat rooms such as Muc.User, Muc.X, and Muc.Conference however, nothing quite like what was in the .NET SDK. I also didn't see any examples on the Github page shown below.

https://github.com/agnauck/matrix-js/tree/master/Examples

I realize that I could just create my own functionality and send the presence for the chat room however, if there's any already existing functionality within MatriX JS I would rather use that.

Note:
I'm creating a separate post even though my more recent post hasn't been resolved yet as they're separate questions.

Thanks for your assistance.
Avatar
Alex #2
Member since Feb 2003 · 4322 posts · Location: Germany
Group memberships: Administrators, Members
Show profile · Link to this post
There is no Mucmanager in Matrix JS, you have to implement it yourself.

Here is some sample code:
  1. var jidRoom = new Matrix.Jid('dev@conference.ag-software.net');
  2.  
  3. function joinRoom() {
  4.  
  5.     var pres = new Matrix.Xmpp.Client.Presence();
  6.  
  7.     var jid = jidRoom.clone();
  8.     jid.resource = "Alex";
  9.     pres.to = jid;
  10.  
  11.     client.send(pres);
  12. }
  13.  
  14. function sendMessage() {
  15.     var msg = new Matrix.Xmpp.Client.Message();
  16.     msg.type = Matrix.Xmpp.MessageType.GroupChat;
  17.     msg.to = jidRoom;
  18.     msg.body = $("#txtSend").val();
  19.  
  20.     client.send(msg);
  21.     $("#txtSend").val("");
  22. }
  23.  
  24. client.onPresence.on((args: Matrix.PresenceEventArgs) => {
  25.     var pres = args.presence;
  26.     // check if this presence is a room presence for the current room
  27.     if (pres.from.bare === jidRoom.bare) {
  28.         if (pres.type == Matrix.Xmpp.PresenceType.Unavailable) {
  29.             // user went offline
  30.             $('#' + pres.from.full).remove();
  31.  
  32.         } else {
  33.             // online presence
  34.             //var userExists = $("#" + pres.from.full).length != 0;
  35.             var userExists = $("li[data-jid='" + pres.from.full + "']").length != 0;
  36.  
  37.             if (!userExists) {
  38.                 // add it
  39.                 var data = [
  40.                     {
  41.                         "jid": pres.from.full,
  42.                         "nickname": pres.from.resource,
  43.                         "show": Matrix.Xmpp.enumToShowName(pres.show)
  44.                     }
  45.                 ];
  46.  
  47.                 var template = $.templates("#tplMucUser");
  48.                 var htmlOutput = template.render(data);
  49.                 $('#roster > ul').append(htmlOutput);
  50.             } else {
  51.                 // update the presence and status
  52.                 var showEl = $("li[data-jid='" + pres.from.full + "'] > div.user-status");
  53.                 showEl.removeClass();
  54.                 showEl.addClass('user-status ' + Matrix.Xmpp.enumToShowName(pres.show));
  55.             }
  56.         }
  57.     }
  58. }
  59.  
  60. client.onMessage.on((args: Matrix.MessageEventArgs) => {
  61.     var msg= args.message;
  62.     if (msg.from.bare === jidRoom.bare) {
  63.         if (msg.body != null) {
  64.             var data = [
  65.                 {
  66.                     "timestamp": (msg.delay != null) ? new Date(msg.delay.stamp).toLocaleTimeString() : new Date().toLocaleTimeString(),
  67.                     "body": msg.body,
  68.                     "nickname": msg.from.resource
  69.                 }
  70.             ];
  71.  
  72.             var template = $.templates("#tplMucMessage");
  73.             var htmlOutput = template.render(data);
  74.             $('#messages > ul').append(htmlOutput);
  75.         }
  76.     }
  77. }
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Forum: MatriX JS RSS