Below, you will find (attached) a Jabber SDK demo that is close to a fully function Jabber client. Most recent update has LOTS of UI tweaks, and added notifications for incoming messages if this app is not in focus. I'm moving gradually toward a material design-like interface, as I have spare time to work on it. I'm about halfway through the redesign. I'll post it here once I have it working. In the meantime, this is a working Jabber app as it is, just not material design.
As you peruse the code, you should notice at least two things:
1. The code does not contain a lot of javascript-ese, such as embedding one function into another and into another and so on. One of my complaints about Javascript is that clever programmers often write code this way, and I find it difficult to trace out the paths of execution. So I tried to avoid that in order to make my code easier to understand. Also, I'm not that clever.
2. There's very little HTML in the .html files. Almost everything in the DOM is dynamically generated. You may not share my preference for this, but I find it easier to read my own code when I do it this way. Hopefully, you'll find it easier to read, too.
This app serves as an example of how to accomplish the following things with CAXL:
1. Login session survives browser refresh
2. Chat sessions survive browser refresh (discarded when window is closed)
3. A log window shows you everything that's going on, including bound events
4. Roster shows presence (show and status) for contacts (behavior mostly imitates Jabber for Windows)
5. Set your own presence (synchronizes with Jabber/Windows)
6. Set custom status
7. Icons for each contact to edit, move to group, copy to group, remove from group, invite to multi-user chat
8. Add contacts (plus button), add new group with new contact
9. Multi-user chat rooms with CIMP server
10. Shows current chat status (composing, etc.) in chat window
11. Makes use of chatSession and numerous events
12. Links in chats are "linkified" (clidk on them to open a new tab with the link)
13. Chats are emojified (emoticons replace text emotions, etc.)
14. No more chat bubbles.. boohoo (OK, that's wasn't a feature of CAXL, anyway, but it was a a cool example of CSS)
I expect to make significant changes to the code, but I hope you find what's here useful in your CAXL adventures. I will update this when new versions are available.
Known issues:
1. There are no quick contacts (yet)
2. Sometimes (very rarely for me) the client spontaneously disconnects. When this happens, the client should automatically reconnect, and it doesn't always do that properly. A page refresh should fix everything, but I'll continue to track down where it's failing to reconnect on its own.
3. Chat rooms don't work when using Webex Connect as the IM&P server.
4. If you open too many chats at once, the tabs will wrap, and that messes up the chat window formatting
Changelog 2-9-2015:
1. Changes reflected in features list above
2. Removed context menus, replaced with icons
3. Added "add contact" plus button, add contact works
Changelog 2-11-2015:
1. Customized UI theme to look less dated
2. If move or remove contact leaves a group empty, that group disappears from the roster
3. Reduced log spam (too many log messages)
4. Add Contact no longer reports an error if the contact already exists. It simply copies the contact into the group you specified, or updates the existing contact.
5. If a contact is in limbo (in the roster entity cache but doesn't show up in the visible roster), it is dumped into a group called "Unassigned".
Changelog 2-13-2015:
1. Changed individual chat windows to tabs that appear in one window
2. Replaced chat bubbles with plain text (different background for your texts vs. contact texts). The bubbles just didn't go well with the new theme and tabbed chats.
Changelog 2-16-2015:
1. Added comments - not heavily commented, but better than before
Changelog 2-19-2015:
1. Moved tabbed chats into a dialog so you can resize it and move it around.
2. Added support for group chat (it's the signal icon next to the + add contact icon). It's still primitive and quirky.
3. Added an "invite user" (to a multi-user chat window) icon to contacts. It's the one with the contact id card.
...I need to replace these icons with icons that really represent the actions.
4. Added support for emojis (like :cow:) and emoticons (like 
)
5. A number of CSS changes and minor UI tweaks
6. Replaced default javascript alert with alert dialog and error sound
Changelog 2-24-2015:
1. Tweaks to UI (flattened dialogs and elements, flat status icons, icons in chat status)
2. Streamlined emoticons and emoji handling, now uses only one open source javascript file (and its css and images)
3. Chat saves only the messages with the enclosing DIV that separates your texts from the other person's texts. This way, you (or I) can drop in an entirely different linkify or emojify function. It applies these modifications after it fetches the raw chat html and before it displays the chat html, so it will display existing chats with the new linkify/emojify if changed. I doubt if I'll change these functions anymore, but the ability is there.
4. Exploring ways to fetch user's info (VCARD or whatever) via IQ stanzas. Not working at all yet, but you'll see the code there.
Changelog 2-25-2015:
1. Fixed (I hope) a presence synchronization problem that appeared as oscillating between states (you could select "Available" and stop the oscillation)
2. Chat rooms now working problem-free (as far as I can tell, anyway) with CIMP servers. Still doesn't work with webex connect.
Changelog 2-27-2015:
1. The fix to presence oscillation didn't work. This update should fix it, though.
Changelog 3-5-2015:
1. Lots of UI tweaks. Some bug fixes. Some streamlining of code.
Changelog 3-9-2015:
1. More UI tweaks (looks much better, if I do say so myself)
2. Pop-up notifications will appear for incoming messages if this demo isn't your active/focused application.
HOWTO:
Edit the jQchat.html file and you'll see the following (example below). It is currently set up to default to a IMP server, but you need to edit the BOSH URL (httpBindingURL) to fit your server. There's an example for a Cisco Webex account, too, if you have one.
Modify the demoConfig to fit your scenario and then load jQchat.html into your browser (tested with Chrome). You don't need to enter your username/password in the configuration settings. You don't actually need to edit any of these settings, since you can type them in at the login window, but I find it more convenient to edit them, which pre-loads the values into the login window.
Be sure to let us know if you have problems, questions, etc. Remember, this is only a demo to help you learn CAXL.
IMPORTANT:
1. If you're using Chrome and your connection is secure, navigate to your httpBindingURL before you try to log in. You'll have to go through the process of bypassing the Chrome warning and accepting the certificate. This lasts only until you close Chrome, then you'll have to do it again. Or use Firefox and store the certificate to make it accept the cert permanently.
2. Make sure the unsecureAllowed and http/https matches the settings on your server.
Sample config (edit jqchat.html to edit these parameters):
var demoConfig = {
httpBindingURL: "https://your-imp-cups-server:7335/httpbinding",
username: "username",
password: "password",
unsecureAllowed: false,
domain: "cisco.com",
resource: "jqchat",
appTag: "app-data-8",
priority: 15
};
/*
* Webexconnect:
httpBindingURL: "https://im3.ciscowebex.com/http-bind",
username: "username",
password: "password",
unsecureAllowed: true,
*/
/*
* IMP
httpBindingURL: "https://your-imp-cups-server:7335/httpbinding",
username: "username",
password: "password",
unsecureAllowed: false,
*/
8 Comments
