<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>web chat</title>
<link href="static/chat.css" rel='stylesheet' type='text/css' />
<script src="static/jquery-1.7.2.js"></script>
</head>
<body>

<div id="chat">
<div class="sidebar">
<div class="m-card">
<footer>
<input class="search" placeholder="查找好友">
</footer>
</div>
<div class="m-list" style="overflow-y: scroll;height: calc(100% - 10pc);">
<ul>
</ul>
</div>
</div>
<div class="main">
<h3 align='center' class="to-user" username=""></h3>
<div class="m-message">
<ul>

</ul>
</div>
<!--send-->
<div class="m-text">
<textarea placeholder="按 Ctrl + Enter 发送" class="input"></textarea>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
alert('暂不支持移动端访问，请移步PC端！');
return false;
}
var synckey = '';
var mname = '';
var mnickname = '';
var myheadimg = '';
//微信初始化
$.ajax({
url : "index.php?act=init",
datatype : 'json',
type : 'post',
async : false,
data : {},
success : function(data){
var res = JSON.parse(data);

//将synckey存入本地缓存，后续步骤需要
synckey = JSON.stringify(res.SyncKey);//json 串形式存入
sessionStorage.synckey = synckey;
muname = res.User.UserName;
sessionStorage.username = muname;
mnickname = res.User.NickName;
sessionStorage.nickname = mnickname;
myheadimg = 'index.php?act=avatar&uri=' + escape(res.User.HeadImgUrl);
//登陆用户信息
var ustr = '<header>'
+'<img class="avatar" width="40" height="40" alt="Coffce" src="'+ myheadimg +'">'
+'<p class="name">'+ res.User.NickName +'</p>'
+'</header>';
$(".m-card").prepend(ustr);
//遍历初始化返回的好友和公众号
var userlist = res.ContactList;
var str = '';
for (var key in userlist) {
var img = 'index.php?act=avatar&uri=' + escape(userlist[key].HeadImgUrl);
str += '<li class="active" username="'+ userlist[key].UserName +'">'
+'<img class="avatar" width="30" height="30" src="'+ img +'" />'
+'<p class="name">'+ userlist[key].NickName +'</p>'
+'</li>';
}
$(".m-list ul").append(str);
//滚动到底部
$(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);
},
error : function(data){
console.log(data);
}
});
//初始化 结束

//获取所有好友列表
$.ajax({
url : "index.php?act=users",
datatype : 'json',
type : 'post',
data : {},
success : function(data){
var res = JSON.parse(data);
console.log(res);
var users = {};//存储username =》 nickname
//遍历初始化返回的好友和公众号
var userlist = res.MemberList;
var str = '';
for (var key in userlist) {
var img = 'index.php?act=avatar&uri=' + escape(userlist[key].HeadImgUrl);
var uname = userlist[key].UserName;
var nickname = userlist[key].NickName;
str += '<li class="active" username="'+ uname +'">'
+'<img class="avatar" width="30" height="30" src="'+img+'" />'
+'<p class="name">'+ nickname +'</p>'
+'</li>';
users[uname] = nickname;
}
//把登陆用户的信息也附加上
users[muname] = mnickname;

sessionStorage.users = JSON.stringify(users);
$(".m-list ul").append(str);
//滚动到底部
//$(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);
},
error : function(data){
console.log(data);
}
});
//获取好友列表结束

//var sync = setInterval("syncWx()",1000);
sync();
function sync(){
//syncWx = function (){
//同步服务器信息，轮训查询是否有新消息等
if(!synckey){
synckey = sessionStorage.synckey;
}

$.ajax({
url : "index.php?act=sync",
datatype : 'json',
type : 'post',
data : {synckey: synckey},
success : function(data){
var res = JSON.parse(data);
//与服务器同步一次synckey就可能 不相同一次，所以每次同步完都将更新key
//将synckey存入本地缓存，后续步骤需要
synckey = JSON.stringify(res.SyncKey);//json 串形式存入
//sessionStorage.synckey = synckey;
if(res.BaseResponse.Ret != 0){
alert('与微信服务器通讯出错，请重新扫码登陆！');
window.location.href='index.php';
}else if (res.AddMsgCount) {
console.log(res);

var str = '';
var messagelist = res.AddMsgList;
var users = JSON.parse(sessionStorage.users);
for (var key in messagelist) {
//StatusNotifyCode=2 为通知消息
if (messagelist[key].StatusNotifyCode == 0){
var fname = messagelist[key].FromUserName;
var uri = "/cgi-bin/mmwebwx-bin/webwxgeticon?seq=620940058&username="+ fname +"&skey=";
var userHeadimg = 'index.php?act=avatar&uri=' + escape(uri);
str += '<li>'
+'<p class="time"><span></span></p>'
+'<div class="main">'
+'<img class="avatar" width="30" height="30" src="'+ userHeadimg +'">'
+'<div class="nick">'+ users[fname] +'</div>'
+'<div class="text">'+ messagelist[key].Content +'</div>'
+'</div>'
+'</li>';

//机器人自动回复，不需要注释掉即可
$.post('index.php?act=tuling',{content:messagelist[key].Content,toUsername:messagelist[key].FromUserName},function(data){
if(data.status == 0){return ;}
if(data.BaseResponse.Ret == 0){
var str = '<li>'
+'<p class="time"><span></span></p>'
+'<div class="main self">'
+'<img class="avatar" width="30" height="30" src="http://lorempixel.com/30/30/">'
+'<div class="nick">机器人</div>'
+'<div class="text">'+ data.tlc +'</div>'
+'</div>'
+'</li>';
$(".m-message ul").append(str);
//滚动到底部
$(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);
}
},'json')
//机器人回复结束
}
}
//for end
$(".m-message ul").append(str);
//滚动到底部
$(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);

}
//通讯成功再轮询
if (res.BaseResponse.Ret == 0){
sync();
}
},
error : function(data){
alert('服务器出错，请重新扫码登陆！');
window.location.href='index.php';
}
})

//}
}

//好友列表点击事件
$(".m-list ul").on('click','li',function(){
var username = $(this).attr('username');
var nickname = $(this).children('p.name').text();
$('.to-user').attr('username',username);
$('.to-user').text(nickname);
})
//好友列表点击事件end

//发送消息
//发送消息
$(".input").keypress(function(e) {
//firefox enter code=13 ; chrome = 10
if (e.ctrlKey && (e.which == 13 || e.which == 10)){
var text = $(".input").val();
var toUsername = $('.to-user').attr('username');
if(text == ''){
alert('不能发送空内容！');
return;
}
if(toUsername == ''){
alert('点击左侧头像，选择聊天对象！');
return;
}

$.ajax({
url : "index.php?act=send",
datatype : 'json',
type : 'post',
data : {
toUsername:toUsername,
content:text
},
success : function(data){
var res = JSON.parse(data);

if(res.BaseResponse.Ret == 0){
var str = '<li>'
+'<p class="time"><span></span></p>'
+'<div class="main self">'
+'<img class="avatar" width="30" height="30" src="'+ myheadimg +'">'
+'<div class="nick">'+ sessionStorage.nickname +'</div>'
+'<div class="text">'+ text +'</div>'
+'</div>'
+'</li>';
$(".m-message ul").append(str);
//滚动到底部
$(".m-message").scrollTop($('.m-message ul')[0].scrollHeight);
}

},
error : function(data){
console.log(data);
}
});
//ws.send(content);
$(".input").val('').focus();
}
});

});

</script>
</html>

chat.php的更多相关文章

  1. 三周，用长轮询实现Chat并迁移到Azure测试

    公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...

  2. Socket programing(make a chat software) summary 1:How to accsess LAN from WAN

    First we should know some basic conceptions about network: 1.Every PC is supposed to have its own IP ...

  3. Node聊天程序实例03：chat.js

    作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. chat.j ...

  4. Fake chat script for website download

    Are you searching for free fake webchat script then you are at the right place go get download your ...

  5. IRC(Internet Relay Chat Protocol) Protocal Learning && IRC Bot

    catalogue . Abstract . INTRODUCTION . 通信协议Connection Registration Action . 通信协议Channel operations Ac ...

  6. HDU 5071 Chat(2014鞍山赛区现场赛B题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5071 解题报告:一个管理聊天窗口的程序,一共有八种操作,然后要注意的就是Top操作只是把编号为u的窗口 ...

  7. ocket.chat 使用 Meteor 开发的实时协作工具，类似 丁丁。

    ocket.chat  使用 Meteor 开发的实时协作工具,类似 丁丁. https://rocket.chat/

  8. 局域网聊天Chat(马士兵视频改进版)

    Github地址: https://github.com/BenDanChen/Chat Chat 小小的聊天系统,主要是跟着网上的马士兵老师的公开视频然后再自己反思有什么地方需要改进的地方,然后大体 ...

  9. Dig out deleted chat messages of App Skype

    Last month Candy was arrested on suspicion of having doing online porn webcam shows, but Candy refus ...

  10. [CareerCup] 8.7 Chat Server 聊天服务器

    8.7 Explain how you would design a chat server. In particular, provide details about the various bac ...

随机推荐

  1. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  2. synchronized锁机制 之 代码块锁(转)

    synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...

  3. 获取txt md5值上传文件完整性校验

    网络上传文件到服务器 做md5 校对.判断文件是否破坏 首先求txt文件的md5值 ,1万条数据 求出的值 文件MD5:e5467b6a8e3c26af8c5af0bda3739280 服务器处理程序 ...

  4. 解决Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules

    1.在eclipse的workspace里面找到该项目.settings文件夹 2.编辑org.eclipse.wst.common.project.facet.core.xml文件 <?xml ...

  5. Chapter_4_JAVA作业

    一.类的封装,继承与多态 1.课前预习 1.1 举列现实生活中的封装,以及简述在程序中什么是属性的封装? 1.1.1 将东西捆绑在一起,如集成芯片:高压电线等等 1.1.2 封装就是将属性私有化,提供 ...

  6. Saliency Detection: A Spectral Residual Approach

    Saliency Detection: A Spectral Residual Approach 题目:Saliency Detection: A Spectral Residual Approach ...

  7. How to Read a Paper

    How to Read a Paper 原文: https://www.yuque.com/lart/papers/yrkv5u 题目:How to Read a Paper 作者:S. Keshav ...

  8. 使用iconfont图标

    iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...

  9. Python3.7 Scrapy crawl 运行出错解决方法

    安装的是Python3.7,装上依赖包和scrapy后运行爬虫命令出错 File "D:\Python37\lib\site-packages\scrapy\extensions\telne ...

  10. 【机器学习】随机森林 Random Forest 得到模型后，评估参数重要性

    在得出random forest 模型后,评估参数重要性 importance() 示例如下 特征重要性评价标准 %IncMSE 是 increase in MSE.就是对每一个变量 比如 X1 随机 ...