0

I am trying to build a real-time notification system using jquery/Ajax for the social network web site I am developing (using Symfony2). I succeeded to make that notification system work but the issue is that it doesn't work correctly. The explanation is below:

I downloaded wdCalendar calendar (from this link: http://www.webappers.com/2010/06/08/wdcalendar-jquery-based-google-calendar-clone/ and you can have a look at this link to see the demo: http://www.web-delicious.com/jquery-plugins-demo/wdCalendar/sample.php) and I integrated it on Symfony2. Then I created three files: mapage.html , moslem.php and moslem1.php . The code of each file is shown below:

the code of mapage.html:

<html>
<head>

</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function() {
        setTimeout( test, 1000);    
});
    function test() {
        var start = new Date().getMilliseconds();
        $.ajax({
            url: 'moslem.php',
            type: 'POST',
            success: function(data) {
                var max;
                max = data;
                function test1() {
                    $.ajax({
                        url: 'moslem1.php',
                        type: 'POST',
                        dataType: 'JSON',
                        success: function(data1) {
                            if(data1.id>max)
                            {
                                document.write("an event was added with the id: "+data1.id+" and with the subject: "+data1.subject+"<br>");
                            }
                        }
                    });
                }
                var end = new Date().getMilliseconds();
                var time = end - start;
                var time1 = 1000 - time;
                setTimeout( test1, time1);
    }
        });
        setTimeout( test, 1000);    
}
    </script>
</body>

the code of moslem.php :

    <?php
$con=mysqli_connect("localhost","root","","test");
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM jqcalendar ORDER BY id DESC LIMIT 0, 1");
$num_rows = mysqli_num_rows($result);
if($num_rows!=0){
while($row = mysqli_fetch_array($result)) {
    $max=$row['Id'];
}
echo $max;
}
mysqli_close($con);
?>

the code of moslem1.php :

    <?php
$con=mysqli_connect("localhost","root","","test");
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM jqcalendar ORDER BY id DESC LIMIT 0, 1");
while($row = mysqli_fetch_array($result)) {
    $notification = array('id'=>$row['Id'],'subject'=>$row['Subject'],'location'=>$row['Location'],'description'=>$row['Description'],'starttime'=>$row['StartTime'],'endtime'=>$row['EndTime']);
}
echo json_encode($notification);
mysqli_close($con);
?>

In the database on which I am working there is a table called "jqcalendar", its structure is as below (the field name is on the left and the field type is on the right):

Id : int(11)
Subject : varchar(1000)
Location : varchar(200)
Description : varchar(255)
StartTime : datetime
EndTime : datetime
IsAllDayEvent : smallint(6)
Color : varchar(200)
RecurringRule : varchar(500)

The field "Id" above is the primary key of the table "jqcalendar" and it is auto-incremented as well. Well, concerning the notion of the notification system that I am trying to build is as follows: when an event is added on the calendar, the insertion of the new line in the table "jqcalendar" will be detected thanks to a jquery/Ajax request (on the table "jqcalendar") which happens every one second, then the content of some fields (which are "Id" and "Subject") will be displayed on the screen (the file mapage.html is the one which display them) as a notification. The issue is that when I add the event with the id "10" the notification will be not displayed. By the way, I added 20 events in the calendar and this is the output of the notifications that I obtained on the screen:

an event was added with the id: 1 and with the subject: a
an event was added with the id: 2 and with the subject: z
an event was added with the id: 3 and with the subject: e
an event was added with the id: 4 and with the subject: r
an event was added with the id: 5 and with the subject: t
an event was added with the id: 6 and with the subject: y
an event was added with the id: 7 and with the subject: u
an event was added with the id: 8 and with the subject: i
an event was added with the id: 9 and with the subject: o
an event was added with the id: 11 and with the subject: ^^
an event was added with the id: 12 and with the subject: q
an event was added with the id: 13 and with the subject: s
an event was added with the id: 14 and with the subject: d
an event was added with the id: 15 and with the subject: f
an event was added with the id: 16 and with the subject: g
an event was added with the id: 17 and with the subject: h
an event was added with the id: 18 and with the subject: j
an event was added with the id: 19 and with the subject: k
an event was added with the id: 20 and with the subject: l

As you can notice it clearly above, there is a missed notification which is the one of the event with the id "10". Just focus on the two lines below:

an event was added with the id: 9 and with the subject: o
an event was added with the id: 11 and with the subject: ^^

So my question is how shall I make the notification of the event with id=10 appears like the other notifications. I really wonder what is the problem here and why exactly the notification of the event which has id=10 can't be displayed!. I have tried to find a solution for a long time but nothing has changed. Is there anyone who any idea??

Thanks in advance.

Nadim
  • 382
  • 1
  • 7
  • 29
  • 2
    Well for real-time notification system you might want to use `WebSockets`. – Rolice May 22 '14 at 09:46
  • you should recall the test method from complete callback of ajax request. But, wait, i've hard time to understand your logic there – A. Wolff May 22 '14 at 09:51
  • @Rolice: in fact, I asked a question on this web site about how to build a real-time notification system and some people answered me that it can be build using jquery/Ajax. And by the way, as I explained, I succeeded to build the notification system and it runs not so bad, but It still have that problem. In addition, I have searched on internet about how to build such a system using WebSockets but unfortunately right now I haven't found any clear explanation about how to do that. Well, do you have any tutorials about building real-time notification systems using WebSockets?..Thanks in advance – Nadim May 22 '14 at 10:57
  • @A. Wolff: sure I did that as you can notice in the code I created. By the way, could you tell me what you didn't understand about my logic exactly??...thanks in advance. – Nadim May 22 '14 at 11:00
  • Ajax is async, you are recalling `setTimeout( test, 1000);` before previous requests has completed – A. Wolff May 22 '14 at 11:01
  • @A. Wolff: so if I call setTimeout( test, 1000); before the accomplishment of the previous request, then why is the request for the event with id=10 the only one which doesn't work correctly?? – Nadim May 22 '14 at 11:19
  • I don't know. Maybe there is no such entry in database. But like i said i didn't at all understand your logic using nested timeouts here and i don't really want to go deeper with such code, i'm sorry – A. Wolff May 22 '14 at 11:24
  • @A. Wolff: by the way, there was an insertion in the database (I mean the insertion of the event which has id=10), I checked that out. Concerning the code that I have, believe me sir I have worked so hard to built it!!...I know that it is complicated but at least it works (but not correctly)...Any way thanks a lot for your help. – Nadim May 22 '14 at 14:42
  • @NadimAkram, sorry about the late response... I suggest WebSockets since their purpose is to provide real-time interoperations over the web, while AJAX can be adapted but it is more heavy and not so precise. You can find a lot about them and see projects and code in GitHub. I suggest you to take a look here: https://github.com/search?q=websocket+node.js&ref=cmdform I have my project there on the same topic. I suggest digging in Node.JS, because it is perfect platform for such puposes and it utilizes JavaScript language. Use the socket.io module for node.js - it provides security and power. – Rolice May 22 '14 at 18:09
  • @Rolice: thanks a lot for the link, I really appreciate your help, well on that link I found many projects, so can you give me just the link of your own project??...By the way, I have tried to try to get started with Node.js with the example on this link: [link](http://nodejs.org/) but unfortunately when I execute this command line with the node program: % node example.js , nothing happens (by the way I put the code in a file called example.js that I put at the www directory of Wampserver before I execute that command line). Can you tell me what is wrong here??...Thanks in advance. – Nadim May 23 '14 at 09:29
  • The project is in messy condition, but if you like to take a look: https://github.com/intelligent-systems/intelli-chat :) I have started a rewriting with the support of server-per-room, but the time these days is short so nobody is currently on the project. You might need some modules for certain apps, you might want to check how they are getting installed: http://stackoverflow.com/questions/5817874/how-do-i-install-a-module-globally-using-npm – Rolice Jun 16 '14 at 10:09
  • what a very fast reply man!!!..lol...anyway I built my notification system using Jquery/Ajax and it works correctly..thanks a lot for your help my friend :) – Nadim Jun 17 '14 at 14:30

0 Answers0