您的位置：首页 > 移动开发 > 微信开发

在线聊天室小程序

2015-10-11 21:04 465 查看

最近，学习了慕课网上的jQuery课程，其中jQuery基础中有一个小实例在线聊天室。本人从网上下载了源码，自己实现了下。

这个小程序的流程很简单，就是输入用户信息登陆到聊天界面，在聊天界面可以进行聊天，界面可以自动获取聊天记录，在线人员，可以实现下线功能。界面如下：

程序的部分前端代码

登陆页面部分：

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
.content{width:350px;text-align:center;margin-top:110px;margin-left:auto;margin-right:auto; }
.content div{margin-bottom:5px;}
p{font-weight:bold;font-size:16px;}
#spnMsg{background-color:#ffe0a3;display:none;}
</style>
<script type="text/javascript">
$(function($){
$("#spnMsg").ajaxStart(function(){
$(this).html("正在登陆.....").show();
});
$("#spnMsg").ajaxComplete(function(){
$(this).html("").hide();
});
$("#btnlogin").click(function(){
var $user=$("#username");
var $pass=$("#password");
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=login&d="+new Date()+"&name="+$user.val()+"&pwd="+$pass.val(),
success:function(data){
if(data.indexOf("True")>=0){
window.location.href="chatMain.html";
}else{
alert("用户名或密码错误!");
}
}
});
});
});
</script>
</head>

<body>
<div class="content">
<p>用户登录</p>
<div><label>用户名：</label><input type="text" id="username" name="username"/></div>
<div><label>  密码：</label><input type="password" id="password" name="password"/></div>
<div><input type="button" value="登陆" id="btnlogin"></div>
<span id="spnMsg">Tip</span>
</div>
</body>
</html>

聊天室的前端代码为：

<!DOCTYPE html>
<html>
<head>
<title>聊天大厅</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script language="javascript" type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
body{text-align:center;padding-top:70px;font-size:12px;}
.container{width:710px;height:380px;margin-left:auto;margin-right:auto;border:4px solid gray;}
.topframe{margin-bottom:5px;}
.chat{width:60%;float:left;}
#txtchat{width:370px;height:230px;overflow-y:scroll;margin-left:20px;}
.online{width:20%;float:left;margin-right:70px;}
#txtonline{width:130px;height:230px;overflow-y:scroll;}
#txtchat,#txtonline{border:1px solid black;text-align:left;padding-left:10px;padding-top:10px;line-height:20px;}
.format{clear:both;}
p{font-weight:bold;font-size:14px;}
.bottomframe{text-align:left;margin-left:25px;}
.bottomframe textarea{width:465px;height:50px;}
.sendcontent span{display:block;float:right;margin-right:100px;margin-top:15px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
//键盘监听事件
$(document).keypress(function(e){
if(e.which==13){
sendMessage();
}
});
//读取消息
getMessage();
//读取在线用户
getOnlineUser();
//初始化表情
initFace();
//自动刷新
AutoRefresh();
//给表情添加点击事件
$(".bottomframe image").click(function(){
var $txtobj=$("#txtcontent");
var contentstr="";
if($txtobj.val()!=undefined){
contentstr=$txtobj.val()+"<:"+this.id+":>";
}else{
contentstr="<:"+this.id+":>";
}
$("#txtcontent").val(contentstr);
});
//发送消息
$("#send").bind("click",sendMessage);
//下线
$("#offline").click(function(){
if(confirm("确定要下线吗？")){
offline();
}
});
});
//初始化表情
function initFace(){
var imgstr="";
for(var i=1;i<=7;i++){
imgstr+="<image src='QQface/"+i+".gif' id='"+i+"'/>"
}
$(".imgframe").html(imgstr);
}
//读取消息
function getMessage(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=ChatList&d="+new Date(),
success:function(data){
if(data.indexOf("unLogin")>=0){
alert("非法进入！");
window.location.href="index.jsp";
}else{
$("#txtchat").html(data);
}
}
});
}
//读取在线用户
function getOnlineUser(){

$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=onLineList&d="+new Date(),
success:function(data){
$("#txtonline").html(data);
}
});
}
//发送消息
function sendMessage(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=SendContent&d="+new Date()+"&content="+$("#txtcontent").val(),
success:function(data){
if(data.indexOf("True")>=0){
getMessage();
$("#txtcontent").val("");
gotoBottom();
}else{
alert("发送失败！");
}
}
});
}
//下线
function offline(){
$.ajax({
type:"POST",
url:"DealData.jsp",
data:"action=OffLine&d="+new Date(),
success:function(data){
if(data.indexOf("True")>=0){
alert("下线成功");
window.location.href="index.jsp";
}
}
});
}
function gotoBottom(){
var $chatdiv=$(".chat");
$chatdiv.scrollTop=$chatdiv.scrollHeight;
}
//自动刷新
function AutoRefresh(){
setInterval(getMessage,2000);
setInterval(getOnlineUser,4000);
}
</script>
</head>
<body>
<div class="container">
<div class="topframe">
<div class="chat">
<p>聊天大厅</p>
<div id="txtchat"></div>
</div>
<div class="online">
<p>当前在线人员</p>
<div id="txtonline"></div>
</div>
<div class="format"></div>
</div>
<div class="bottomframe">
<div class="imgframe"></div>
<div class="sendcontent">
<textarea id="txtcontent"></textarea>
<span><input type="button" value="发送" id="send"/>
<input type="button" value="下线" id="offline"/></span>
</div>
</div>
</div>
</body>
</html>

整个工程的源码下载地址http://download.csdn.net/detail/yanmei_yaomy/9172447

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航