阿里云(四)

因为一个朋友一直用的网页QQ，最近QQ总是收不到图，但是空间能打开，能看见图，QQ聊天的时候图就是收不到。

蛋疼。

正好有阿里云服务器，我说，我搭个聊天平台，专门用来发图给你看好了。

初步构想，是和QQ的聊天窗口差不多，就是ajax刷新内容好了。

功能的话，就是发送图片，发送信息。

开始

网页界面很快搭好

因为要想选择图片后，图片出现在输入框内

一开始，输入框是用的textarea，发现不行，换了思路，

用div规划输入区域，设置属性 contenteditable="true" 这样div就是可编辑区域，发送内容时，传递innerHTML 即可，而且可保存输入样式

编写后台，在这里，因为是网页版，所以，当选择文件，文件出现在下面输入区域时

已经把图片传到了服务器，服务器回传一个包含着src地址的img标签，

也就是当你看见图片时，本地上传并下载了图片，两次数据流。

进行查看

<span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">div</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">id</span>="<span class="nodeValue editable ">content</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">contenteditable</span>="<span class="nodeValue editable ">true</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">content</span>"</span><span class="nodeBracket editable insertBefore ">></span></span><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox containerNodeBox open"><blockquote><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">div</span><span class="nodeBracket editable insertBefore ">></span></span></div></blockquote><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox containerNodeBox open"><blockquote><blockquote><div role="presentation" class="nodeCloseLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">div</span><span class="nodeBracket editable insertBefore ">></span><<span class="nodeTag ">img</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">src</span>="<span class="nodeValue editable ">http://121.40.99.54/image/chartRoom/14087063992241898759.jpg</span>"</span><span class="nodeBracket editable insertBefore ">></span></span><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">div</span>></span></div></blockquote></blockquote></div><blockquote><blockquote><div role="presentation" class="nodeBox emptyNodeBox  "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">br</span><span class="nodeBracket editable insertBefore ">></span></span></div></div></blockquote></blockquote></div><blockquote><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">div</span>></span></div></blockquote></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">div</span>></span></div>

这就是此时编辑区域的html代码

后台3个接口

1.接收图片

接收上传的图片，保存到指定路径后，

数据库插入操作记录，

回写带div标签的img标签给客户端

2.就收html代码

接收客户端上传的html代码，写入数据库

回写给客户端，由客户端显示在显示区域

这里，想过当用户上传输入区域信息时，是直接把这个信息显示出来，还是由接收回传再显示

因为上传的不稳定性，还是由回传信息来显示，这样保证是已经存入服务器数据库的。

保证对方肯定能看见。

3.读取数据库最早的还未看的信息

读取数据库标识为还没下载过的信息，按时间升序，读最早的一条。

这样客户端，有个定时线程，一直在调用服务器的3号接口，当读取到信息时，进行显示

简单判断，当用户名不为空的时候，进行循环读取。

当点击发送时，发送的是一连串的html代码，这样可以多图发送，在输入区域的样式也可以简单保存

而且，用QQ的截图功能截图也可以发送，

查看截图代码，发现：

<div>
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAACJCAIAAAB
fDzFhAAAgAElEQVR4nO2dd3wUReP/N8FHH5UHpAQQBAUVCAhBEBVEFFEBAalSjShYEAHxkUiRElogAZJ
AQHqVktASEtLLlW13uVw6pFCTXC63O3u7s1cSit9ffn/s3eVILiFISCTPvF/z2tdkbm53M6/53GdmZ2cG
q0QgEDXAmvoGEIh/IkgYCIQLkDAQCBcgYSAQLkDCuI+QkJBly5YteRJYtmxZSEhIUxdYswWrrKy8eas4MVl5
9nxU8w6Jycqbt4rrKAv/gIAdO3YYDIa/ngQMBsOOHTv8AwIaq6r8b4FVVlYWl7AMB5v6Th47DAev3tTXkc
HHx4dl2bt375qeBO7evcuyrI+PT6MV4P8UNmE09W00EnULY8mSJX/99VdTV/iH4K+//lqyZEmjld7/FEgYV
SxZsuTevXvik8O9e/eQMB4TtQoDw6r3y2um/M1L1...gTS0GAQ6AUgcI+nZUQWVJkbPcjhaYuN0Qzx8kxg
G3hD1i1JKbtCFlSBJSpKk5ATg45BQRyyFULCnu6QpTiVYkKyMmhNBMD4LbazymdKr0UKAiUkJOLQGHbk5KTpjHd
t1Bn05YaotlTfe1a2+Kztj31nNYwd6ysA2wTuJ1W06lnwAUWhwCHHA4BLkrzluwzYyVZ2lfckc6vdCyoY89D27Khx
RAQjxkXa9c6rXTmWEGHvn+G3d8L0jI8hMgpIVCKHCnet0GZrdJXa85VfcpSyDEQjUa9Vjt3LGgL67F4Zi1BqvS0vR3lcAP
yvkp//8lhjRtAwkA0Dg9e7dzZMeydEKfGz0MEae1NUgC4fbkdxxJSdJVjVC1eWBWvqY2mLTVEs6fB9sd4YLA7hrT2lD3OujaEB4am
LjdEMwdr6htAIP6J2ByjqW8DgfhngSSBQLgAOQYC4QIkCQTCBcgxEAgXIEkgEC5AjoFAuOD/A+OI5kLE2905AAAAAElFTkSuQmCC" _moz_resizing="true">
</div>

截图已经被自动被转为data位图格式，直接可以作为数据流保存在数据库，

发送

这样只要html5支持的图片格式，都可以发送，对方客户端都可以查看，直接粘贴截图可以。