手机web聊天室v1.0

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

效果图

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

1.framework7的初始化过程。

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

// Add view
var 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响应代码如下:

<!-- 发送信息 -->
<?php
include("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代码:

<?php
include("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();
            }
        }
    }
}
?>
版权声明:本文为m0_37901610原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_37901610/article/details/77867642