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 ...
随机推荐
- 2018-2019-2 20165315《网络攻防技术》Exp6 信息搜集与漏洞扫描
2018-2019-2 20165315<网络攻防技术>Exp6 信息搜集与漏洞扫描 目录 一.实验内容 二.实验步骤 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫 ...
- 浅谈spring为什么推荐使用构造器注入
转载自: https://www.cnblogs.com/joemsu/p/7688307.html 一.前言 Spring框架对Java开发的重要性不言而喻,其核心特性就是IOC(Inversi ...
- kubernetes + istio进行流量管理
实验目的: 本文介绍如何通过istio实现域名访问k8s部署的nginx服务 前提: 已经安装了kubernetes的服务器 了解 kubernetes 基本命令如何使用 (kubectl creat ...
- Swoole 心跳检测
Swoole的心跳检测特别简单,只需要配置 heartbeat_check_interval,heartbeat_idle_time就可以了. heartbeat_check_interval:表示服 ...
- How to use BMW 35080 adapter with Yanhua Mini ACDP
I have a question about Yanhua Mini ACDP + module 4 BMW 35080 read and write: Can the 35080 adapter ...
- 博客七----tensorflow-gpu安装满满填坑
具体内容见我的开源中国教程:https://my.oschina.net/u/3770644/blog/3043073 因为编写习惯原因,我的大多数详细教程在开源中国中.有兴趣的大家打开连接就好 强调 ...
- 关于python的感想和turtle作图
第一次知道有python这个东西是在去年七月份,就是一堆编程语言,当时我想它应该离我很远,也没对它有什么兴趣.直到在三月份的某一天我真正接触了它,其实也不是我主动,环境下学期必须学这东西.我有它的必修 ...
- Finance版本计划
2.0.0.3 1. 支持自定义报表 提供页面自定义报表,根据存储过程,前端页面传参调用 根据存储过程数据集控制简单样式(数字靠右,列宽) 2. 支持报表公式可修改 定义公式规则(文档) 2.0.0. ...
- Python3 使用pymysql链接MySQL数据库
1,pymysql安装 pip install pymysql 2,pymysql使用 import pymysql 3,实例查询 import pymysql #获取一个数据库链接 #格式 主机地址 ...
- 2018上IEC计算机高级语言(C)作业 第3次作业_说明
一.博客作业内容 2018上IEC计算机高级语言(C)作业 第3次作业 二.评分规则说明 1.程序调试题,要描述出调试所遇到问题及修改内容,并表述清楚程序功能.流程图不规范的会减1-2分: 2.知识点 ...