Reading an XML file using Jquery, how to combine this with Server Sent Events and keep the page up-to-date?

I have the following XML file (data.xml):


<?xml version="1.0" encoding="UTF-8"?>
<users>
  <user>
      <id>2011</id>
      <posX>12</posX>
      <posY>29</posY>
      <title>Senior Developer</title>
  </user>
  <user>
      <id>2022</id>
      <posX>99</posX>
      <posY>99</posY>
      <title>updated!</title>
  </user>
</users>

I read this file using jquery:


$.ajax({
                    url: 'js/data.xml', // name of file you want to parse
                    dataType: "xml",
                    success: parse,
                    error: function(){alert("Error: Something went wrong");}
                  });

and display it using;


function parse(document){
                  $(document).find("user").each(function(){ 
                    $("#test").append(  // this is where all the reading and writing will happen
                    '<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
                    '<br /> X: '+$(this).find('posX').text()+
                    '<br /> Y: '+$(this).find('posY').text()+
                    '<br /> Title: '+$(this).find('title').text()+
                    '</div>'
                    );
                  });
                }

This all works fine. The XML is read and the data is displayed. Now this only happens when you load the page, so 1 time only.

It is possible for users to update the xml (let's say the title is changed), but you only see these changes if you refresh the page. I know you can load the the xmlfile each x seconds using jquery, but I've also read that server send events can push the xml file when changes are made in it.

I would like to do just that. The problem is: how do I implement SSE to achieve this?

I did some research and found some demo code:


var source = new EventSource("js/data.xml");
source.onmessage = function(event) {
    document.getElementById("test").innerHTML += event.data + "<br>";
};

but this didn't work.

So what I want:

Load page + load XML (this is what is currently does)

if the XML is changed in anyway, push the xml to the page (using SSE)

display the data (so if posX is changed, the div should be moved aswell)

My current working HTML code minus the SSE:


<!DOCTYPE html>
<html lang="en">
    <head>
      <style>
       #test { position: relative; width: 500px; height: 500px; padding: 0.5em; border: 1px solid red;}
        </style>
    </head>
    <body>
        <div id="test"></div>

        <script src="http://ift.tt/ILQp6H "></script>
        <script type="text/javascript">
            $(document).ready(function(){

                function parse(document){
                  $(document).find("user").each(function(){ 
                    $("#test").append(  // this is where all the reading and writing will happen
                    '<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
                    '<br /> X: '+$(this).find('posX').text()+
                    '<br /> Y: '+$(this).find('posY').text()+
                    '<br /> Title: '+$(this).find('title').text()+
                    '</div>'
                    );
                  });
                }

                  $.ajax({
                    url: 'js/data.xml', // name of file you want to parse
                    dataType: "xml",
                    success: parse,
                    error: function(){alert("Error: Something went wrong");}
                  });
            });
        </script>
    </body>
</html>

Hope someone can help me out

Reading an XML file using Jquery, how to combine this with Server Sent Events and keep the page up-to-date?

No comments:

Post a Comment