chat.php
<!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的更多相关文章
- 三周，用长轮询实现Chat并迁移到Azure测试
公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...
- 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 ...
- Node聊天程序实例03：chat.js
作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. chat.j ...
- 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 ...
- IRC(Internet Relay Chat Protocol) Protocal Learning && IRC Bot
catalogue . Abstract . INTRODUCTION . 通信协议Connection Registration Action . 通信协议Channel operations Ac ...
- HDU 5071 Chat(2014鞍山赛区现场赛B题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5071 解题报告:一个管理聊天窗口的程序,一共有八种操作,然后要注意的就是Top操作只是把编号为u的窗口 ...
- ocket.chat 使用 Meteor 开发的实时协作工具，类似 丁丁。
ocket.chat 使用 Meteor 开发的实时协作工具,类似 丁丁. https://rocket.chat/
- 局域网聊天Chat(马士兵视频改进版)
Github地址: https://github.com/BenDanChen/Chat Chat 小小的聊天系统,主要是跟着网上的马士兵老师的公开视频然后再自己反思有什么地方需要改进的地方,然后大体 ...
- 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 ...
- [CareerCup] 8.7 Chat Server 聊天服务器
8.7 Explain how you would design a chat server. In particular, provide details about the various bac ...
随机推荐
- echarts水球
教程网址:https://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html DEMO网址(引入js在di ...
- vcpkg custom triplet
需求是要弄一个用 pip 发布的python 包,使用 boost-python 桥接 原C++代码,发布时不想带 boost-python 的运行时库,因此需要弄静态的 boost-python库, ...
- java-27 Properties类的使用
1.Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 2.方法 setProperty( ...
- 《剑指Offer》第1题（Java实现）：在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。
一.题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该 ...
- leedcode算法解题思路
1.两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个 ...
- 分别用for、while和do-while循环语句以及递归方法计算n！，并输出算式
一.用for循环实现 实验过程: 实验结果: 二.用while循环实现 实验结果: 三.用do while循环实现 实验结果: 四.用递归算法实现 实验结果: 实验心得: 此次实验中必须熟悉for循环 ...
- maven学习--1.项目结构及简单使用
1.项目目录结构 MavenProjectRoot(项目根目录) |----src | |----main | | |----java ——存放项目的.ja ...
- struts1.x 核心控制器 和 用户自定义控制器扩展类;
ServletAction继承于HttpServlet,是struts1.x中和核心控制器. 配置于web.xml文件中,指定config属性,该config属性用于指定formBean和action ...
- 从 Basic Paxos 到 Multi Paxos 到 Raft
在朴素Paxos算法中, 各个节点经过 Prepare 和 Accept 阶段, 会达成一个值, 这个值一旦达成, 就不能被修改, 如下例子: 图示1 上面的操作几乎没有任何实用价值, 于是演变成下面 ...
- AX_Query
static void example(Args _args) { SysQueryRun queryRun = new SysQueryRun(querystr(KTL_Sale ...