手机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();
            }
        }
    }
}
?>
已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页