repository·master·Indexed 25 days ago
https://github.com/conversejs/converse.jsA modern, feature-rich, 100% client-side XMPP chat application that runs in a web browser. It supports rich messaging, OMEMO end-to-end encryption, and file sharing via HTTP File Upload. Converse.js can be deployed as a standalone web app or integrated into websites using Fullpage, Overlay, or Embedded display modes. It includes a plugin architecture based on pluggable.js and provides a headless build (@converse/headless) for developers wishing to build custom user interfaces on top of the Converse XMPP engine.
The converse-omemo plugin provides an implementation of XEP-0384 OMEMO end-to-end encryption (version 0.3.0) for use with Converse.js.
Important Note: This package only implements the headless (non-UI) logic. To use OMEMO with a user interface, you must also include the converse-omemo-views plugin to handle the UI components.
Converse.js can be integrated into websites using three distinct display modes depending on your UI requirements:
Converse.js is a 100% client-side XMPP chat application with the following capabilities:
pluggable.js.The fastest way to add Converse to your project is by including the CSS and JavaScript files from the official CDN in your HTML <head>. You can use the latest version or pin to a specific version like 14.0.0 for stability.
<!-- Latest version -->
<link rel="stylesheet" href="https://cdn.conversejs.org/dist/converse.min.css">
<script type="module" src="https://cdn.conversejs.org/dist/converse.min.js"></script>
<!-- Pin to specific version -->
<link rel="stylesheet" href="https://cdn.conversejs.org/14.0.0/dist/converse.min.css">
<script type="module" src="https://cdn.conversejs.org/14.0.0/dist/converse.min.js"></script>To host Converse yourself, download the latest release archive and extract the dist/ folder to your web server.
Important: Converse loads additional assets dynamically from the dist/ directory. If your assets are not located in the default path, you must configure the assets_path option during initialization.
For a development experience that includes automatic browser refreshes, use the RSPack development server instead of the standard watch mode.
Run either:
make devserveror
npm run devserverThen visit http://localhost:8080 in your browser.
To develop with OMEMO end-to-end encryption support, you must manually load libsignal-protocol-javascript in your HTML page. This is required because of its GPLv3 license.
Add the following script tag to your page:
<script src="3rdparty/libsignal-protocol-javascript/dist/libsignal-protocol.js"></script>To begin developing or customizing Converse, clone the repository and install dependencies using NPM. It is recommended to use NVM to manage Node.js versions.
After cloning, run the following commands to start the development environment:
npm installnpm run serve & (or make serve_bg)npm run watch (or make watch)Once running, access the development interface at http://localhost:8000/dev.html.
git clone https://github.com/conversejs/converse.js.git
cd converse.js
npm install
npm run serve &
npm run watchWhen using Converse inside a web component's shadow DOM, you must set the root configuration option to the shadow-root of that DOM to ensure correct rendering.
class CustomChatComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
this.initConverse(shadowRoot);
}
initConverse(shadowRoot) {
window.addEventListener('converse-loaded', function (event) {
const { converse } = event.detail;
converse.initialize({
root: shadowRoot,
// Other settings go here...
});
});
}
}To create a build suitable for CDN deployment that uses absolute paths, run:
npm run cdnConverse can be integrated into your web application in three ways:
<div> on your page.You can also trigger specific chat views using URL fragments, such as #converse/chat?jid=user@domain to open a direct chat with a specific JID.