papatutuwawa.pages.polynom.me/posts/2023-07-24-Join-MUC-With-Moxxy.html

170 lines
10 KiB
HTML
Raw Normal View History

2023-12-31 22:03:00 +00:00
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/index.css" rel="stylesheet" />
<link rel="shortcut icon" href="/assets/img/favicon.ico" sizes="32x32" />
<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Moxxy Blog" />
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Joining an MUC with Moxxy! | Moxxy</title>
<meta name="generator" content="Jekyll v4.3.1" />
<meta property="og:title" content="Joining an MUC with Moxxy!" />
<meta name="author" content="Ikjot Singh Dhody" />
<meta property="og:locale" content="en_GB" />
<meta name="description" content="Greetings, readers!" />
<meta property="og:description" content="Greetings, readers!" />
<link rel="canonical" href="https://moxxy.org/posts/2023-07-24-Join-MUC-With-Moxxy.html" />
<meta property="og:url" content="https://moxxy.org/posts/2023-07-24-Join-MUC-With-Moxxy.html" />
<meta property="og:site_name" content="Moxxy" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-07-24T00:00:00+02:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Joining an MUC with Moxxy!" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ikjot Singh Dhody"},"dateModified":"2023-07-24T00:00:00+02:00","datePublished":"2023-07-24T00:00:00+02:00","description":"Greetings, readers!","headline":"Joining an MUC with Moxxy!","mainEntityOfPage":{"@type":"WebPage","@id":"https://moxxy.org/posts/2023-07-24-Join-MUC-With-Moxxy.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://moxxy.org/assets/img/logo.png"},"name":"Ikjot Singh Dhody"},"url":"https://moxxy.org/posts/2023-07-24-Join-MUC-With-Moxxy.html"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<div class="flex flex-col">
<div class="relative h-16 inset-x-0 inset-y-0 px-4 shadow-md grid place-items-center">
<div class="flex flex-row items-center w-full">
<!-- The Moxxy logo -->
<a href="/index.html">
<img src="/assets/img/logo.png" class="w-12 h-12 p-2" />
</a>
<a href="/index.html">
<span class="font-bold">Moxxy</span>
</a>
<!-- Spacer -->
<div class="grow"></div>
<a href="/posts.html" class="px-2 text-sky-400">Blog</a>
<a href="/developers.html" class="px-2 text-sky-400">Developers</a>
<a href="https://codeberg.org/moxxy/moxxy" class="px-2 text-sky-400">Source</a>
</div>
</div>
<div class="w-full md:max-w-prose mt-2 mx-auto">
<div class="px-8">
<h1 class="text-3xl">Joining an MUC with Moxxy!</h1>
<span>Posted by <span class="italic">Ikjot Singh Dhody</span> on 24.07.2023</span>
<article class="mt-5 prose lg:prose-lg">
<p>Greetings, readers!</p>
<p>Welcome back to our series of blogs on the Google Summer of Code (GSoC) project. In this blog post, Ill be sharing the progress made in implementing Multi-User Chat (MUC) support in Moxxy, the frontend counterpart to my GSoC project.</p>
<h2 id="introduction">Introduction</h2>
<p>As you may recall, Moxxy is a frontend application developed as an innovative XMPP client. To enhance its functionality, my GSoC project focuses on adding MUC support. Before diving into the Moxxy implementation, it was crucial to establish the necessary MUC support in Moxxmpp, which is highlighted in <a href="https://moxxy.org/posts/2023-06-17-XEP-0045-In-Moxxmpp.html">this</a> blog.</p>
<p>Currently, the implementation progress is to allow users to join an MUC through Moxxy, and view incoming live messages in the chat.</p>
<h2 id="design-plan-for-muc-support-in-moxxy">Design Plan for MUC Support in Moxxy</h2>
<p>To implement MUC support in Moxxy, we need to extend its functionality and introduce new components. Lets outline the design plan for the MUC feature:</p>
<h3 id="new-page">New Page</h3>
<h4 id="joingroupchatpage">JoinGroupchatPage</h4>
<p>This page will contain just 1 text field - for the nickname that the user wants to join with. It also has a button that allows us to join the MUC with said nickname. It is an additional route to the current StartChat page, if the user selects that they want to join a groupchat.</p>
<h3 id="new-command">New Command</h3>
<h4 id="joingroupchatcommand">JoinGroupchatCommand</h4>
<p>This command is sent to the data layer worker (separate thread) from the UI, when the user clicks on the join groupchat button on the new join groupchat page. It contains information about the JID and the nick that the user tried to join with. This will only be sent to the worker thread if the input validations are cleared.</p>
<h3 id="new-event">New Event</h3>
<h4 id="joingroupchatresult">JoinGroupchatResult</h4>
<p>This event is sent back as a result of the JoinGroupchatCommand. Based on whether the request succeeded or failed, it will return the new Conversation object that has just been created.</p>
<h3 id="database-changes">Database changes</h3>
<h4 id="groupchatdetails-table">GroupchatDetails table</h4>
<p>Add a new GrouchatDetails table to the database containing two data items - the jid and the nick. The main reason to have a separate table for the groupchat details, instead of to just have a new nick item in the Conversation table - was to maintain the single responsibility principle.</p>
<p>When the user fetches a conversation of type groupchat from the database, a separate call will be made that fetches the relevant groupchat details from this new table, and attaches it to the Conversation object.</p>
<h3 id="miscellaneous-changes">Miscellaneous changes</h3>
<ul>
<li>
<p>Changed the external helpers for the ConversationType to an enhanced enum. This allows us to include the functions within the enum.</p>
</li>
<li>
<p>The MUCManager was added to the list of registered managers for Moxxy. Not only this, the OccupantIdManager was also registered which will allow for the unique occupant identification moving forward. This will be required for message reactions/retractions in an MUC.</p>
</li>
</ul>
<h3 id="new-service">New Service</h3>
<h4 id="groupchatservice">GroupchatService</h4>
<p>Added a new GroupchatService that allows for the following functions:</p>
<ul>
<li><strong>getRoomInformation</strong>: Sends a request to moxxmpp to receive disco info about the MUC.</li>
<li><strong>joinRoom</strong>: Sends a request to moxxmpp to join the MUC if its not password protected.</li>
<li><strong>addGroupchatDetailsFromData</strong>: Adds a new GroupchatDetails object to the database table.</li>
<li><strong>getGroupchatDetailsByJid</strong>: Fetches the GroupchatDetails from the database based on the JID provided. This is required as a separate step while fetching an MUC conversation since the Conversations and GroupchatDetails table are decoupled.</li>
</ul>
<h3 id="handling-errors">Handling Errors</h3>
<p>To prevent avoidable errors, Moxxy performs frontend checks when joining a room. These checks include ensuring to validate the JID input field, and checking for empty nicknames.</p>
<p>Possible errors that users may encounter during the MUC workflow include invalid or already in use nicknames, disallowed registration, invalid stanza format, and invalid disco info response. Moxxy will handle these errors gracefully.</p>
<h2 id="challenges-and-considerations">Challenges and Considerations</h2>
<p>Here is an enumeration of the possible challenges that we could face in the future implementation, and the ones I faced in the current implementation as well:</p>
<ol>
<li>
<p>Differentiating Messages from Oneself: Moxxy/Moxxmpp need to distinguish between messages from other users and self-echoed messages. To address this, Moxxy uses the origin ID of the message. If the origin ID of the response matches the sent origin ID, the message is ignored and not displayed in the UI.</p>
</li>
<li>
<p>Handling Impersonation in Anonymous MUCs: In anonymous MUCs, users can impersonate others by reusing their nicknames after leaving. To tackle this, Moxxmpp leverages the occupant ID, as described in XEP-0421. Each user joining the group receives a unique occupant ID, which helps track message origins accurately.</p>
</li>
<li>
<p>Managing Discussion History on Rejoining: When a user rejoins an MUC, the room history is resent, including errors, self-presence with status code, room history, room subject, and live message/presence updates. To prevent appending duplicate history to the UI, Moxxy/Moxxmpp will have to wait until it receives the room subject before listening for message stanzas.</p>
</li>
</ol>
<h2 id="conclusion-and-future-work">Conclusion and Future Work</h2>
<p>In this blog post, we explored the implementation plan for adding MUC support, specifically XEP-0045, to Moxxy. Moxxmpp serves as the backbone for Moxxys XMPP functionality, handling communication between the client and XMPP server. We discussed the directory structure, and key routines required for MUC support in Moxxmpp. Additionally, we addressed various challenges and considerations related to MUC features.</p>
<p>The implementation process has already commenced, with a pull request (PR) underway. Once the PR is complete, Moxxy will support joining a groupchat and listening to live messages. In further PRs, sending messages and leaving the MUC will be supported as well. The addition of MUC support will empower Moxxy users to enjoy enhanced collaboration and communication within XMPP group chats.</p>
<p>Stay tuned for future updates on the progress of MUC support in Moxxy. Until then, happy chatting!</p>
</article>
</div>
</div>
</div>
<footer class="h-8 w-full flex flex-row justify-center">
<span class="text-sm text-center">
Made with &lt;3 by
<a class="text-sky-400" href="https://polynom.me" target="_blank" rel="noopener noreferrer">PapaTutuWawa</a>
using <a class="text-sky-400" href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">TailwindCSS</a>,
<a class="text-sky-400" href="https://jekyllrb.com/" target="_blank" rel="noopener noreferrer">Jekyll</a> and
<a class="text-sky-400" href="https://heroicons.com/">heroicons</a>.
</span>
</footer>
</body>
</html>