It’s the Web, just Kwwika

jQuery Real-Time Push Kwwika Plugin v0.1 released

Kwwika already makes it really easy to add real-time push functionality to any web page or website but we've gone a little bit further to try to make it even easier by writing a small but powerful jQuery plugin.

The jQuery Real-Time Push Kwwika Plugin allows you to define elements within a web page that you want to be updated with real-time data as soon as it's available. Anybody that has used a jQuery plugin should find our jQuery plugin really simple to use.

Here's how to use it.

Register for the Kwwika Beta programme

In order to use Kwwika you must first register so we can set up permissions within the Kwwika system to allow your website/domain to receive real-time push data from Kwwika.

So, register for the Kwwika Beta programme now.

Include script tags

You need to include the core jQuery library, the Kwwika JavaScript API and the jQuery Real-Time Push Kwwika Plugin files in your web page:

<script

src="http://code.jquery.com/jquery-1.4.2.min.js"

type="text/javascript"></script>

<script

src="http://api.kwwika.com/latest/"

type="text/javascript"></script>

<script

src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"

type="text/javascript"></script>

Define HTML

You define the topic to be requested from Kwwika by adding an attribute to an HTML element. The default attribute to identify the topic to request is data-topic. You identify the value to be placed within the element by adding a data-field attribute to the same element. In the example below if an update occurs on the /KWWIKA/TWITTER/SEARCHES/KWWIKA topic with a value for the ScreenName field it will be inserted as the html contents of the first <div> element.

We've decided to use attributes with a prefix of "data-" as the present HTML 5 draft suggests custom attributes should use this prefix.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

<html>

<body>

<div data-topic="/KWWIKA/TWITTER/SEARCHES/KWWIKA"

data-field="ScreenName"></div>

<div data-topic="/KWWIKA/TWITTER/SEARCHES/KWWIKA"

data-field="Text"></div>

</body>

</html>

Call the jQuery plugin

You call the jQuery Real-Time Push Kwwika Plugin in the same way you call any other jQuery plugin, by supplying a selector to the jQuery method ($) and calling the kwwika() function.

<script type="text/javascript">

$(function ()

{

$("div").kwwika();

});

</script>