ajax+jquery+php+mysql实现简单的网页聊天室(带表情)

Posted 2021-04-15 PHP技术拓展

js代码：

<script type="text/javascript">

$(function(){

    $('.emotion').qqFace({

        assign:'msg', //给输入框赋值

        path:'arclist/' //表情存放的路径

    });

});

function replace_em(str){

    str = str.replace(/</g,'&lt;');

    str = str.replace(/>/g,'&gt;');

    str = str.replace(/ /g,'<br/>');

    str = str.replace(/[em_([0-9]*)]/g,'<img border="0" />');

    return str;

}

var maxID = 0;

//获取最新的聊天消息

function showmsg(){

    var d = new Date();

    var y = d.getFullYear();

    var m = d.getMonth() + 1;

    var day = d.getDate(); 

    var h = d.getHours();

    var m1 = d.getMinutes();

    var s = d.getSeconds();

    var time = y+"-"+ m+"-"+day+" "+h+":"+m1+":"+s;

    $('#times').html(time);

    //ajax去获取

    $.ajax({

        url : './data.php',

        data : {"maxID" : maxID},

        type:'get',

        dataType : 'json',

        success : function(jn_info){

            var s = "";

            for(var i=0; i<jn_info.length; i++){

                s += "<p style='color:"+jn_info[i].color+"'>"+jn_info[i].sender+"&nbsp;&nbsp;<br />";

                s += "&nbsp;&nbsp;"+replace_em(jn_info[i].msg)+"("+jn_info[i].add_time+")</p>";

                //把已经获取的最大id值赋予给maxID

                maxID = jn_info[i].id;

            }

            //$('#show_msg')[0].innerHTML += s;

            $('#show_msg').append(s);

            //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果

            $('#show_msg')[0].scrollTop = $('#show_msg')[0].scrollHeight;  //

        }

    });

}

//页面加载完毕就要显示最新聊天消息

$(function(){

    //每间隔2s就执行一次

    setInterval("showmsg()",1000);

});

function sendmsg(){

    //发表聊天消息  FormData+Ajax合作

    var fd = $('form').serializeArray();

    $.ajax({

        url:'./send.php',

        data:fd,

        type:'post',

        dataType:'html',

        success:function(msg){

            $('#result').html(msg);

            //表单域信息归位

            $('#color').val('');

            $('#receiver').val('');

            $('#msg').val('');

            //"留言成功"标志归位,2s后归位

            //setTimeout("guiflag()",2000);

        }

    });

}

//"留言成功"标志归位

function guiflag(){

   $('#result').html('');

}

js代码截图：

html页面代码：

由于是简易版的，没用框架和路由，php代码直接嵌入html代码中，不要忘了开启session。

<div id="main">

            <div id="left">

                <?php

                $sql="SELECT username FROM user";

                $result = mysql_query($sql);

                $num = mysql_num_rows($result);

                echo "<h2>在线名单：（".$num."人）</h2>"

                ?>

                <ul id="user">

                    <?php

                     $sql="SELECT username FROM user";

                        $result = mysql_query($sql);

                        while ($res=mysql_fetch_assoc($result)) {

                            echo "<li>".$res['username']."</li>";

                        }

                    ?>

                </ul>

                <ul id="anniu">

                    <li><a href=""><input type="button" value="刷新" ></a></li>

                    <li><a href="./liuyanban.php"><input type="button" value="给我留言" ></a></li>

                    <li><a href="./saolei.php"><input type="button" value="扫雷游戏" ></a></li>

                    <li><a href="./tuichu.php"><input type="button" value="退出聊天"></a></li>

                </ul>

            </div>

            <div id="right">

                <div id="content">

                    <h2 id="content-title">欢迎&nbsp;<font color="red"><?php echo $_SESSION['username'];?></font>&nbsp;来到聊天室(<span id="times"></span>)</h2>

                    <hr />

                    <div id="show_msg">

                        

                    </div>

                </div>

                <div id="send">

                    <form>

                    <div id="control">

                    颜色：

                    <select id="color" name="color">

                        <option value="">请选择</option>

                        <option style="color:#FF8888" value="#FF8888">爱的暗示</option>

                        <option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>

                        <option style="color:#0000FF" value="#0000FF">碧空蓝天</option>

                        <option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>

                        <option style="color:#000088" value="#000088 ">蔚蓝海洋</option>

                        <option style="color:#77FFEE" value="#77FFEE">清清之蓝</option>

                        <option style="color:#4400B3" value="#4400B3">发亮篮紫</option>

                        <option style="color:#A500CC" value="#A500CC">紫的拘谨</option>

                        <option style="color:#B088FF" value="#B088FF">卡其制服</option>

                        <option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>

                        <option style="color:#DC143C" value="#DC143C">卡布其诺</option>

                        <option style="color:#A52A2A" value="#A52A2A">苦涩心红</option>

                        <option style="color:#FF0000" value="#FF0000">正宗喜红</option>

                        <option style="color:#990099" value="#990099">红的发紫</option>

                        <option style="color:#FF0000" value="#FF0000">红旗飘飘</option>

                        <option style="color:#D2691E" value="#D2691E ">黄金岁月</option>

                        <option style="color:#800080" value="#800080">紫金绣贴</option>

                        <option style="color:#006400" value="#006400">橄榄树绿</option>

                        <option style="color:#000000" value="#000000">绝对黑色</option> 

                    </select>

                    <span>&nbsp;

                    <input type="button" name="biaoqing" class="emotion" value="表情">&nbsp;

                    </span>

                    聊天对象：

                    <select id="receiver" name="receiver">

                        <option value="" selected="selected">所有的人</option>

                        <?php

                        $sql="SELECT username FROM user";

                        $result = mysql_query($sql);

                        while ($res=mysql_fetch_assoc($result)) {

                            echo "<option value='{$res['username']}'>".$res['username']."</option>";

                        }

                        ?>

                    </select>

                    <br />

                    <textarea id="msg" name="msg"></textarea>

                    <input type="button" value="发送" onclick="sendmsg()" />

                    <span id="result"></span>

                    </div>

                    </form>

                </div>

            </div>

        </div>

html页面代码截图：

PHP代码生成json数据以供页面显示聊天记录：

<?php

//随时获取最新的聊天消息

$link = mysql_connect('','','');

mysql_select_db('',$link);

mysql_query('set names utf8');

$maxID = $_GET['maxID'];

//获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)

$sql = "select * from message where id>".$maxID;

$qry = mysql_query($sql);

$info = array();

while($rst = mysql_fetch_assoc($qry)){

if(!empty($rst['receiver'])){

$rst['sender'] = $rst['sender']."&nbsp;对&nbsp;".$rst['receiver']."&nbsp;说:";

}

else{

$rst['sender'] = $rst['sender']."&nbsp;说:";

}

    $info[] = $rst;

}

//把数据组织为二维数组

//把最新的聊天信息通过json格式提供出来

echo json_encode($info);

PHP代码生成json数据以供页面显示聊天记录(截图)：

PHP代码接收页面发送聊天记录存入数据库：

<?php

//发表聊天消息，服务器端

$link = mysql_connect('','','');

    mysql_select_db('',$link);

    mysql_query('set names utf8');

session_start();

$msg        = $_POST['msg'];

$receiver   = isset($_POST['receiver']) ? $_POST['receiver'] : '';

$color      = $_POST['color'];

$sender = $_SESSION['username'];

$sql = "insert into message values (null,'$msg','$sender','$receiver','$color',now())";

echo $sql;

if(mysql_query($sql)){

    echo "发表留言成功！";

}else{

    echo "发表留言失败！";

}

PHP代码接收页面发送聊天记录存入数据库(截图)：

mysql数据库聊天记录字段：

CREATE TABLE IF NOT EXISTS `message` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `msg` text,

  `sender` varchar(32) NOT NULL DEFAULT '',

  `receiver` varchar(32) NOT NULL DEFAULT '',

  `color` char(7) NOT NULL DEFAULT '',

  `add_time` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=45 ;

mysql数据库用户字段：

也可以直接就可以聊天，不设置用户登录；

CREATE TABLE IF NOT EXISTS `user` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `username` varchar(32) NOT NULL DEFAULT '',

  `password` varchar(32) NOT NULL DEFAULT '',

  `add_time` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=52 ;

代码比较零散，大家可以点击原文链接体验一下，或者登录www.fengyan.date体验。感兴趣也可以联系我所求整体原文件代码。