手机web聊天室v1.0

      在网上无意中发现了framework7这个框架，然后就有一个想法，想实现一个在线聊天室，花了两天写了一个小demo练练手（新手上路）。
      前端使用ajax向后端发送轮询来获取新数据，采用了long polling 长连接方式，后端用php语言实现，将聊天数据存入mysql中。
      最后实现的效果图是这样子的：

      前端代码只有一个页面，index.html(新手上路)，代码略。
      其中自己写的js文件代码如下：

1.framework7的初始化过程。

// Initialize your appvar myApp = new Framework7();// Export selectors enginevar $$ = Dom7;// Add viewvar mainView = myApp.addView('.view-main', {    // Because we use fixed-through navbar we can enable dynamic navbar    dynamicNavbar: true});

2.一个假的登陆
      这个登陆其实就只存了一个登录名称到cookie中。

$(document).ready(function(){    if($.cookie('username')!=null&&$.cookie('username')!=""){        $$('.right small').html("欢迎 ");        $$('.right a:nth-child(2)').html($.cookie('username'));      }    $$.get("../php/id.php",{},function(data){        id = data;        getmsg();    });});// login$$('#sign').on('click',function(){    var username=$$('#username').val();    if(username!=null&&username!=""){        $.cookie("username",username);        $$('.right small').html("欢迎 ");        $$('.right a:nth-child(2)').html(username);                              $$('.right a:nth-child(3)').remove();                  myApp.closeModal('.login-screen');      }else{        alert("名字不能为空哦！");    }});

界面如下：

3.发送信息

$$('#send').on('click',function(){    if($.cookie('username')==null||$.cookie('username')==""){        alert('请先登录！');    }else{        var date = new Date();        time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();        content = $$('#textarea').val();        username = $.cookie('username');        $$.post("../php/send.php",{            'username':username,            'content':content,            'time':time        },function(data){        });        $$('#textarea').val("");    }});

这一段php响应代码如下：

<!-- 发送信息 --><?phpinclude("myDB.php");if($_POST['content']!=null){    echo $_POST['username'].$_POST['time'].$_POST['content'];    $mydb = new myDB();    $mydb->insert($_POST['username'],$_POST['content'],$_POST['time']);}?>

insert是插入数据库的函数，存了三个值（名字，内容，时间）

4.轮询接受信息

// 接收消息function getmsg(){    $.ajax({        url:"../php/getmsg.php",        data:{'id':id},        timeout:10000,        error:function(XMLHttpRequest, textStatus, errorThrown){            if (textStatus == "timeout") { // 请求超时                  getmsg(); // 递归调用              } else { // 其他错误，如网络错误等                  getmsg();              }          },        success:function(data){            if(data!=""){                var obj = eval('('+data+')');                id = obj[obj.length-1].id;                var str = "";                for(i = 0;i<obj.length;i++){                    str += "<p><b>"+obj[i].username+":</b>"+obj[i].content+"<small>("+obj[i].time+")</small></p>\n";                }                $$('#mycontent').append(str);                down();            }            getmsg();        }    })}// 显示区域下滑到底层function down(){    var d = $$('#mycontent');    d.scrollTop(d.prop('scrollHeight'));  }

1.js发送ajax->php
2.php获取请求访问数据库有无新数据
   有：响应ajax请求，回到1
   无：休眠0.3s后重新访问数据库

这样客户端和服务端形成长连接，而php脚本和数据库还是短链接轮询。
下面是php代码：

<?phpinclude("myDB.php");set_time_limit(0);if($_GET['id']!=null){    $mydb = new myDB();    $time = 0;    while(true){        $str = $mydb->select($_GET['id']);        if($str!="]"){//在逻辑里面如果返回的是']'就代表没有数据            echo $str;            exit();        }else{            usleep(300000);            $time++;            if($time>=10){                exit();            }        }    }}?>