Question

我发现很多信息投票的时间长短

Comet教程：http://www.screenr.com/SNH
在stackoverflow中加入：simple Long polling example

还有更多..

所以我试着制作一个我自己的，但我无法掌握它的后端，php部分。

Heres是我的html / jquery / ajax：

<!DOCTYPE html>
<html>
<head>
    <title>Arduino event poller</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <style type = "text/css" media="screen">
        body{ font:13px/1.5 "helvetica neue", helvetica, arial, san-serif; background:#FFF; }
        #main{ width:430px; height: 300px; display:block; padding:10px 0; float: left; overflow: auto;}
        .event { display:block; background: #ececec; width:380px; padding:10px; margin:10px; overflow:hidden; text-align: left; }  
        .event img { display:block; float:left; margin-right:10px; }  
        .event p { font-weight: bold; }
        .event img + p { display:inline; }
        .patient-name { display:inline; color: #999999; font-size: 9px; line-height:inherit; padding-left: 5px; }
        .event-text{ color: #999999; font-size: 12px; padding-left: 5px; }
        .event-timestamp{ color: #000; padding-left: 5px; font-size: 9px;}
    </style>

    <script type="text/javascript" charset="utf-8">
        /* Simple helper to add some divs.*/
        function addevents(patientroom, patientname, eventtyp, timestamp)
        {
            $("#main").append(
                "<div class='event'>"
                "<p>" + patientroom + "</p>"
                "<p class='patient-name'>" + patientname + "</p>"
                "<p class='event-text'>" + eventtyp + "</p>"
                "<p class='event-timestamp'>" + timestamp + "</p>"
                "</div>"
                );
        }

        /*This requests the url "getevents.php" When it complete*/
        function waitForEvents()
        {
            $.ajax({
                type: "GET",
                url: "getevents.php",

                async: true, /* If set to non-async, browser shows page as "Loading.."*/
                cache: false,
                timeout:50000, /* Timeout in ms */

                success: function(patientroom, patientname, eventtyp, timestamp) /* called when request to getevents.php completes */
                {
                    addevents(patientroom, patientname, eventtyp, timestamp);
                    setTimeout(
                        'waitForEvents()', /* Request next event */
                         1000 /* ..after 1 seconds */                   
                        );
                    },
                error: function (XMLHttpRequest, textStatus, errorThrown){
                    alert("Error:" + textStatus + " (" + errorThrown + ")");
                    setTimeout(
                        'waitForEvents()', /* Try again after.. */
                        "15000"); /* milliseconds (15seconds) */        
                },
            });
        };

        $(document).ready(function(){
                waitForEvents(); /* Start the inital request */
        });
    </script>
</head>
<body>
    <div id="main">
    </div>
</body>
</html>

这是我写的常规“后端”php部分：

<?php
//row loop
    $con = mysql_connect("localhost","something","something");
        if(!con)
        {
            die('Could not connect: ' . mysql_error());
        }

        mysql_select_db("arduino_db",$con);

        $result = mysql_query("SELECT * FROM events ORDER BY eventID DESC");
        //Start container
        while($row = mysql_fetch_array($result))
        {
            echo "<div class='event'>";
            echo "<img src='img/ev_img/red.jpg' alt='picture' />";
            echo "<p>" . $row['rumNr'] . "</p>";
            echo "<p class='patient-name'>" . $row['inneboendeNamn'] . "</p>";
            echo "<p class='event-text'>" . $row['handelse'] . "</p>";
            echo "<p class='event-timestamp'>" . $row['tid'] . "</p>";
            echo "</div>";
        }
        mysql_close($con);
   ?>

任何提示或想法？该示例不必是可扩展的，安全的或完整的，它只需要工作！

用ajax / jquery / php进行长轮询

0 个答案: