A Chat example

For this exercise we will be publishing and subscribing to the /SPA2010/CHAT topic.

Subscribe to an additional topic

Change your current page to no longer subscribe the the /KWWIKA/TWITTER/HASHTAGS/TECH topic and to instead subscribe to the /SPA2010/CHAT topic using the same subscription listener as you're currently using for tweets. This way your chat display will contain both tweets and chat messages.

You application should now be subscribing to:

• /KWWIKA/TWITTER/HASHTAGS/SPA2010
• /SPA2010/CHAT

   

   

   

Update your HTML

You should also add some HTML to allow a message and chat name and chat message to be entered and a button to send the message. An <input> element for the name and a <textarea> for the message text (we gave them ids chat_name and chat_message), and a button to click to send the message.

Publishing a chat message

Add some JavaScript to the page so that when the user clicks the send button the user name, the chat message and the current date and time are published on the /SPA2010/CHATtopic. Use the kwwika.Connection.publish(sTopic, mValues, oListener) method. The names of the fields we will be publishing should match those used by Twitter to allow us to integrate both the #SPA2010 tweets and our chat application messages.

Use ScreenName for the name of the user, Text for the message text, CreatedAt for the date and time that the message was published, and UserProfileImageUrl for a URL for an avatar to be displayed next to each message.

Hints & Tips

The Twitter fields are:

• Text
• ScreenName
• InReplyToScreenName
• InReplyToStatusId
• InReplyToUserId
• UserName
• Id
• Source
• Truncated
• Favourited
• UserFollowersCount
• UserProfileImageUrl

To actually send the message, you'll need to use the Kwwika api for publishing:

var sName = document.getElementById("chat_name").value;

var sMessage = document.getElementById("chat_message").value;

oConn.publish("/SPA2010/CHAT",

    {

        ScreenName: sName,

        Text: sMessage,

        CreatedAt: formatDate(new Date()),

        UserProfileImageUrl: "images/blank.jpg"

    },

    {

        commandSuccess:function(){},

        commandError:function(){}

    });

You should put this code in a function that can be called by the onclick of the button.  Here's an example of a button with a click handler:

<input type="button" value="Send" id="chat_send_btn" name="chat_send_btn" onclick="sendChatMessage();" />

Consider creating a function to build the HTML for each chat message:

            // builds the <li> message HTML

            function buildHtmlFromUpdate(mUpdate)

            {

                var sHtml = "<li class='message'>" +

                        "   "<span class='text'>" + mUpdate.Text + "</span>"," +

                        "   said <span class='name'>" + mUpdate.ScreenName + "</span>" +

                        "   @ <span class='time'>" + mUpdate.CreatedAt + "</span>" +

                        "</li>";

                return sHtml;

            };

You can create a function that returns a formatted data string based on a JavaScript Date object as follows:

function formatDate(oDate) {

      return padStart(oDate.getHours(), "0", 2) + ":" + padStart(oDate.getMinutes(), "0", 2) + ":"  + padStart(oDate.getSeconds(), "0", 2);

}

// pad out a value with the supplied sWith e.g. padStart("9", "0", 4) will return "0009"

function padStart(sPad, sWith, nRequiredSize)

{

    sPad += "";

    while (sPad.length < nRequiredSize)

    {

        sPad = sWith + sPad;

    }

    return sPad;

};

The next exercise is Exercise 5: Collaborate