聊天室基本小步骤

最新推荐文章于 2024-04-30 16:57:21 发布

WTT

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量504

点赞数

文章标签：聊天 fckeditor border javascript function xhtml

本文链接：https://blog.csdn.net/w19911111/article/details/7330196

版权

由index.php组成主页面，建立基本框架

总体的php部分由chatindex部分构成，

检测用户名用checkuser.php。得到内容有getcontent.php。总体传递用send.php.

index.php内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>河软CSDN乐知学院聊天室</title>
<style>
table{
   margin:auto auto;
   border:#00F 1px dashed;
   border-collapse:collapse;
   font-size:14px;
   }
tr,td{
   border:#CCC 1px solid;}
</style>
</head>

<body><br><br><br><br><br>
<form action="../20120306-ajax-chatroom/login-check.php"     method="post">
<table width="300" border="0">
<tr>
    <td colspan="2" align="center">欢迎使用CSDN学院聊天室</td>
</tr>
<tr>
    <td align="right">用户名：</td>
    <td><input type="text" name="username" /></td>
</tr>
<tr>
    <td align="right">密码：</td>
    <td><input type="password" name="password" /></td>
</tr>
<tr>
    <td> </td>
    <td><input type="submit" value="登录" />  <input type="reset" / value="重置"></td>
</tr>
</table>
</form>
</body>
</html>

chatindex.php内容

<?php
include 'checkUser.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎进入聊天室~</title>
<style>
#chatContent{
   width:500px;
   height:300px;
   background-color:#FFC;
   text-align:left;
   overflow:scroll;}
#chatContent span{
   font-size:12px;}
table{
   margin:auto auto;
   border:#00F 1px dashed;
   border-collapse:collapse;
   font-size:14px;
}
tr,td{
   border:#CCC 1px solid;
   text-align:center;}
#send_btn{
   width:65px;
   height:65px;
   color:#00F;}
</style>
<script language="javascript" type="text/javascript" src="../../include/ajaxUtil.js"></script>

}

function processGetContent(xhr){

//把json格式的字符串转化为对象
var rows=eval("("+xhr.responseText+")");

var conStr=$$("chatContent").innerHTML;
for(var i=0;i<rows.length;i++){

  //把最大id值赋值给maxid
  maxid=parseInt(rows[i].id);

  //封装字符串
  conStr+="<span> <b><font color='blue'>"+rows[i].speaker+"</font></b> ["+rows[i].theip+"] 在 <font color='green'>"+rows[i].create_time+"</font> 说</span>：<br>  "+rows[i].content+"<br>";


}

//将内容显示到div中
$$("chatContent").innerHTML=conStr;
}

setInterval("getContent()",2000);

</script>

</head>

<body>
<table width="600" border="0">
<caption>ajax+json+js+dom+php+mysql实现超强聊天室河软CSDN乐知学院</caption>
<tr>
    <td>欢迎<?php echo $_SESSION['username']; ?>，进入聊天室</td>
    <td>在线用户列表：</td>
</tr>
<tr>
    <td><div id="chatContent"></div></td>
    <td>
    <select id="onlineUser" size="20" style="width:100px;">
      <option>所有人</option>
      <option>悟空</option>
      <option>唐僧</option>
      <option>八戒</option>
      <option>观音</option>
    </select>
    </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>
    <?php

//引用FCKeditor.php这个文件，基本的类和数据结构都在这里
include ("fckeditor/fckeditor.php");
//创建FCKeditor对象的实例。myFCKeditor即提交后，接收数据页面 _POST['content']使用
$FCKeditor = new FCKeditor("sendMsg");
//FCKeditor所在的位置，这里它的位置就是'FCKeditor' 文件夹
$FCKeditor -> BasePath='./fckeditor/';
//工具按钮设置
$FCKeditor -> ToolbarSet="ChatEditor";
//设置它的宽度
$FCKeditor -> Width='500px';
//设置它的高度
$FCKeditor -> Height='100px';
//生成
$FCKeditor -> Create();

?>





    </td>
    <td><input id="send_btn" type="button" value="发送" οnclick="sendMsg()" /></td>
</tr>
</table>

</body>
</html>

WTT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
聊天室基本小步骤

由index.php组成主页面，建立基本框架总体的php部分由chatindex部分构成，检测用户名用checkuser.php。得到内容有getcontent.php。总体传递用send.php.index.php内容：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999
复制链接

扫一扫