MatriX JS Using Chat Room Functionality

Lightbarrier

2017-06-14, 00:39 #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.

Alex

2017-06-17, 02:30 #2

Member since Feb 2003 · 4449 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:

var jidRoom = new Matrix.Jid('dev@conference.ag-software.net');
 
function joinRoom() {
 
    var pres = new Matrix.Xmpp.Client.Presence();
 
    var jid = jidRoom.clone();
    jid.resource = "Alex";
    pres.to = jid;
 
    client.send(pres);
}
 
function sendMessage() {
    var msg = new Matrix.Xmpp.Client.Message();
    msg.type = Matrix.Xmpp.MessageType.GroupChat;
    msg.to = jidRoom;
    msg.body = $("#txtSend").val();
 
    client.send(msg);
    $("#txtSend").val("");
}
 
client.onPresence.on((args: Matrix.PresenceEventArgs) => {
    var pres = args.presence;
    // check if this presence is a room presence for the current room
    if (pres.from.bare === jidRoom.bare) {
        if (pres.type == Matrix.Xmpp.PresenceType.Unavailable) {
            // user went offline
            $('#' + pres.from.full).remove();
 
        } else {
            // online presence
            //var userExists = $("#" + pres.from.full).length != 0;
            var userExists = $("li[data-jid='" + pres.from.full + "']").length != 0;
 
            if (!userExists) {
                // add it
                var data = [
                    {
                        "jid": pres.from.full,
                        "nickname": pres.from.resource,
                        "show": Matrix.Xmpp.enumToShowName(pres.show)
                    }
                ];
 
                var template = $.templates("#tplMucUser");
                var htmlOutput = template.render(data);
                $('#roster > ul').append(htmlOutput);
            } else {
                // update the presence and status
                var showEl = $("li[data-jid='" + pres.from.full + "'] > div.user-status");
                showEl.removeClass();
                showEl.addClass('user-status ' + Matrix.Xmpp.enumToShowName(pres.show));
            }
        }
    }
}
 
client.onMessage.on((args: Matrix.MessageEventArgs) => {
    var msg= args.message;
    if (msg.from.bare === jidRoom.bare) {
        if (msg.body != null) {
            var data = [
                {
                    "timestamp": (msg.delay != null) ? new Date(msg.delay.stamp).toLocaleTimeString() : new Date().toLocaleTimeString(),
                    "body": msg.body,
                    "nickname": msg.from.resource
                }
            ];
 
            var template = $.templates("#tplMucMessage");
            var htmlOutput = template.render(data);
            $('#messages > ul').append(htmlOutput);
        }
    }
}