分类目录归档:livewriter

用tcpTrace记录nignx rewrite后转发的数据,调试wlw发布日志到wordpress的工作过程

原创文章,转载请指明出处并保留原文url地址

前面,我们安装了php的开发环境xampp, 安装了wordpress程序,然后配置了php的调试环境, 以及 用Nginx url重写及NuSphere环境调试windows live writer客户端 等文章通过这些我们基本上打造了一个可以调试的、完善的php调试程序的开发系统。

本文我们要解决的问题是:全面记录nginx的url重写(rewrite)后的数据, 以及windows live writer 在发布文章过程中都发布了那些数据,通过这些数据的分析,了解xml rpc的工作过程。

1. tcpTrace记录数据的工作原理

系统网络结构以及相关组件的配置情况如下:

wps_clip_image-4218[8][1]

存在两台服务器, 192.168.186.162和192.168.186.163

163上部署nginx程序

162上部署tcptrace、xampp、wordpress、PhpED等软件

同时修改162服务器的hosts文件如下

wps_clip_image-22917[3][1]

通过修改了hosts文件, 这样在wlw在发布文章到www.iigrowing.cn时,根据hosts文件中配置的域名, 把数据发送给163的nginx服务器, nginx服务器在内部判断url中是否存在php的调试参数, 若是没有则重写url(添加一个php的调试标志),然后通过nginx的代理功能(proxy_pass)将请求发给162服务器的9999端口, 在9999端口上tcpTrace正在接受用户请求, 接受到请求后将请求信息打印到调试窗口, 然后将请求在转发给后端的apache服务器,apache服务器将php请求转给wordpress。 WordPress在工作过程中, PhpED环境监控着php系统,当发现有请求进入时,就进入调试模式,便于我们调试程序,发现问题。

2. 关于tcptrace

http://www.pocketsoap.com/tcpTrace/

wps_clip_image-11302[3][1]

TcpTrace

I got fed up with installing Java & Apache SOAP just to get tcpTunnelGUI, so here's a native Win32 version, built using Attila (no MFC :) ). It started out as a copy of the Apache tool, but has taken on a life of its own!.

Huh, it does what ?

Basically you use it as a tunnel between your client & server. Start tcptrace.exe and up comes a dialog box asking for local port #, destination server, and destination port # (Ignore the logging options for now) Fill these in, click Ok, and wow are you going to have fun. For example if you are writing a client and testing against a remote server (say www.razorsoft.net ), you can setup

Local Port #         8080

Destination Server   www.razorsoft.net

Destination Port #   80

Now configure your client so that it thinks the server is at localhost:8080. tcpTrace will forward all the traffic from localport:8080 to the remote server (and vica versa), dumping the contents in the process. If you are hosting a server say on port 80 and want to use it, then change your server to run on port 81, and setup

Local Port #         80

Destination Server   localhost

Destination Port #   81

you can now see your incoming traffic.

It should work with all the text based IP protocols, I've been using it with SOAP (port 80) & HTTP (port 80), and I know Peter Drayton has been using it with POP3 (port 110) & SMTP (port 25

3. php数据跟踪环境的基本环境需求

a) Php环境, 选择xampp软件环境,方便安装测试。关于如何利用xampp软件安装php,参见:XAMPP安装及使用概述

b) WordPress系统安装方法参考: WORDPRESS安装

c) Phped调试环境  基于NuSphere环境调试wordpress系统

d) Windows下nginx   Windows XP下Nginx的安装与配置

e) TcpTrace,

4. 配置tcptrace并启动环境

运行tcptrace程序, 显示相关配置窗口, 按照下图进行相关配置

wps_clip_image-11052[3][1]

配置完成后, 点击ok按钮完成相关工作,并且tcptrace程序也已经启动,可以开始工作。

5修改windows下的nginx配置文件

1)进入conf目录, 打开nginx.conf文件,修改配置文件

wps_clip_image-2254[3][1]

修改图中紫色部分的配置为:9999端口, 就是tcptcace要监控的端口

2)启动windows下的nginx系统

wps_clip_image-24952[3][1]

6. 启动192.168.186.162服务器的PhpED环境

wps_clip_image-15798[4][1]

启动后,会启动php调试的监听程序, 如下图

wps_clip_image-1405[3][1]

如监听程序没有启动则需要重新配置php的调试环境

7. 配置192.168.186.162服务器

1)启动windows live writer程序, 配置成如下:

wps_clip_image-11025[3][1]

2) 用户wlw创建新blog文章

wps_clip_image-19526[3][1]

如上图, 写好文章的标题, 及内容, 然后点击发布按钮

3) 观察tcpTrace显示信息

wps_clip_image-22725[4][1]

4) 从tcptrace中记录的, 从windows live writer写出的数据如下

POST /xmlrpc.php?DBGSESSID=413693790766000002;d=1,p=1,c=0& HTTP/1.0

Host: 192.168.186.162:9999

Connection: close

Accept: */*

Accept-Language: zh-CN, en-US, en, *

User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Windows Live Writer 1.0)

Content-Type: text/xml

Content-Length: 1647

<?xml version="1.0" encoding="utf-8"?>

<methodCall>

<methodName>metaWeblog.newPost</methodName>

<params>

<param>

<value>

<string>1</string>

</value>

</param>

<param>

<value>

<string>admin</string>

</value>

</param>

<param>

<value>

<string>admin</string>

</value>

</param>

<param>

<value>

<struct>

<member>

<name>title</name>

<value>

<string>tt1</string>

</value>

</member>

<member>

<name>description</name>

<value>

<string><p>content 1234567890&nbsp; </p> <p>abcdefg</p></string>

</value>

</member>

<member>

<name>mt_text_more</name>

<value>

<string />

</value>

</member>

<member>

<name>mt_keywords</name>

<value>

<string />

</value>

</member>

<member>

<name>wp_slug</name>

<value>

<string />

</value>

</member>

<member>

<name>mt_basename</name>

<value>

<string />

</value>

</member>

<member>

<name>wp_password</name>

<value>

<string />

</value>

</member>

<member>

<name>categories</name>

<value>

<array>

<data />

</array>

</value>

</member>

<member>

<name>mt_excerpt</name>

<value>

<string />

</value>

</member>

</struct>

</value>

</param>

<param>

<value>

<boolean>1</boolean>

</value>

</param>

</params>

</methodCall>

WordPress对xmp rpc调用的相应

从数据中我们可以知道一个 典型xml rpc的工作过程, 里面都是xml代码,具体内容大家慢慢分析吧, 比较简单。

5) WordPress的http相应

如下代码是 从tcptrace中获取的相关相应

HTTP/1.1 200 OK

Date: Thu, 25 Apr 2013 03:13:02 GMT

Server: Apache/2.2.14 (Win32) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l mod_autoindex_color PHP/5.3.1 mod_apreq2-20090110/2.7.1 mod_perl/2.0.4 Perl/v5.10.1

X-Powered-By: PHP/5.3.1

Set-Cookie: DBGSESSID= ; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT; version=1

Set-Cookie: DBGSESSID= ; path=/; version=1

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Pragma: no-cache

Connection: close

Content-Length: 161

Content-Type: text/xml

<?xml version="1.0"?>

<methodResponse>

<params>

<param>

<value>

<string>803</string>

</value>

</param>

</params>

</methodResponse>

8. 查看192.168.186.162的调试环境

由于本次主要是为了检测 xml rpc调用过程中的信息, 因此取消了调试器中的断点,因此程序没有在调试器中中断。

但是调试的日志中还是有相关的记录的如下:

wps_clip_image-12575[4][1]

只是由于没有中断运行因此我们可以不用关心相关过程。

9. 查看其他过程

另外我们也可以监控一下,windows live writer的配置过程, 如下图, 过程比较多,我们就给数据了,大家自己练习吧。

wps_clip_image-1022[4][1]

LocalSrcEdit插件实现windows live writer局部代码显示并编辑

原创文档,转载请将原文url地址标明

从前面文档中我们了解到Windows Live Writer是非常不错的一个日志发布工具,支持本地写文章,然后通过点击一个按钮就发布到网站上。

在使用wlw中发现当blog文本非常多时,查看部分源代码以及修改局部源代码都比较麻烦,必须在切换显示方式,但是切换后不方便找到需要编辑的位置,编辑起来比较麻烦。

为了解决问题编写了专用插件实现局部代码的编写并且进行编辑功能

使用方法:

1. 编辑blog文档

2. 选择要查看的部分源代码

3. 点击wlw右下方的LocalSrcEdit链接启动插件

wps_clip_image-29446[3][1]

显示如上图,上图中文本框内文字就是被选择部分文字的html源代码,用户可以手工编辑html源代码,然后选择finish按钮,被修改后的源代码则应用到了原位置。


优化pngtojpg插件修正png到jpg图片转换中失真问题

原创文档,转载请将原文url地址标明

我们在前面“开发Windows Live Writer插件实现png图片到jpg图片的批量转换”一文中介绍了一个wlw的插件来实现png图片到jpg图片的自动转换工作。

插件下载页面参见http://www.iigrowing.cn/pngtojpeg.html页面

前次发表插件在对一些特定的png图片进行转换时,图片转换后呈现非常严重的失真,如下图

wps_clip_image-9859[4][1]转换前的png图片

转换后的图片

wps_clip_image-18180[4][1]

可以看到问题比较严重,因此需要进行相关的改进工作。

初步估计是原来插件中图像转换功能非常简单,仅仅是采用系统默认的图片转换api进行的,里面可控的因素比较少,容易造成失真。

原转换代码如下:

using (System.Drawing.Image img = System.Drawing.Image.FromFile(srcimg))

{

img.Save(dstimg, System.Drawing.Imaging.ImageFormat.Jpeg);

}

仅仅调用.net平台的最简单的图片打开功能获取一个png图片,然后调用save进行图片的存储,为进行任何适当的处理。因此造成相关图片的失真的问题。

为了解决相关问题,在codeproject上搜索了一个jpeg图片的专业文章,然后从里面提取相关代码进行改造,最后集成到插件中,完成相关功能。

http://www.codeproject.com/Articles/83225/A-Simple-JPEG-Encoder-in-C

wps_clip_image-21609[7][1]

相关代码下载地址

http://www.codeproject.com/KB/graphics/SimpleJpeg/JPEG_Encoder_src_v3.zip

读者可以自行研究相关丰富的功能

本插件中,将相关多余代码都去除,保留了必要的图片转换等相关代码集成到插件中,最后完成相关功能。

新版本插件见http://www.iigrowing.cn/pngtojpeg.html

PngToJpg

PngToJpeg是一个Windows Live Writer插件,开发语言C#,开发平台virual studio2010

功能是对wlw中选择的源代码部分代码进行遍历,找到本地图片,对其中png格式图片,转换成jpeg格式的图片,然后替换选择部分源代码成jpeg图片的地址,程序处理完成后程序自动返回,用户可以继续编写自己的博客。

方便之处

用户在手工选择那些图片是要转换的,不用手工处理这些图片了,一切都是自动的,用户要的是 ctrl + a(全选), 点击启动插件链接,然后按下按钮完成转换

改进之处

对网络图片不支持

仅仅支持png图片

界面简单粗陋

 

改版目标

对网络图片提供支持

 

v0.2插件,优化png图片到jpg图片转换,修正转换后失真

 

 

插件安装及操作方法,参见文章:

开发Windows Live Writer插件实现png图片到jpg图片的批量转换

 

插件下载

 

开发Windows Live Writer插件实现png图片到jpg图片的批量转换

原创文档,转载请将原文url地址标明

从前面文档中我们了解到Windows Live Writer是非常不错的一个日志发布工具,支持本地写文章,然后通过点击一个按钮就发布到网站上。

但是wlw有个问题,就是在编辑博客时,但我们从剪切板粘贴文章到wlw时,图片默认是png格式。Png格式分辨率高,效果好,但是尺寸太大了,若是转换成jpg格式尺寸会小很多,至少小一个数量级(十分之一),图像效果也还可以,一般肉眼很难分别差别的或者差别不大。

前面我们文章介绍了一个插件可以实现将将剪切板图片粘贴成jpg的图片了,好挺好用的。

今天我们又有了新的情况。但我们用word文档编辑了很好的图文并茂的文档有很多图片这个时候我们若是将这个word文档整体拷贝,然后粘贴wlw中,我们的图片就都是png格式了。手动将图片一幅一幅修改成jpg比较费劲。

我在网络上查找了很多文章及插件也没解决问题,最后只好把解决办法着落到编写wlw插件上面啦。

为了编写插件我专程去下载了 微软的 vistual studio 2010专业版,安装软件,软件很大。

又到网络找编写软件的文章,以及相关代码,最后自己编写软件,当然了我要参照别人的软件编写,最后全部改造成自己的插件啦。

最后经过调试终于成功。

软件安装方法:

下载附件的文件,解压缩到wlw的安装目录中的插件目录,重新启动wlw即可。

参考目录如下

C:\Program Files\Windows Live\Writer\Plugins

wps_clip_image-30954_thumb[1]

最后重新启动wlw

wps_clip_image-29718_thumb[1][1]

启动后出现上图中红色区域的图标及文字后表示插件安装成功

使用方法如下

1. 正常使用wlw编辑文章,或者粘贴文章到wlw中

2. 在wlw中全选文章内容(ctrl + a),或者选择部分带有图片的内容

3. 点击上图的插件链接

4. 在弹出窗口中选择“process”button然后关闭窗口

wps_clip_image-20166_thumb[4][1]

关闭窗口后选择文章中的每个图片,可以看到图片格式都已经是jpg格式了。

wps_clip_image-8777_thumb[1][1]

调用插件前的情况,请注意绿色及紫色区域的交叉地方

wps_clip_image-25720_thumb[1][1]

转后的图片信息。

后续问题

1. 程序存在出来文件名地方存在bug需要完善,但是不影响使用

2. 程序在处理完了图片方面有需要完善的地方

3. 程序的友好提示方面需要加强