如何简单的创建一个多人在线聊天室
学习目标：
在本教程中，我们将要使用PHP和jQuery创建一个简单的在线聊天工具。 这种实用性的模块对于你想要有实时在线客户支持系统的网站可以说是完美。
废话不多说直接开始。
步骤1：HTML的代码结构
创建一个index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head><div id="wrapper"><div id="menu"><p class="welcome">Welcome, <b></b></p><p class="logout"><a id="exit" href="#">Exit Chat</a></p><div style="clear:both"></div></div><div id="chatbox"></div><form name="message" action=""><input name="usermsg" type="text" id="usermsg" size="63" /><input name="submitmsg" type="submit" id="submitmsg" value="Send" /></form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){});
</script>
</body>
</html>
css样式
body {font:12px arial;color: #222;text-align:center;padding:35px; }form, p, span {margin:0;padding:0; }input { font:12px arial; }a {color:#0000FF;text-decoration:none; }a:hover { text-decoration:underline; }#wrapper, #loginform {margin:0 auto;padding-bottom:25px;background:#EBF4FB;width:504px;border:1px solid #ACD8F0; }#loginform { padding-top:18px; }#loginform p { margin: 5px; }#chatbox {text-align:left;margin:0 auto;margin-bottom:25px;padding:10px;background:#fff;height:270px;width:430px;border:1px solid #ACD8F0;overflow:auto; }#usermsg {width:395px;border:1px solid #ACD8F0; }#submit { width: 60px; }.error { color: #ff0000; }#menu { padding:12.5px 25px 12.5px 25px; }.welcome { float:left; }.logout { float:right; }.msgln { margin:0 0 2px 0; }
上面这些CSS没什么特别的，除了部分的id或者class，我们将要在之后再为它们添加与修改
步骤2：使用php创建登陆表单
<? //放入index.php <html>标签的上方
//在信息存储到 PHP session 中之前，首先必须启动会话。session_start() 函数必须位于 <html> 标签之前：
session_start();function loginForm(){ //这是一个简单给自己命名的html架子echo'<div id="loginform"><form action="index.php" method="post"><p>Please enter your name to continue:</p><label for="name">Name:</label><input type="text" name="name" id="name" /><input type="submit" name="enter" id="enter" value="Enter" /></form></div>';
}if(isset($_POST['enter'])){//isset() 函数用于检测变量是否已设置并且非 NULL。if($_POST['name'] != ""){$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));}//stripslashes()删除反斜杠“/”。htmlspecialchars把预定义的字符 "<" （小于）和 ">" （大于）转换为 HTML 实体else{echo '<span class="error">Please type in a name</span>';}
}
?>
我们创建的这个loginForm()的function是由一个简单的登录表单组成的，它会询问用户的名字。 接下来，使用一个if和else的声明来验证这个人输入的名字。 如果一个用户输入了名字，我们将设置这个名字为$_SESSION[‘name’]。 由于我们将使用基于cookie的session来存储名字，所以我们必须要在任何东西反馈到浏览器之前请求一个session_start()。
有一件事情你可能需要额外的注意一下，我们使用了htmlspecialchars() function，这个会转换特殊符号到HTML实体，以此来保护名字变量的字符不会成为跨站点脚本（XSS）的受害者。 我们将在之后同时添加这个功能到将要发布在聊天记录里面的文字变量上。
步骤3：显示登陆表单
如果用户并没有登录，并且还没有产生session，为了要显示登录的表单，我们需要在原始代码中的#wrapper div和script标签周围使用另外一个if和else的声明。 反之，如果用户已经登录而且已经有了一个session，这个声明将隐藏登录表单，并且显示聊天框。
<?php
if(!isset($_SESSION['name'])){//判断是否有session 如果为空调动loginForm()loginForm();
}
else{?>
<div id="wrapper"><div id="menu"><p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p><p class="logout"><a id="exit" href="#">Exit Chat</a></p><div style="clear:both"></div></div> <div id="chatbox"></div><form name="message" action=""><input name="usermsg" type="text" id="usermsg" size="63" /><input name="submitmsg" type="submit" id="submitmsg" value="Send" /></form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){.....
});
</script>
<?php
}
?>
步骤4：处理用户的输入
在用户提交了表单以后，我们希望抓取他们的输入数据并且将它们写入到聊天记录里面， 要想完成这个，我们必须使用jQuery和PHP来同步客户端和服务器端的数据。
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){//用户点击发送内容$("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val();$.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", "");return false;});
});
</script>
- 在我们做任何事情之前，我们必须先抓取用户的输入数据，或者说是他们所输入到#submitmsg input里面的文字。 这个可以使用val()功能来实现，它会抓取表单里面的所有数据。 我们将抓取的数据放入到clientmsg变量里面。
- 接下来是最重要的一个部分：jQuery POST 请求。 这一步会发送一个POST的请求到我们稍后会创建的post.php文件， 它会POST客户端的输入数据，或者任何已经被存储到clientmsg变量的数据。
- 在最后，我们将设置value属性的值到空白来清除#usermsg input。
** 创建post.php**
现在，我们有了POST的数据，并且每一次当用户提交表单并发送一条新的消息的时候，数据们都被发送到了post.php文件里。 我们现在的目标就是抓取这些数据，然后回过头来写入到我们的聊天记录框里。
<?
session_start();
if(isset($_SESSION['name'])){$text = $_POST['text'];$fp = fopen("log.html", 'a');fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialcars($text))."<br></div>");//"a" （写入方式打开，将文件指针指向文件末尾进行写入，如果文件不存在则尝试创建之）fclose($fp);//关闭打开的文件
}
?>
- 在我们做任何事情之前，我们必须先用session_start()功能来开始post.php文件，因为我们也会在这个文件里面使用用户名字的session。
- 在做任何事情之前，我们需要使用isset布尔值，来检查如果session中’name’是否已经存在了。
- 现在我们将要抓取那些使用jQuery被发送到该文件的POST的数据， 并且我们将这些数据存储入$text变量。
- 这些所有的用户输入数据，都将被存储在log.html文件里。 为了完成这一步，我们将使用fopen功能的’a’模式打开文件，根据php.net的规则打开文件且仅限写入；接下来放置文件指示到文件的最后。 如果这个文件并不存在，那么尝试创建它。 接下来，我们使用fwrite()功能来写入我们的消息到这个文件里。
- 我们即将写入的消息将会被封闭在.msgIn div里面， 它会包含数据、使用date()功能所生成的时间、用户的session、以及内容等，同样的使用htmlspecialchars()功能来防止跨站点脚本XSS。
最后，我们使用fclose()来结束我们的文件操控。
步骤5：显示聊天记录（log.html） 内容
所有用户已经发布的消息都被处理过了，并且我们也是用jQuery将它们发布了；它们是被PHP写入到聊天记录框里面的， 所以唯一剩下来需要走的就是显示这些更新过的聊天记录给用户。
有些时候为了给自己省事，如果聊天文件里面已经有内容了的话，我们需要预先读取聊天记录到#chatbox div。
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){//file_exists() 指定的文件是否存在filesize()文件大小$handle = fopen("log.html", "r");$contents = fread($handle, filesize("log.html"));fclose($handle); echo $contents;
}
?></div>
这一次我们只是读取并且输出这些文件的内容到页面上。
jquery.ajax请求
ajax请求是我们做的所有事情的核心， 这个请求不仅仅允许我们在不刷新页面的情况下通过表单发送和接受数据，而且还允许我们处理数据请求。
function loadLog(){$.ajax({url: "log.html",cache: false,success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div },});}
我们将ajax的请求囊括在一个function里面， 过一会你就知道为什么了。 你可以看到，在上面，我们仅仅使用了3个jQuery ajax的请求对象。
url: 一个URL请求的字符串 我们将使用我们的聊天记录文件名log.html。
cache: 这个会避免我们的文件被放入缓存。 它会确保我们每一次发送请求的时候都会得到一个最新的聊天记录。
success: 这个允许我们附上一个功能来传递我们请求的数据。
你可以看到，我们接着移动我们请求的数据（html）到#chatbox div。
自动滚动
由于你可能在别的聊天工具里面看过，如果聊天记录的容器（#chatbox)的内容溢出了就会自动的向下滚动。 我们将要实现一个简单的而又相似的效果，需要做的是在我们请求ajax的前后对比容器的滚动高度。 如果你滚动的高度大于请求之后的高度，我们会使用jQuery的动画效果来滚动#chatbox div。
function loadLog(){ var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //请求之前滚动的高度$.ajax({url: "log.html",cache: false,success: function(html){ $("#chatbox").html(html); //添加聊天记录 //Auto-scroll var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the requestif(newscrollHeight > oldscrollHeight){$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //scrollTop垂直滚动条的位置} },});}
先请求现在#chatbox标签的高度，在请求ajax后的#chatbox标签高度。两者比较大小如果ajax大则通过.animate({})改变
保持数据的不断更新
setInterval (loadLog, 2500);
//Reload file every 2500 ms or x ms if you wish to change the second parameter
我们问题的回答你可以在setInterval function的那一行找到， 这个功能每2.5秒就会运行一次LoadLog() function，并且loadLog function会请求更新过的数据以及自动滚动的div。
步骤6：退出聊天室
为了允许用户登出并结束session，我们将要使用jQuery来完成它。
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){//If user wants to end session$("#exit").click(function(){var exit = confirm("Are you sure you want to end the session?");if(exit==true){window.location = 'index.php?logout=true';} });
});
</script>
简单的展示了如果用户点击#exit链接的时候弹出的确认提示， 如果用户确认了退出，也就是说他们决定结束session，那么我们将把他们送回到index.php?logout=true。 这个简单的创建了一个叫logout并且值为true的变量。 我们将要使用PHP来抓住这个变量。
if(isset($_GET['logout'])){ //Simple exit message$fp = fopen("log.html", 'a');fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");fclose($fp);//将显示退出聊天室的人名字显示出来session_destroy();//摧毁sessionheader("Location: index.php"); //
}
到这里就完成了一个多人在线聊天室啦
如何简单的创建一个多人在线聊天室相关推荐
- Unity联网之使用Socket简单实现多人在线聊天室（一）
「前言」 之前在一直在写lua联网等一些知识,虽然lua重要,但C#联网也必不可少是吧.所以呢,本篇博客就主要介绍如何使用Unity和C#在实现多人在线聊天室. 服务器 客户端工作原理:(通过消息类型 ...
- rudesocket如何使用_[WebSocket入门]手把手搭建WebSocket多人在线聊天室（SpringBoot+WebS...
前言 本文中搭建了一个简易的多人聊天室,使用了WebSocket的基础特性. 源代码来自老外的一篇好文: 本文内容摘要: 初步理解WebSocket的前后端交互逻辑 手把手使用 SpringBoot ...
- Python+django网页设计入门（20）：使用WebSocket创建多人在线聊天室
2019年3月8日-10日公众号送书活动:中小学生Python课应该学什么 ================ 前导课程: Python+django网页设计入门(19):创建新模型扩展自带用户表的字段 ...
- 多人在线聊天室，可私聊可发表情包哟~
这学期我们网络编程这门课主要是Window Socket,并且还是用我们没学过C++实现的,不过值得庆幸的是老师上课讲的很仔细,并且他讲课主要是讲思想,实现思路,最后老师没有限制我们课程设计使用的语言 ...
- java怎么实现踢掉在线用户_Java多人在线聊天室(3)— 踢人下线功能
作为一个聊天室,肯定会有很多人在里面聊天,那么要是有人里面捣乱怎么办?直接踢人不解释. 我们在创建数据库的时候就有这样的考虑,所以我们的账户有两种,一种是管理员,一种是普通用户. 打开的数据库!我们可 ...
- MFC多人在线聊天室
我已经在我的资源里上传了这个聊天室的代码了 基于MFC的C++的select模型的TCP聊天室 采用select网络模型,支持多人同时登陆,功能有上线.下线.群聊.私聊 使用CjsonObject进行 ...
- JS实现简易多人在线聊天室
一.设计要求: 1)用户应通过用户名,密码登录聊天室 2)聊天室可以显示所有在线用户 3)在每一条聊天内容之前,显示发出这条聊天内容的用户名. 4)聊天室可以用web,客户端,或者纯文本方式实现. 5 ...
- 面试--java实现一个多人图文聊天室(c/s或b/s)，写出思路
C/S:采用socket+多线程+io+swing(awt)技术: 基本思路:在服务器端建立一个连接端口,专门用来让客户端连接服务器端,并且不断的监听客户端的连接请求.当用户请求连接上服务器的时候,为 ...
- 第三章、C#简单界面在线聊天室C#一对多聊天（使用TCP转发实现的在线聊天室，文章末尾附免费项目资源）
C#网络通信系列学习笔记 第一章.C#最简单的控制台网络通信&C#最简单的控制台socket通信 第二章.C#控制台实现一对一聊天&C#socket类的简单封装 第三章.C#简单在线聊 ...
最新文章
- Asp.net控件开发学习笔记(三)-控件开发基础
- Scrapy爬取IT之家
- SM04 在线用户管理（踢人事务）
- [渝粤教育] 洛阳理工学院 基础素描 参考 资料
- Python 多版本共存问题
- 前端http请求跨域问题解决
- [论文阅读] Unifying Global-Local Representations in Salient Object Detection with Transformer
- 我是如何看穿候选人伪装的项目经验的？
- 小米路由器刷梅林教程_小米路由器3刷X-Wrt固件教程
- 加密软件VMProtect入门教程
- 【2017最新题库】通识课尔雅人文的物理学答案题库
- 抢购器 抢拍器 秒杀器 秒杀软件 抢购软件 设计思路(未实现)
- c语言中局部变量存放在哪里,C语言全局变量存放在哪里？
- 企业级代码静态测试工具Helix QAC——Helix QAC Dashboard基于团队的工程质量管理系统/Helix QAC资质认证
- 云蹦迪云广场舞软件开源源码
- 15.9 文本查询程序再探（继承）
- CmakeList中加入OpenCV编译项
- 2021-2027全球与中国电动垂直起降(eVTOL)飞行器基础设施市场现状及未来发展趋势
- UE5 QRCode插件使用
- 正和游戏：加密协议正在重塑公共产品 |链捕手