Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

C# and AJAX WhiteBoard

Rate me:
Please Sign up or sign in to vote.
4.71/5 (14 votes)
26 Oct 2009CPOL7 min read 98.9K   2.9K   95   28
This is a web-based WhiteBoard. It uses C# and AJAX to communicate between the server and clients. Data sharing between different users is made possible using AJAX. Drawings can be shared in real time over multiple clients.

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.

Screenshot - MainWindow1.jpg

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 the 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 about the 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 code (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 code. 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 Walter's JavaScript code. I designed a messaging mechanism to identify the client requests and serve the clients accordingly. I have divided the JavaScript into various files, depending on the functionality. Understanding the application flow is fairly simple.

Screenshot - concept.jpg

Notice that at any point, the client initiates a request for data. The server only acts as a central place to hold the data (using an 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 Walter'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 a request to clear server data, etc., are also placed in this file.
  2. ajaxobjects.js - Contains functions to create an 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 reused.
  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 the contact with the server.
  6. wz_jsgraphics.js - This is, of course, 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#)

  1. Constants.cs - This contains all the server side constants.
  2. 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 user's data.
  3. index.aspx - This is the main form with all the controls. It is just a service user. This page serves as a GUI which initialises the sharing process.

Putting it all together, this is a simple explanation:

  1. User "A" loads the "index.aspx" page on his screen.
  2. He selects a tool and a 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 sync, AJAX scripts run at a regular interval.
  6. When a user makes a change 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 accommodated.

Let's begin the detailed explanation of some of the important client-side functions:

JavaScript
//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


//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

//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 data handler is different. (Data handler is a function that decides what to do with the data returned from the server.)

JavaScript
//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. In the end, it also sets the current instruction number that it has received from the server.

JavaScript
//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. It then 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.

JavaScript
//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 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 the 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 function is called.

C#
//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 through the server-side ArrayList that stores the instructions. Here it also checks for existence of new data. In case new data exists, the output string is created and then returned using a Response.Write statement. (This is the string that is returned to the calling AJAX function.)

C#
//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 server-side ArrayList. In case of errors, it writes the error using a 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 the bulk of the task on the client side, the user experience is also great.

History

  • 2007/10/01 - Added the article (waiting for suggestions).
  • 2009/10/26 - Updated the functionality to send text messages. The new version was developed in VS 2008.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Japan Japan
My computer career started as an Avid Gamer Smile | :) . I loved the old times Xatax and Wolf. But, curiosity took over my gaming side and I started to search on ways to create all the mesmerising programs that I used.
I started programming in Qbasic and then moved on to every possible programming language I could lay my hands on. Qbasic, Pascal, C, C++, Win32 SDK, VB 6.0, VB.NET, C#, Struts, Core Java, Javascript, VbScript, Unix Shell Programming, SQL SERVER PROGRAMMING, WMI scripting....are some of the languages I can boast of being proficient in.
My formal introduction to computers was when I took the Bachelor of Computer Sciences (Pune, India) degree.Later on I got Masters from the same university.
My Professional Certifications include
MCP SQL Server 2000 (70-229)
Brainbench Certified MS SQL Server Programmer
Brainbench Certified MS SQL Server Administrator
Brainbench Certified ASP.NET Programmer
Brainbench Certified Javascript Programmer
Brainbench Certified RDBMS Concepts

Comments and Discussions

 
QuestionSeveral Sessions Pin
ngomez22-Dec-14 10:23
ngomez22-Dec-14 10:23 
AnswerRe: Several Sessions Pin
Amol M Vaidya4-Feb-15 15:29
professionalAmol M Vaidya4-Feb-15 15:29 
QuestionAdd new blackboard Pin
ngomez22-Dec-14 8:45
ngomez22-Dec-14 8:45 
QuestionPOsition of the board Pin
JL_Coder22-Apr-13 21:14
JL_Coder22-Apr-13 21:14 
AnswerRe: POsition of the board Pin
Amol M Vaidya17-Nov-13 23:16
professionalAmol M Vaidya17-Nov-13 23:16 
GeneralMy vote of 5 Pin
Menon Santosh9-Mar-12 23:35
professionalMenon Santosh9-Mar-12 23:35 
GeneralMy vote of 5 Pin
Ravinder Singh Bhawer21-Dec-11 23:25
Ravinder Singh Bhawer21-Dec-11 23:25 
GeneralMy vote of 5 Pin
ddevidurga5-Oct-10 3:24
ddevidurga5-Oct-10 3:24 
GeneralFresher to programming Pin
mano_remi18-Nov-09 18:39
mano_remi18-Nov-09 18:39 
GeneralRe: Fresher to programming Pin
Amol M Vaidya25-Nov-09 2:42
professionalAmol M Vaidya25-Nov-09 2:42 
GeneralGuide me a little bit please [modified] Pin
Bigbermusa22-Jun-09 3:11
Bigbermusa22-Jun-09 3:11 
GeneralRe: Guide me a little bit please Pin
Amol M Vaidya2-Jul-09 1:47
professionalAmol M Vaidya2-Jul-09 1:47 
GeneralRe: Guide me a little bit please Pin
Bigbermusa2-Jul-09 5:47
Bigbermusa2-Jul-09 5:47 
GeneralRe: Guide me a little bit please Pin
Amol M Vaidya26-Oct-09 3:55
professionalAmol M Vaidya26-Oct-09 3:55 
Hey buddy...finally managed to get my hands on this.

I have added the text functionality.
Tested and works on Chrome and IE 8

Regards,
Amol
GeneralRe: Guide me a little bit please Pin
Bigbermusa27-Oct-09 0:19
Bigbermusa27-Oct-09 0:19 
GeneralRe: Guide me a little bit please [modified] Pin
Bigbermusa27-Oct-09 1:24
Bigbermusa27-Oct-09 1:24 
GeneralIts Amazing! Pin
kirthikirthi2-Apr-09 19:43
kirthikirthi2-Apr-09 19:43 
GeneralAmazing! Pin
qiushi6-Dec-07 8:59
qiushi6-Dec-07 8:59 
GeneralRe: Amazing! Pin
Amol M Vaidya18-Feb-08 14:41
professionalAmol M Vaidya18-Feb-08 14:41 
Generalmozilla issue Pin
Am_CH16-Nov-07 0:59
Am_CH16-Nov-07 0:59 
GeneralRe: mozilla issue Pin
Amol M Vaidya17-Nov-07 14:59
professionalAmol M Vaidya17-Nov-07 14:59 
GeneralRe: mozilla issue Pin
Amol M Vaidya19-Nov-07 20:49
professionalAmol M Vaidya19-Nov-07 20:49 
GeneralRe: mozilla issue Pin
Am_CH20-Nov-07 1:08
Am_CH20-Nov-07 1:08 
GeneralWhite board Pin
Clark.Wade4-Oct-07 3:53
Clark.Wade4-Oct-07 3:53 
GeneralGreat idea Pin
gwestwater1-Oct-07 6:03
gwestwater1-Oct-07 6:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.