过程很简单,就是手机通过安装了 Fiddler 的电脑代理上网就可以抓包了,具体设置:
打开 Fiddler Web Debugger 菜单栏上的 Tools
-Fiddler Options...
切换到 Connections
选项卡
勾选 Allow remote computers to connect
并记住上面的端口号 Fiddler listens on port
,默认 8888
,OK
,关闭并重新开启 Fiddler
在手机上修改已连接的网络配置,手动设置代理为电脑上网的本地 IP,端口号就是上一步的 Fiddler listens on port,好了,手机上的网络请求都可以在 Fiddler 上捕获到了。
打开 Fiddler Web Debugger 菜单栏上的 Tools
- Fiddler Options...
切换到 HTTPS
选项卡
勾选 Capture HTTPS CONNECTs
及 Decrypt HTTPS traffic
,OK
另,这种情况如何破?
*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***
真机同步:Ctrl + R
注释/取消注释代码:Ctrl + /
整理代码:Ctrl + Shift + F
var iOS7AndLater = api.systemType == 'ios' && parseFloat(api.systemVersion) >= 7; // api.systemVersion 结果类似 4.5.6,parseFloat 后 iOS 为 4, Android 为 4.5
api.addEventListener({ name:'swipedown' },function(ret,err){ //operation });
api.addEventListener({ name:'swipeup' },function(ret,err){ //operation });
有时候在监听 swipedown 和 swipeup 事件时没有进入 callback,原因是打开这个 window 或 frame 时,bounces 是 true 的,只要将 bounces: false 即可。
api.showProgress(); api.hideProgress(); api.openFrame({ name url rect }); api.openFrameGroup api.openWin api.setRefreshHeaderInfo({},function(ret,err){ // coding... alert("正在用力刷新"); api.refreshHeaderLocalDone(); }); localStorage.setItem("xxx",ret.id); if(localStorage.getItem("xxx")){ }
本教程使用的软件版本:
VMware Workstation 12 Pro for Windows
Mac OS X Unlocker for VMware V2.0.6
一个能让虚拟机 VMware 安装 OS X 系统的解锁补丁
OS X 10.10.5 Yosemite (14F27) 懒人版 CDR 镜像
CRC32: C7E1E915
MD5: A76FF6E43058A40182435D274D9EB976
SHA-1: 7DDC194E779B003AFDCF2B7C11BEB6D4443F8D72
安装步骤:
1、安装 VMware Workstation
2、新建虚拟机:选择 典型 - 稍后安装操作系统,当然现在还看不到 Apple Mac OS X,先退出 VMware
3、安装 Unlocker
4、重复第 2 步,选择 Apple Mac OS X,并选择对应的 OS X 版本,后续跟据情况自行配置
5、编辑虚拟机设置 - CD/DVD(SATA) - 使用 ISO 镜像文件 - 浏览 - 所有文件(*.*),定位到 .cdr 镜像文件
6、开启此虚拟机
7、如果报错:VMware Workstation 不可恢复错误: (vcpu-0),打开新建虚拟机时指定的位置(默认在 C:\Users\用户名\Documents\Virtual Machines\虚拟机名\),用记事本打开 .vmx 文件,添加一条配置:smc.version = "0",保存关闭后重新开启虚拟机
8、如果屏幕中央出现一个禁止的图标,那么表示当前版本的 VMware 不支持安装当前版本的 OS X
9、如果在“选择要安装到的磁盘”界面仅列出了镜像文件而无法继续安装,请在窗口顶部的菜单栏中选择 实用工具 - 磁盘工具,选中新建虚拟机时创建的磁盘,切换到“分区”选项卡进行分区操作,简单地可以选择“1 个分区”,点击“应用”、“分区”,退出磁盘工具。现在可以把 OS X 安装在刚刚创建的分区上了
10、继续愉快地安装和使用 OS X 吧!
使用此方法将 OS X 安装到物理磁盘并支持开机直接运行,请参考此文:超详细 (60P)利用虚拟机安装10.9.4(懒人版)到真机教程
jQuery 请求代码:
$.ajax({ url: "xxxxxx", //method: "GET", // 默认 GET(当 dataType 为 jsonp 时此参数无效,始终以 GET 方式请求) data: $('#myForm').serialize(), // 要传递的参数,这里提交表单 myForm 的内容 dataType: "jsonp" //, jsonp: "callback" // 请求中的回调函数的参数名,默认值 callback //, jsonpCallback: "jQuery_abc" // 本地回调函数名,不指定则随机 }) .done(function () { alert("done"); if (true) { $('#myForm')[0].reset(); } }) .fail(function () { alert("fail"); }) .always(function () { alert("complete"); });
ASP.NET 处理代码:
JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(new { result = new { success = true, msg = "成功" } }); if (!string.IsNullOrWhiteSpace(Request["callback"]) && Regex.IsMatch(Request["callback"], @"[_$a-zA-Z][$\w]*")) { Response.ContentType = "application/javascript; charset=utf-8"; Response.Write(json + Request["callback"] + "(" + json + ")"); } else { Response.ContentType = "application/json; charset=utf-8"; Response.Write(json); } Response.End();
关于wdcp后台要用mysql root用户密码的说明,可以看这里
http://www.wdlinux.cn/bbs/thread-932-1-1.html
要在wdcp后台里创建数据库及数据库用户,那就必须要让wdcp里有root用户密码,否则,就无法创建
所以,有些用户说,在phpmyadmin修改了root用户密码后,就无法创建了,那是肯定的,因为你改了root的密码,但wdcp不知道,也不知道新密码是什么,那还能创建吗?答案是 肯定是不能的
那要怎样正确地修改root用户的密码呢?难道就不难修改了吗,当然不是
只要在wdcp的后台里修改就可以了,所以也强烈建议在wdcp后台里修改,如下图
那如果已经修改了或在其它地方修改了还有办法吗
有,可以上面那个连接的说明
又或者用这个工具修改,wdcp2.2版本开始提供
用ssh登录到服务器上运行
sh /www/wdlinux/tools/mysql_root_chg.sh
就可以了
这个工具修改,还可以用在忘记root用户密码的时候修改,是强制修改
注:这里说的root用户,是mysql数据库里的root用户,不是Linux系统的root用户,有区别的
最近有服务器不时出现的CPU使用率超高,内存几乎被吃光,系统甚至自动kill掉一些进程,如sshd,vsftpd等。用top查看,PHP-CGI进程高挂不下,如下是解决方案:
一、进程跟踪
# top //找出CPU使用率高的进程PID
# strace -p PID //跟踪进程
# ll /proc/PID/fd //查看该进程在处理哪些文件
将有可疑的PHP代码修改之,如:file_get_contents没有设置超时时间。
二、内存分配
如果进程跟踪无法找到问题所在,再从系统方面找原因,会不会有可能内存不够用?据说一个较为干净的PHP-CGI打开大概20M-30M左右的内存,决定于PHP模块开启多少。
通过pmap指令查看PHP-CGI进程的内存使用情况
# pmap $(pgrep php-cgi |head -1)
按输出的结果,结合系统的内存大小,配置PHP-CGI的进程数(max_children)。
三、监控
最后,还可以通过监控与自动恢复的脚本保证服务的正常运转。下面是我用到的一些脚本:
只要一个php-cgi进程占用的内存超过 %1 就把它kill掉
#!/bin/sh
PIDS=`ps aux|grep php-cgi|grep -v grep|awk’{if($4>=1)print $2}’`
for PID in $PIDS
do
echo `date +%F….%T`>>/data/logs/phpkill.log
echo $PID >> /data/logs/phpkill.log
kill -9 $PID
done
检测php-fpm进程
#!/bin/bash
netstat -tnlp | grep “php-cgi” >> /dev/null #2&> /data/logs/php_fasle.log
if [ "$?" -eq "1" ];then #&& [ `netstat -tnlp | grep 9000 | awk '{ print $4}' | awk -F ":" '{print $2}'` -eq "1" ];then
/usr/local/webserver/php/sbin/php-fpm start
echo `date +%F….%T` “System memory OOM.Kill php-cgi. php-fpm service start. ” >> /data/logs/php_monitor.log
fi
通过http检测php执行
#!/bin/bash
status=`curl -s –head “http://127.0.0.1:8080/chk.php” | awk ‘/HTTP/ {print $2}’`
if [ $status != "200" -a $status != "304" ]; then
/usr/local/webserver/php/sbin/php-fpm restart
echo `date +%F….%T` “php-fpm service restart” >> /data/logs/php_monitor.log
fi
NTP Reply Flood Attack (NTP射型Ddos攻击)以下简称NTP_Flood是一种利用网络中NTP服务器的脆弱性(无认证,不等价数据交换,UDP协议),来进行DDos行为的攻击,本文将就此种攻击的产生原因,利用方法等进行阐述,并使用编程语言(Python,C++)对此攻击进行实现。
默认安装,PHP里只是安装了一些常用或基本的模块,其它的要用时再添加就可以的
这里模块分两种
一种是php自带的模块,也就是源码里就有,不用下载
一种是要另外下载的安装模块,如
http://www.wdlinux.cn/bbs/thread-4-1-1.html
这里只介绍,在PHP自带的模块
比如SOAP
首先,确定之前有下载的一键包,如果没有,先下载(也可以单独下载PHP软件包)
wget http://dl.wdlinux.cn:5180/lanmp_last.tar.gz
tar zxvf lanmp_last.tar.gz
cd lanmp
tar zxvf php-5.2.17.tar.gz
cd php-5.2.17
cd ext/soap
/www/wdlinux/php/bin/phpize
./configure --with-php-config=/www/wdlinux/php/bin/php-config
make
make install
echo 'extension=soap.so' >> /www/wdlinux/etc/php.ini
然后重起下服务
service httpd restart
or
service nginxd restart
其它所有的模块,参考这两个例子即可完成安装
编者按:今天腾讯万技师同学的这篇技术总结必须强烈安利下,目录清晰,层次分明,每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散,帮你直观把这些知识点get起来。以现在HTML 5的势头,同志们,你看到的这些,可都是钱呐。
十二年前,无论多么复杂的布局,在我们神奇的table面前,都不是问题;
十年前,阿捷的一本《网站重构》,为我们开启了新的篇章;
八年前,我们研究yahoo.com,惊叹它在IE5下都表现得如此完美;
六年前,Web标准化成了我们的基础技能,我们开始研究网站性能优化;
四年前,我们开始研究自动化工具,自动化测试,谁没玩过nodejs都不好意思说是页面仔;
二年前,各种终端风起云涌,响应式、APP开发都成为了我们研究的范围,CSS3动画开始风靡;
如今,CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉,你是否开始探寻,接下来,我们可以玩什么,来为我们项目带来一丝新意?
没错,本文就是以HTML5 Device API为核心,对HTML5的一些新接口作了一个完整的测试,希望能让大家有所启发。
目录:
一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼? – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
一、让音乐随心而动 – 音频处理 Web audio API
简介:
Audio对象提供的只是音频文件的播放,而Web Audio则是给了开发者对音频数据进行分析、处理的能力,比如混音、过滤。
系统要求:
ios6+、android chrome、android firefox
实例:
http://sy.qq.com/brucewan/device-api/web-audio.html
核心代码:
var context = new webkitAudioContext();
var source = context.createBufferSource(); // 创建一个声音源
source.buffer = buffer; // 告诉该源播放何物
createBufferSourcesource.connect(context.destination); // 将该源与硬件相连
source.start(0); //播放
技术分析:
当我们加载完音频数据后,我们将创建一个全局的AudioContext对象来对音频进行处理,AudioContext可以创建各种不同功能类型的音频节点AudioNode,比如
1、源节点(source node)
我们可以使用两种方式加载音频数据:
<1>、audio标签
var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
sound = context.createMediaElementSource(audio);
sound.connect(context.destination);
});
audio.src = '/audio.mp3';
<2>、XMLHttpRequest
var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
context.decodeAudioData(request.response, function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
}
}
xhr.send();
2、分析节点(analyser node)
我们可以使用AnalyserNode来对音谱进行分析,例如:
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
// 将dataArray数据以canvas方式渲染出来
};
draw();
3、处理节点(gain node、panner node、wave shaper node、delay node、convolver node等)
不同的处理节点有不同的作用,比如使用BiquadFilterNode调整音色(大量滤波器)、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。
需要了解更多的音频节点可能参考:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
4、目的节点(destination node)
所有被渲染音频流到达的最终地点
思维发散:
1、可以让CSS3动画跟随背景音乐舞动,可以为我们的网页增色不少;
2、可以尝试制作H5酷酷的变声应用,增加与用户的互动;
3、甚至可以尝试H5音乐创作。
看看google的创意:http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html
二、捕捉用户摄像头 – 媒体流 Media Capture
简介:
通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。
系统要求:
android chrome、android firefox
实例:
捕获用户摄像头 捕获用户麦克风
http://sy.qq.com/brucewan/device-api/camera.html
http://sy.qq.com/brucewan/device-api/microphone-usermedia.html
核心代码:
1、摄像头捕捉
navigator.webkitGetUserMedia ({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, function(e){
})
2、从视频流中拍照
btnCapture.addEventListener('touchend', function(){
if (localMediaStream) {
canvas.setAttribute('width', video.videoWidth);
canvas.setAttribute('height', video.videoHeight);
ctx.drawImage(video, 0, 0);
}
}, false);
3、用户声音录制
navigator.getUserMedia({audio:true}, function(e) {
context = new audioContext();
audioInput = context.createMediaStreamSource(e);
volume = context.createGain();
recorder = context.createScriptProcessor(2048, 2, 2);
recorder.onaudioprocess = function(e){
recordingLength += 2048;
recorder.connect (context.destination);
}
}, function(error){});
4、保存用户录制的声音
var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;
思维发散:
1、从视频拍照自定义头像;
2、H5视频聊天;
3、结合canvas完成好玩的照片合成及处理;
4、结合Web Audio制作有意思变声应用。
三、你是逗逼? – 语音识别 Web Speech API简介:
1、将文本转换成语音;
2、将语音识别为文本。
系统要求:
ios7+,android chrome,android firefox
测试实例:
http://sy.qq.com/brucewan/device-api/microphone-webspeech.html
核心代码:
1、文本转换成语音,使用SpeechSynthesisUtterance对象;
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
2、语音转换为文本,使用SpeechRecognition对象。
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
final_transcript += event.results[i][0].transcript;
}
};
测试结论:
1、Android支持不稳定;语音识别测试失败(暂且认为是某些内置接口被墙所致)。
思维发散:
1、当语音识别成为可能,那声音控制将可以展示其强大的功能。在某些场景,比如开车、网络电视,声音控制将大大改善用户体验;
2、H5游戏中最终分数播报,股票信息实时声音提示,Web Speech都可以大放异彩。
四、让我尽情呵护你 – 设备电量 Battery API简介:
查询用户设备电量及是否正在充电。
系统要求:
android firefox
测试实例:
http://sy.qq.com/brucewan/device-api/battery.html
核心代码:
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
str += '<p>你的浏览器支持HTML5 Battery API</p>';
if(battery.charging) {
str += '<p>你的设备正在充电</p>';
} else {
str += '<p>你的设备未处于充电状态</p>';
}
str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}
测试结论:
1、QQ浏览器与UC浏览器支持该接口,但未正确显示设备电池信息;
2、caniuse显示android chrome42支持该接口,实测不支持。
思维发散:
相对而言,我觉得这个接口有些鸡肋。
很显然,并不合适用HTML5做电池管理方面的工作,它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作,当用户设备电量不足时,进入省电模式,比如停用滤镜、摄像头开启、webGL、减少网络请求等。
五、获取用户位置 – 地理位置 Geolocation简介:
Geolocation API用于将用户当前地理位置信息共享给信任的站点,目前主流移动设备都能够支持。
系统要求:
ios6+、android2.3+
测试实例:
http://sy.qq.com/brucewan/device-api/geolocation.html
核心代码:
var domInfo = $("#info");
// 获取位置坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
domInfo.innerHTML="抱歉,你的浏览器不支持地理定位!";
}
// 使用腾讯地图显示位置
function showPosition(position) {
var lat=position.coords.latitude;
var lon=position.coords.longitude;
mapholder = $('#mapholder')
mapholder.style.height='250px';
mapholder.style.width = document.documentElement.clientWidth + 'px';
var center = new soso.maps.LatLng(lat, lon);
var map = new soso.maps.Map(mapholder,{
center: center,
zoomLevel: 13
});
var geolocation = new soso.maps.Geolocation();
var marker = null;
geolocation.position({}, function(results, status) {
console.log(results);
var city = $("#info");
if (status == soso.maps.GeolocationStatus.OK) {
map.setCenter(results.latLng);
domInfo.innerHTML = '你当前所在城市: ' + results.name;
if (marker != null) {
marker.setMap(null);
}
// 设置标记
marker = new soso.maps.Marker({
map: map,
position:results.latLng
});
} else {
alert("检索没有结果,原因: " + status);
}
});
}
测试结论:
1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确;
3、测试三星 GT-S6358(android2.3) geolocation存在,但显示位置信息不可用POSITION_UNAVAILABLE。
六、把用户捧在手心 – 环境光 Ambient Light简介:
Ambient Light API定义了一些事件,这些时间可以提供源于周围光亮程度的信息,这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。
系统要求:
android firefox
测试实例:
http://sy.qq.com/brucewan/device-api/ambient-light.html
核心代码:
这段代码实现感应用前当前环境光强度,调整网页背景和文字颜色。
var domInfo = $('#info');
if (!('ondevicelight' in window)) {
domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
var lightValue = document.getElementById('dl-value');
window.addEventListener('devicelight', function(event) {
domInfo.innerHTML = '当前环境光线强度为:' + Math.round(event.value) + 'lux';
var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
document.body.style.backgroundColor = backgroundColor;
if(event.value < 50) {
document.body.style.color = '#fff'
} else {
document.body.style.color = '#000'
}
});
}
思维发散:
该接口适合的范围很窄,却能做出很贴心的用户体验。
1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品,我们自然可以调整我们背景与文字颜色让用户感觉到舒适,我们还可以来一段安静的音乐,甚至使用Web Speech API播报当前时间,并说一声“晚安”,何其温馨;
2、该接口也可以应用于H5游戏场景,比如日落时分,我们可以在游戏中使用安静祥和的游戏场景;
3、当用户在工作时间将手机放在暗处,偷偷地瞄一眼股市行情的时候,我们可以用语音大声播报,“亲爱的,不用担心,你的股票中国中车马上就要跌停了”,多美的画面。
参考文献:
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/