WebDXC Apps

I’ve been a user of XMPP quite for a while now, one day I was reading the release note of the best XMPP client for Android Monocles Chat. There was mentions about WebXDC and it was repeated quite a few times. So here I am finally playing with WebXDCs which I was planning for a while now.

So let’s WebXDC now!

What is WebXDC?

Web apps shared in a chat. This is as simple as it gets. From their offical site I got to know about Deltachat and Cheogram (which I also use) and ofcourse Monocles chat also supports WebXDCs.

Basically HTML code bundled in a .xdc zip file shared within a chat, one to one or many to many group chat to perform some task. That task could be anything! While imagining the possiblities of WebXDCs I was overwhelmed.

Games, Productivity tools and many many more!

Documentation:

Webxdc brings web apps to messenger chats, in a simple file format containing HTML5, CSS, JavaScript and other asset files. All authentication, identity management, social discovery and message transport is outsourced to the host messenger which runs a webxdc app container file and relays application update messages between app users, letting each app inherit offline-first and end-to-end encryption capabilities implemented by the hosting messenger. More can be explored here.

Using WebXDC apps:

In latest version (1.7.11) of Monocles chat, we have a share WebXDC option added, this opens the website of WebXDC apps listing and you can choose any application from there.

After choosing the app make sure:

1. Threads feature is active for sending apps to work, as it is required, which you can find at Settings/Expert settings/Activate thread feature
2. WebXDCs should be sent unencrypted.

After sucessfully sending the application, you can start working, playing with it.

Developing WebXDC apps:

So this is the fun part, if you have tried WebXDC apps. It is quite fun to play games with friends especially in this type of environment, like Free software and secure. The best thing about Free software is the code is available to read and modify and distribute. Which is next level of fun!

Pre-requisities for development:

1. A computer with internet
2. Understanding of
   1. HTML
   2. CSS
   3. Javascript
3. Linux Unix commands
4. Patience and courage.

Steps to develop:

1. Create HTML project
2. Bundle the project directory containing index.html with this command (cd PATH_TO_DIR && zip -9 --recurse-paths - *) > myapp.xdc
3. Try the app!
   1. The webxdc-dev simulation tool is the recommended tool for developing webxdc apps as it allows multi-user simulation, and allows observing network messages between app instances. However, no messenger is required to develop a webxdc app with the webxdc-dev tool.

Using Webxdc-dev simulation tool

Webxdc-dev is git repo in Github as of now the last commit seems to be 2 months ago.

Installation:

npm install -g webxdc-dev

Cool! npm package!

Double cool!! It’s a TS project too.

Usage

Starting

1. Running a directory

webxdc-dev run /path/to/webxdc/project

This may not be convenient or may not even work if you use tools like vite or webpack-dev-server though. For that, see below.

2. Running an .xdc file

webxdc-dev run /path/to/my.xdc

3. With Vite

You can run webxdc-dev against such a dev server directly. For instance if you have your project under development running on http://localhost:3000, this is how you can run it:

webxdc-dev run http://localhost:3000

Architecture of simulator

• backend: a NodeJS Express application that serves webxdc applications in the browser and distributes updates using websockets.

• simulator: a version of webxdc.js that uses a websocket to the backend to send and receive updates. This is injected into webxdc applications.

• frontend: a SolidJS application that presents the webxdc-dev UI.

To use this SIM we need a basic WebXDC app, clone it from here.

Clone the Hello app and run the index.html file on browser.

Now the Hello project contains the index file and is a directory, I’ll use command from Running a directory from above.

webxdc-dev run hello

This has created two devices with port number 7001, 7002

Now that SIM is bit clear, we can dive into more depth in WebXDCs

Bundling the WebXDC app:

After cloning the app from above repo, there is a file name create-xdc.sh you need to run this

./create-xdc.sh app-name