AJAX实现的多人协同设计
Download board.zip - 39.6 KB - Old Version
Download board_2008.zip - 55.03 KB - Latest VS 2008 Version
Introduction
This is an AJAX based WhiteBoard application. Typically unlike their desktop based counterparts, web applications need to be designed to use optimal server resources. This is one of the reasons for AJAX being popular. Here I demonstrate a powerful use of AJAX to make communication possible between two or more clients.
So, What can this do?
As I said, this is a WhiteBoard Application. Users are provided with certain drawing tools, color selections, etc. The basic idea is to share the user drawings among all the clients. All the users viewing the main page can participate in the drawing and share it with all other users. Clearing local canvas, server data, etc is also possible.
Background
A couple of years ago I was assigned the task of researching the capabilities of AJAX. Being a tech freak I was hell bent on convincing the client to use the then NEW AND HOT technology. I wasted a few days thinking on my right approach to the design and GUI. I wanted the application to look something like a desktop application and yet be executed in a browser. My aim was to avoid postbacks completely.(To impress the client). I was scampering through every result on google, reading every article on AJAX so as to get the perfect Application as a demo.
I happened to see a javascript (wz_jsgraphics.js) by Walter Zorn Link . It was then that the idea of building a web based WhiteBoard struck me. I give full credit to Walter for his excellent javascript. Once I learned using his script, it was just a matter of days before my own Web based Whiteboard was up and running.
The Basics...
As in all AJAX based applications, I have a main page that is displayed to the user. A page on the server handles all the requests and responses to this page. All the drawing part is done using Walters javascript. I designed a messaging mechanism to identify the clients request and serve the client accordingly. I have divided the javascript into various files, depending on the functionality. Understanding the application flow is fairly simple.
Notice that at any point the client initiates a request of data. The server only acts as a central place to hold the data (using ArrayList). The client sends a number indicating the start position from where it is requesting the data.
Using the code
You can find a detailed explanation of the graphics library on Walters's website.
I will start with a brief explanation on the contents of every file.
Javascript Files :-
1) ajaxfunctions.js - Contains functions that send and receive data from the server. It also contains javascript functions to update the screen canvas after getting the data from the server. Functions for selection of tools and colors, sending request to clear server data, etc are also placed in this file.
2) ajaxobjects.js - Contains functions to create ajax object and send the XMLHTTP request.
3) common.js - Contains functions I thought would cramp the main page. Mostly 1 - 2 line functions which are used many times.
4) constants.js - Contains all the client side constants used for the application. Classified as Colors, tools , query string , etc.
5) drawing.js - Contains functions that will handle the drawing and also initiate contact with the server.
6) wz_jsgraphics.js - This is ofcourse the most important drawing library without which this application is a stub. It contains all the functions that actually draw the shapes on the client side canvas.
ASP.NET Files. (Server Side C#) :-
7) Constants.cs - This contains all server side constants.
8) HandleData.aspx - This is the file where all the ajax requests are posted to. It has functions to decide what the client wants and then respond with the users data.
9) index.aspx - This is the main form with all controls. It is just a service user. This page serves as a GUI which initialises the sharing process.
Putting it up all together, this is a simple explanation.
1) User "A" loads the "index.aspx" page on his screen.
2) He selects some tool and some color and starts designing on his screen.
3) One more user, User "B" visits the "index" page.
4) Since "B" is a new user he gets all the data from the server and user A's canvas is replicated on user B's screen.
5) Now AJAX comes into picture. To keep both the users in sysnc, AJAX scripts are running at regular interval.
6) When a user makes any changes in the selected tool, color or draws something on the screen, an AJAX script updates the server.
7) The steps are repeated with any number of users.
8) I think ideally in a LAN/WAN environment 15 users can be easily accomodated.
Lets begin the detailed explanation of some of the important client side functions.
Collapse Copy Code
//Function to set the drawing data on the server
function setData() {
var requestUrl;
//Get the url path
requestUrl = CONST_URL_PATH;
requestUrl += getToolString();
xmlHttp = GetXmlHttpObject(setDataHandler);
xmlHttp_Send_Request(CONST_METHOD_POST, xmlHttp, requestUrl);
}//End of setData
Collapse Copy Code
//Function to get the drawing data from server
function getData() {
var requestUrl;
//Get the url path
requestUrl = CONST_URL_PATH;
requestUrl += CONST_QUERY_PARAM + CONST_QUERY_PARAM_GETDATA;
requestUrl += '&' + CONST_QUERY_READ_FROM + getValue('ReadFrom');
xmlHttp = GetXmlHttpObject(getDataHandler);
xmlHttp_Send_Request(CONST_METHOD_POST, xmlHttp, requestUrl);
}//End of setData
Collapse Copy Code
//Function to get the query string for the current tool
function getToolString() {
var strOut;
strOut = CONST_QUERY_PARAM + CONST_QUERY_PARAM_SETDATA;
strOut += '&' + CONST_QUERY_ACTION + CurrentTool;
strOut += '&' + CONST_QUERY_COLOR + CurrentColor;
strOut += '&' + CONST_QUERY_STROKE + CurrentStroke;
strOut += '&' + CONST_QUERY_STARTX + StartX;
strOut += '&' + CONST_QUERY_STARTY + StartY;
strOut += '&' + CONST_QUERY_EndX + EndX;
strOut += '&' + CONST_QUERY_EndY + EndY;
return strOut;
} //End of getToolString
The "setData" function calls the "getToolString" function before contacting the server. The "getToolString" function constructs a string in the required format to be sent to the server. Then the "setData" function brings the AJAX object into use and sends a string of data to the server.
The "getData" function creates a request string and requests data from the server, again using AJAX objects.
Notice that in both the functions the callback datahandler is different.(Datahandler is a function that decides what to do with the data returned from the server)
Collapse Copy Code
//Function to handle the callback for the set data ajax function
//THIS HANDLER IS USED FOR TWO AJAX FUNCTIONS
function setDataHandler() {
//readyState of 4 or 'complete' represents that data has been returned
//Check the state of the page
if (xmlHttp.readyState == CONST_INT_READY_STATE || xmlHttp.readyState == CONST_READY_STATE){
//Get the response text
var strText = xmlHttp.responseText;
//Check if error occured
if (strText.indexOf(CONST_ERROR) >= 0) {
//Error occured
errHandler(strText.split(CONST_INTERNAL_SEPERATOR)[1]);
} else {
//Reset the status bar text msg for success
errHandler(CONST_MSG_DATASET);
//Change the value in the hidden so that next
//read starts after the
//current value
setValue('ReadFrom', parseInt(getValue('ReadFrom')) + 1);
}//End of checking if error occured
//Toggle the waiting div
toggleLoading(false);
} //End of checking if the script is over
} //setDataHandler
The "setDataHandler" function first checks if the browser is in ready state. Then it reads the returned ResponseText from the AJAX object, checks for any errors and then resets the status bar message accordingly. At the end it also sets the current instruction number that it has received from the server.
Collapse Copy Code
//Function to handle the call back of the get data ajax function
function getDataHandler() {
//readyState of 4 or 'complete' represents that data has been returned
//Check the state of the page
if (xmlHttp.readyState == CONST_INT_READY_STATE || xmlHttp.readyState == CONST_READY_STATE){
//Get the response text
var strText = xmlHttp.responseText;
//Check if error occured
if (strText.indexOf(CONST_ERROR) >= 0) {
//Error occured
errHandler(strText.split(CONST_INTERNAL_SEPERATOR)[1]);
} else {
//Reset the status bar text msg for success
errHandler(CONST_MSG_DATAGET);
//Update the screen
var iNum = updateScreen(strText);
//Change the value in the hidden so that next
//read starts after the set value
setValue('ReadFrom', parseInt(getValue('ReadFrom')) + iNum);
}//End of checking if error occured
//Toggle the waiting div
toggleLoading(false);
//Set a call to the same function again after the specified time interval
window.setTimeout('getData()', CONST_DATA_TIMEOUT);
} //End of chekcing if the script is over
} //End of getDataHandler
The "getDataHandler" function also checks if the browser is in ready state. Then it reads the returned ResponseText from the AJAX object, checks for any errors and then resets the status bar message accordingly. Unlike the "setDataHandler" function, this function first updates the screen (updateScreen function call) and then sets the current instruction number.
Collapse Copy Code
//function that will handle the data that is received from the getData function
function updateScreen(strText) {
//Split the text into lines
var strLines = strText.split(CONST_LINE_SEPERATOR);
var i;
//Check the length of the lines
if (strLines.length > 0) {
//Loop on the no of lines
for (i = 0; i < strLines.length; i++) {
//Get the individual properties by splitting each string
var strMainText = strLines[i].split(CONST_INTERNAL_SEPERATOR);
//Check if CLEAR IS CALLED
if (strMainText[0] == CONST_ACTION_TOOL_CLEAR) {
//CLEAR THE CANVAS
clearCanvas();
} else {
//Set all the variables before calling the draw function
setTool(strMainText[0]);
setColor(strMainText[1]);
setStroke(parseInt(strMainText[2]));
setStart(parseInt(strMainText[3]), parseInt(strMainText[4]));
setEnd(parseInt(strMainText[5]), parseInt(strMainText[6]));
//Now call the draw function
drawPic();
} //End of checking the call for CLEAR
} //End of looping on the no of lines
//Return the count so the next search starts after this number
return i;
} //End of checking the no of lines
return 0;
} //End of updateScreen
The "updateScreen" function splits the received text based on the predefined special characters. The first split is actually the split of instructions. The second split is the inter instruction split (to get the tool, color, start and end, etc) After breaking the data it draws the required image on screen.(call to drawPic function) Now, let us have a look at the server side. The server side is handled by the "HandleData.aspx" page load event. Depending on the request the "getData" or "setData" functions are called.
Collapse Copy Code
//Function to get the data and set it to the page
private void getData()
{
string strReadFrom = Request.QueryString.Get(Constants.CONST_QUERY_READ_FROM);
//Check the read value
if (strReadFrom != null && strReadFrom.Length > 0)
{
StringBuilder strText = new StringBuilder("");
int iFrom = Int32.Parse(strReadFrom);
//Get the array list from the application object
ArrayList arrData = (ArrayList)Application[Constants.CONST_APP_DATA_ARRAY_NAME];
//Check if ifrom is equal to the length of the arraylist
//Means no new data to read
if (iFrom >= arrData.Count)
{
//Screen is already updated
//Write the error with the first word set to identify as error
Response.Write(Constants.CONST_ERROR +
Constants.CONST_INTERNAL_SEPERATOR +
Constants.CONST_ERROR_ALREADY_UPDATED);
return;
} //End of checking the length
//Add the first element
strText.Append(arrData[iFrom]);
//Do the process to create a response string
for (int i = iFrom + 1; i < arrData.Count; i++)
{
strText.Append(Constants.CONST_LINE_SEPERATOR + arrData[i]);
} //End of appending the data to the string builder
//Write the string builder to the page
Response.Write(strText.ToString());
}
else
{
//Write the error with the first word set to identify as error
Response.Write(Constants.CONST_ERROR +
Constants.CONST_INTERNAL_SEPERATOR +
Constants.CONST_ERROR_PARAM);
}//End of checking the read value
} //End of getData
This "getData" function first reads the COUNTER from where the client is requesting data. It then loops on the serverside ArrayList that stores the instructions. Here it also checks for existence of new data. In case new data exists, only then the output string is created and then returned using the "Response.Write" statement. (This is the string that is returned to the calling AJAX function).
Collapse Copy Code
//Function to set the data on the server
private void setData()
{
//Get the array list from the application object
ArrayList arrData = (ArrayList)Application
[Constants.CONST_APP_DATA_ARRAY_NAME];
//Get all the drawing values from the request querstring
string strAction = Request.QueryString.Get(Constants.CONST_QUERY_ACTION);
string strColor = Request.QueryString.Get(Constants.CONST_QUERY_COLOR);
string strStroke = Request.QueryString.Get(Constants.CONST_QUERY_STROKE);
string strStartX = Request.QueryString.Get(Constants.CONST_QUERY_STARTX);
string strStartY = Request.QueryString.Get(Constants.CONST_QUERY_STARTY);
string strEndX = Request.QueryString.Get(Constants.CONST_QUERY_ENDX);
string strEndY = Request.QueryString.Get(Constants.CONST_QUERY_ENDY);
if (strAction != null && strAction.Length > 0)
{
if (strAction.Equals(Constants.CONST_ACTION_TOOL_CLEAR))
{
arrData.Add(strAction + Constants.CONST_INTERNAL_SEPERATOR);
}
else
{
//Check if all are present
if (strColor != null && strStroke != null &&
strStartX != null && strStartY != null &&
strEndX != null && strEndY != null &&
strColor.Length > 0 && strStroke.Length > 0 &&
strStartX.Length > 0 && strStartY.Length > 0 &&
strEndX.Length > 0 && strEndY.Length > 0)
{
//Set the data in the application array
arrData.Add(strAction + Constants.CONST_INTERNAL_SEPERATOR +
strColor + Constants.CONST_INTERNAL_SEPERATOR +
strStroke + Constants.CONST_INTERNAL_SEPERATOR +
strStartX + Constants.CONST_INTERNAL_SEPERATOR +
strStartY + Constants.CONST_INTERNAL_SEPERATOR +
strEndX + Constants.CONST_INTERNAL_SEPERATOR +
strEndY);
//Write a blank string as an identification that no error occured
Response.Write("");
}
else
{
//Write the error with the first word set to identify as error
Response.Write(Constants.CONST_ERROR +
Constants.CONST_INTERNAL_SEPERATOR +
Constants.CONST_ERROR_PARAM);
}//End of Checking if all querystrings are valid
}
}
else
{
//Write the error with the first word set to identify as error
Response.Write(Constants.CONST_ERROR +
Constants.CONST_INTERNAL_SEPERATOR +
Constants.CONST_ERROR_PARAM);
}//Check if the action is not null
} //End of setData
The "setData" function does exactly the opposite task. It gets all the parameters from the request and makes a string out of it. It then adds the string to the serverside ArrayList. In case of errors it writes the error using the "Response.Write" statement. Other places of concern are the function calls that are set on the "index.aspx" page. You can easily add new colors and new functionality. Just add the relevant constants and incorporate the required functions. The messaging architecture remains the same.
Points of Interest
A simple messaging architecture can be used to linkup many computers. When the application is running it seems to be a very huge task. Since we are doing bulk of the task on the client side the user experience is also great.
