<!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. pwnable.kr-passcode-witeup

    进入远端运行, 废话不多说,下载下来分析. 根据提示,编译一下子. 知道问题了. 想象着,输入的值到了passcode1和passcode2的值作为地址的地方,passcode1处刚输入值时,程序终止 ...

  2. 【C++】undered_map的用法总结(1)

    1.介绍 unordered_map是一个关联容器,内部采用的是hash表结构,拥有快速检索的功能. 1.1 特性 关联性:通过key去检索value,而不是通过绝对地址(和顺序容器不同)无序性:使用 ...

  3. 关于jqGrid组件数据显示不出问题

    jqGrid组件一开始怎么数据都返回了渲染不出来,查找了一天,最后发现点击搜索之后doSearch()事件触发的方法并不是数据请求接口,而是再次请求了初次登录的接口,从初次登录返回的数据,数据格式没问 ...

  4. Eclipse oxygen 版本汉化教程

    Eclipse oxygen 版本汉化步骤如下: 第一步:打开Eclipse 第二步:浏览器打开网址 http://www.eclipse.org/babel/downloads.php 1.复制对应 ...

  5. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  6. python脚本执行报错整理

    people = [ {'name':'alex','age':1000}, {'name':'wuxie','age':100}, {'name':'wangcanghai','age':9000} ...

  7. github ignore 规范

    转自:https://www.cnblogs.com/xuld gitignore 应该包含 5 块内容: 当前项目需要忽略的文件 项目性质需要忽略的文件(比如是 nodejs 项目,有些文件就需要忽 ...

  8. mysql备份最近8天的数据库，老的自动删除方案

    服务器上的处理脚本记录: [root@mysql01 test]# crontab -l0 2 * * * /bin/sh /script/sqlbackup.sh >/dev/null 2&g ...

  9. IIS配置支持跨域请求

    对于初次在IIS部署网站的同学,很容易忽略或不知道如何配置使其网站支持跨域请求,这里介绍一个最基础的方式,配置HTTP响应标头. 在IIS上选择HTTP响应标头,选择添加自定义响应标头,通常我们会添加 ...

  10. 《修炼之道:.NET开发要点精讲》读书笔记（二）

    1.简述.NET中CTS.CLS以及CLR的含义与作用. A:CTS指公共类型系统,是.NET平台中各种语言必须遵守的类型规范:CLS指公共语言规范,是.NET平台中各种语言必须遵守的语言规范:CLR ...