Instant messenger integration

Submitted 5/31/2012 by Support

eStreamChat supports 1-to-1 instant messenger mode where users can start a chat directly from your site without having to enter any chat room. The integration consists of two parts that are detailed below. Make sure that your chat installation is configured to use the Remote User Authentication Provider.

 

1. Adding a script that checks for new chat requests

In this example the check will be implemented in javascript which can be included in any web site. A suitable place to include the script would be in your master page or header component that is loaded for every page. This way a user can receive chat requests regardless of which page they are on.

 

var Messenger = (function ($) {
    var module = {};
    var timerId;
    var commandUrl;
    var dialog = null;

    function createDialogContent(request) {
        // The new chat request dialog is generated here
        // You can edit the html and css classes to better match your site design
        var dialogContent = "<div class='notification-wrap'>" +
            "<img align='middle' src='" + request.FromThumbnailUrl + "' />" +
                "<span class='notification-message'>" + request.ChatRequestMessage + "</span>" +
                    "<div class='notification-viewprofile'>" +
                        "<a href='javascript:alert(\"This could go to the user profile on your site!\")' target='_blank'>view user profile</a>" +
                            "</div>" +
                                "</div>";

        return $(dialogContent);
    }

    function updateOnline() {
        $.getJSON(commandUrl, function (result) {
            if (result != null && dialog == null) {
                // A chat request waiting - show the dialog
                dialog = $('<div />').html(createDialogContent(result).html()).dialog(
                    {
                        title: "Incoming Chat Request",
                        draggable: true,
                        buttons: {
                            "Accept": function () {
                                $.getJSON(commandUrl + "&reqInitiator=" + result.FromUserId + "&reject=false");
                                $(this).dialog("destroy");
                                dialog = null;
                                window.open(result.MessengerUrl, result.FromUserId, 'width=640,height=500,resizable=0,menubar=0,status=0,toolbar=0');
                            },
                            "Reject": function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (ev, ui) {
                            $.getJSON(commandUrl + "&reqInitiator=" + result.FromUserId + "&reject=true");
                            $(this).dialog("destroy");
                            dialog = null;
                        }
                    });
            }
        });
    }

    // Initialization function - call this from your code
    module.initialize = function (chatHomeUrl, userId, timestamp, hash, updateOnlineFrequency) {
        commandUrl = chatHomeUrl + "/MessengerCommand.ashx?id=" + userId + "&timestamp=" + timestamp + "&hash=" + hash + "&callback=?";
        timerId = setInterval(updateOnline, updateOnlineFrequency);
        updateOnline();
    };

    return module;

} (jQuery));

 

You can include the above script as is or customize it according to your preferences. Once the script is included in need to initialize it with the data of the currently logged user by calling the Messenger.initialize(...) function. The function parameters are as follows:

  • chatHomeUrl - the url where eStreamChat is installed
  • userId - the id (username) of the currently logged user
  • timestamp - the current timestamp in "yyMMddhhmmss" format
  • hash - the user id, timestamp and the pre-shared secret key concatenated in this order and then hashed with SHA1
  • updateOnlineFrequency - how often the script should check for new chat requests (in miliseconds)

For example an initialization call might look like this:

Messenger.initialize("http://localhost/eStreamChat", "john82", "120529201000", "a340fe3c59", 5 * 1000);

Once the script is included and the initialization is added then users can accept chat requests. All that is left is to place "Start Chat" or similar links on the user profile page or wherever is appropriate on your site.

 

2. Adding chat request links

There are plenty of places where you can add chat links on your site - on the user profile page, on the online users box, on the friends page etc. The messenger link url would look like this:

http://your-chat-url/MessengerWindow.aspx?init=1&id=john82&target=jane85&timestamp=120529120000&hash=a340fe3c59

 
Let's break this url to parts:
  • http://your-chat-url/ - this is the url where eStreamChat is installed
  • &id= - this parameter is the Id of the currently logged user. It could be a username or any other id. It will be used as display name if none is specified
  • &target= - this is the Id of the chat request recipient
  • &timestamp= -  the timestamp parameter is the current date and time in the following format "yyMMddhhmmss"; for example May 29th, 2012 08:10:00pm would be "120529201000"
  • &hash= - the id, target, timestamp and the pre-shared secret key concatenated in this order and then hashed with SHA1. You can configure the secret key from the web.config file

 

Additionally there are some optional parameters that you might want to include:

  • &name= - this parameter is used to specify the display name of the user if it does not match the id provided by the ?id parameter.
  • &thumbUrl= - used to specify the url of the user avatar. If no thumbnail url is specified then the system will use one from gravatar