php+mysql+jquery创建简单网页聊天室

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZhangY1217/article/details/78608255

 1.需求分析

实现用户登录在线聊天，聊天分为群聊和私聊，可以匿名聊天，发送表情、背景颜色、字体大小和敏感词屏蔽。显示在线名单和不在线的名单。

2.系统框架

  Php和Mysql和jquery实现的聊天系统

3.模块设计

   大致分为三个模块：聊天显示区、在线列表区、发送语言和表情区。对应的文件分的更加细化：login.php实现登录功能，nicklLogin.php实现匿名聊天和显示在线列表，show.php实现群聊天界面显示，speak.php实现语言发送和表情、字体大小、聊天背景更换的功能，Stalk.php实现私聊的语言发送等功能，Stalkshow.php实现私聊界面的显示，index.php用freamSet包含三个模块。

  数据库：chat

  数据库表：chat：存储多人聊天信息

           Chatuser：用户存储

           Face：表情存储(表情过多，表中没存储完)

           Schat：私聊信息存储

 

4.编码实现

Config.php数据库配置文件

<?php

if (!isset($_SESSION)) {

       ob_start();

       session_start();

}

//error_reporting(0); //容错语句

$link_ID=mysql_connect("localhost","root","");//链接Mysql服务器

mysql_select_db("chat"); //选择数据库

mysql_query("set names'utf8'");//选择编码格式

//mysql_query("SETcharacter_set_connection=uft-8 , character_set_results=utf-8,character_set_client=binary, sql_mode='' ");

date_default_timezone_set("Asia/Hong_Kong");//设置发言时间格式

       ?>

登录界面和注册界面：

点击登录和注册实现功能切换。

主界面：

Marqueen滚动显示在线人数，单击雪花显示表情区域，可进行匿名登录聊天，右侧显示在线和不在线下拉表单。实现敏感词屏蔽功能。

私聊主界面

点击下拉列表的用户进行私聊，私聊界面没有敏感词屏蔽，畅所欲言。点击红叉退出私聊界面，私聊界面没有匿名，我们不玩虚的，就是这么实在。

 

总结

因为主框架使用freamSet，在提交信息时想用jquery进行提交，但是不知道怎么让一个页面在一个fream中显示，这样可以在提交数据后就可以清空文本域的消息，后来就用了var text=$(window.parent.parent.frames["bottomFrame"].document).find('.input').html('');

来跨fream查找文本域来实现清空的功能。

聊天界面滚动条跟随问题解决：用jquery获取最后一条信息所在的位置，然后使用动画的功能让body的top等于最后一条的top，实现滚动条跟随，因为该聊天界面采用分开式聊天，自己的话显示在右边，别人的在左边，且聊天记录不能超过15条，需要判断最后一个是谁说的，来实现不论是谁最后说的滚动条都能跟随。

私聊界面如何在fream中显示：虽然知道使用jquery获取src然后替换掉原来的src就可以了，但是用上面的跨fream查找然后获取src怎么也获取不到，后来在网上找到$('#main',window.parent.document).attr('src','Stalkshow.php');就这么简单就是实现了。

关于发送表情问题：一开始我使用的是文本框，但是发现用jquery在文本框里输出一个图像标签，显示的还是html标签，后来把表情当做背景，虽然可以显示但是并不是我想要的。在网上也查了一些资料都是一些可以把div可编辑的jquery代码，也看不懂，最后发现textarea既可以打字又可以显示图片，然后就是多表情发送，form表单只能提交一个，那么实现数据共享，想到的当然是cookie和session了，这就需要jquery.cookie.js和jquery.session.js，把表情src存到数组然后在放到cookie中，最后用php存到数据库，当然在获取cookie后记得删除该cookie，不然表情会一直叠加。

做了这个聊天室，虽然很简陋，但是也学到了不少，让我php的功底有了一定的加深。（注：源代码打包发送在csdn下载处）

阅读更多