jQuery Real-Time Push Kwwika Plugin v0.1 released

16 Jun 2010

Update: Unfortunately Kwwika is no more. But I've created a similar plugin for Pusher who I now work for. You can get the realtime jQuery plugin here.


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

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:

[sourcecode language="html"]
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://api.kwwika.com/latest/"></script>
<script src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"></script>
[/sourcecode]

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.

[sourcecode language="html"]
<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>
[/sourcecode]

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.

[sourcecode lang="html"]
<script type="text/javascript">
$(function ()
{
$("div").kwwika();
});
</script>
[/sourcecode]

Examples

You can find three examples of how to use the jQuery Real-Time Push Kwwika Plugin from the links below:

The jQuery Real-Time Push Kwwika Plugin examples can be found on the API site:
http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/examples/

Plugin Files

The plugin files are hosted on our API server. You can either download them and host them yourself or your own server:

Min: http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.min.js

Full: http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js

Plugin Web Page

The jQuery Real-Time Push Kwwika Plugin has a dedicated page on the Kwwika Wiki:
http://wiki.kwwika.com/plugins/jquery-real-time-push-kwwika-plugin

Permalink
| Leave a comment  »