Tutorial
Partcl.com is a platform allowing embedding of real-time data into the web-page without reloading. You may use AJAX or other methods to do it yourself, however with Partcl you can concentrate on the implementation of your idea rather than searching for data sources, building infrastructure and writing advanced code.
Let’s look at the Hello World example:
<!DOCTYPE html> <html> <head> <script id="partcl_client_script" web_key="101a0a5d5ed4dd590714d5dbb444757e" src="http://partcl.com/partcl.full.js"></script> </head> <body> Partcl says: <partcl cell_id="hello_world"></partcl> </body> </html>
URL to change value of "Partcl says" in realtime:
http://partcl.com/publish?publish_key=6edd28ff5ba123046765c48b66df11cd&id=hello_world&value=Hello World
-
<script id="partcl_client_script" …> - must be included in every “partclized” page to enable Partcl tags.
- web_key="101a0a5d5ed4dd590714d5dbb444757e" – you will receive your own web_key after registration.
-
<partcl …></partcl> - defines a placement of real-time data
- cell_id="hello_world" – hello_world is the name of your data stream. You may choose any name including letters, numbers, and special characters. Names staring with “srv:”, “prt:” and “com:” are reserved.
HTTP request parameters:
- publish_key=6edd28ff5ba123046765c48b66df11cd – you will receive your own publish_key after registration
- id=hello_world – hello_world is the name of your data stream
- value=Hello World – “Hello World” – any data you want to push on the page in real-time.
PARTCL DATA FEEDS
You may spend days on searching convenient and affordable data source to display currency exchange rate or gold price on your website. Not anymore. With Partcl all what you need is the one tag:
<!DOCTYPE html> <html> <head> <script id="partcl_client_script" web_key="101a0a5d5ed4dd590714d5dbb444757e" src="http://partcl.com/partcl.full.js"></script> </head> <body> <partcl cell_id="prt:fin.cur.eurusd.price"></partcl> </body> </html>
cell_id="prt:fin.cur.eurusd.price" - prt:fin.cur.eurusd.price is the ID of EUR/USD currency exchange. The full list of Partcl standard data feeds is available in References section after registration.
A SIMPLE CHAT
Let's build a chat working without server code. What we need:
- A method to push data to the server from a webpage
- A different way to display the data
<!DOCTYPE html>
<html>
<head>
<script id="partcl_client_script" web_key="101a0a5d5ed4dd590714d5dbb444757e" publish_key="6edd28ff5ba123046765c48b66df11cd" src="http://partcl.com/partcl.full.js"></script>
</head>
<body>
<div>
<partcl cell_id="chat_demo" method="append" last="10">
</div>
<hr />
<div>
Message: <input id="msg" type="text">
<input value="SEND" type="button" onclick="partcl.publish('chat_demo', document.getElementById('msg').value);">
</div>
</body>
</html>
- <script id="partcl_client_script" publish_key="…" web_key=”…”> – in order to use partcl.publish object you have to put publish_key alongside with web_key.
- partcl.publish(name, value) – JavaScript object pushing value to the data stream with the name specified.
- method="append" – parameter of the <partcl> tag which appends data instead of replacing it with new one.
- last="10" – parameter of the <partcl> fetches last ten values from the data stream.
The full list of available parameters of the <partcl> is available in references after registration
RECEIVE DATA VIA JAVASCRIPT API
You may need to process received data on a web-page before displaying it. Then you can use our function partcl.subscribe as per example below:
<!DOCTYPE html>
<html>
<head>
<script id="partcl_client_script" web_key="101a0a5d5ed4dd590714d5dbb444757e" src="http://partcl.com/partcl.full.js"></script>
<script>
partcl.$(function() {
partcl.subscribe(["a1","a2"], function(val, tag) {
document.getElementById(tag).innerHTML = val + 1;
});
});
function send(el) {
partcl.publish(el.id, el.innerHTML);
};
</script>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<td>
<div onClick="javascript:send(this);" id="a1">10</div>
</td>
<td>
<div onClick="javascript:send(this);" id="a2">10</div>
</td>
</tr>
</table>
</body>
</html>
Click/tap on any of 2 cells to increment it.
The event will fire every time new value of “a1” or “a2” data streams received.
More detailed references will be available after registration.
Happy partcling!
