<!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. PCIE training

    在PCIe链路可以正常工作之前,需要对PCIe链路进行链路训练,在这个过程中,就会用LTSSM状态机.LTSSM全称是Link Training and Status State Machine.这个 ...

  2. laravel -查询近7月走势图案例

    // 获取7月前的时间$time = date('Y-m',strtotime("-0 year -7 month -0 day" ));$where['created_at'] ...

  3. applium安装过程中遇到的问题及解决方法。

    1.安装appium server 之后, cmd输入appium-doctor,运行时提示'node'不是内部或外部的命令   一.提示'node'不是内部或外部命令,先按照下面步骤操作: 1.设置 ...

  4. 自适应Web主页

    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 一年web网站测试总结

    1. 页面链接检查 每一个链接是否都有对应的页面,并且页面之间切换正确.可以使用一些工具,如LinkBotPro.File-AIDCS.HTML Link Validater.Xenu等工具.Link ...

  6. 转载 linux基本操作

    转载地址 https://segmentfault.com/a/1190000014840829 前言 只有光头才能变强 这个学期开了Linux的课程了,授课的老师也是比较负责任的一位.总的来说也算是 ...

  7. java中如何使用break跳出多重循环

    java 中已知的三种跳出多重循环的方式: System.out.println("---------java中跳出多重循环的三种方式:---------"); System.ou ...

  8. centos7 安装freetype

    1:下载: wget "http://download.savannah.gnu.org/releases/freetype/freetype-2.4.0.tar.bz2" 2:  ...

  9. (PMP)解题技巧和典型题目分析（模拟二）

  10. java开发师笔试面试每日12题（1）

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”?Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件.Java被设计 ...