Remote scripting with javascript
I am currently working on a web based instant messenger client. In creating this I faced the problem of how to manipulate the web client from the server side. I didn’t want the client to reload every time it needed to check for status changes of contacts, new messages, send messages and what not. When supporting thousands of users this generates a lot of traffic. So for this I needed a way for the server to send commands to the client. A stable lightweight remote scripting solution.
Introduction
An article on remote scripting using iframes inspired me to write about how I solved the problem. I think that my solution is cleaner although not as backwards compatible. Early on in my IM project I decided to create a web client completely based on HTML dom manipulation through the use of javascript. This does not work in the old generation browsers ofcourse. However, I think the benefits definitely outweigh the drawbacks. And since this works nicely in both IE and Netscape I think it is very appealing. It should also work with newer versions of Opera but I haven’t tested it.
The client is nothing more than a small web page. This web page need to send commands to the server and as a result receive javascript function calls. I also wanted the client to automatically do this so the user didn’t have to click a refresh button every time.
The server
For this example I’ll use a simple “server script” that is nothing more than a finished javascript file. It only contains one command that displays a dialog box to let you know it’s loaded. Let’s name this file “server.js”.
alert('Hello client, I am the server!');In a real solution the server script might probably be php, asp, jsp or any choice of server solution that generates javascript. This, server.js however, is enough for this example.
The client
The client web page is a bit more complex but not much. I want the client to poll the server for new commands with an interval of, for example, thirty seconds. This is done easily with javascript using the statement setInterval. Below, the jsFunction will be called every 30th second.
function jsFunction() {
...
}
id = setInterval(jsFunction, 30000);To stop the interval you use the id you get as a return value from setInterval, using the statement clearInterval.
clearInterval(id);This is simple enough. However, now we want the function to actually do something useful. We want it to actually poll the server. I have solved this by dynamically inserting a new script element in the page header. This script element is supplied with the url to our server file. This is how you create the script element and set it’s attributes.
var script = document.createElement('script');
script.src = 'server.js';
script.type = 'text/javascript';
script.defer = true;Now we have a script tag created dynamically. This is not all though. For this script, server.js, to be loaded we need to obtain a reference to the html head element and insert the script element there.
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script);What I have described now is actually all code you need to start playing with remote scripting. However, every time you load new commands from the server.js you add a new element to the web page. It might be nice to remove old commands before loading new ones. So each time we create the script element we name it with an id so that we can easily find it. Before we load the new script commands we try to find the old script element. If we find it we remove it.
var head = document.getElementsByTagName('head').item(0);
script.id = 'lastLoadedCommands';
var old = document.getElementById('lastLoadedCommands');
if (old) head.removeChild(script');Conclusion
Well that’s it. Below you can see the finished client. It is, as you can see, quite simple and there are very few lines of code. The simpler it is, the easier it is to extend. The best part is that it follows the standards as set by the W3C. This should as a result be supported by every standard compliant browser. This particular example is tested with a two weeks old Mozilla (Netscape 6.x) and Internet Explorer 5.0. I suspect though that it will work with Opera as well. If you have questions, comments or critisism - please feel free to use the forums.
<html>
<head>
<title>My client</title>
<script type="text/javascript">
var g_remoteServer = 'server.js';
var g_intervalID;
function callServer() {
var head = document.getElementsByTagName('head').item(0);
var old = document.getElementById('lastLoadedCmds');
if (old) head.removeChild(old);
script = document.createElement('script');
script.src = g_remoteServer;
script.type = 'text/javascript';
script.defer = true;
script.id = 'lastLoadedCmds';
void(head.appendChild(script));
}
g_intervalID = setInterval(callServer, 30000);
</script>
</head>
<body>
This is the simple client.
< a href="javascript:callServer();">Call server now!< /a>;
< a href="javascript:clearInterval(g_intervalID);">Stop polling< /a>
</body>
</html>Tags: Javascript, remote scripting
One Response to “Remote scripting with javascript”
Trackbacks/Pingbacks
Leave a Reply