xiaolingzi's blog

每天都在成长...

欢迎您:亲

websocket协议详解及数据处理实例

xiaolingzi 发表于 2017-03-06 19:20:27

一、websocket是什么

它是html5提出的一种新的通讯协议,用于实现浏览器和服务端双向通讯(长连接),从而告别了以往在web端只能通过keep-alive和普通轮询之类实现即时通讯的历史。

二、websocket的原理

以往在浏览器与服务器之间的web长连接都是通过http请求进行模拟的伪长连接,每次发送数据都得按http协议带上一些额外的协议数据和处理操作,效率会相对低下。websocket是一种全新的双工协议,它和http协议一样基于TCP连接。为了兼容现有浏览器的握手规范,websocket借助http协议进行握手,握手成功之后维持状态实现持久化。具体握手过程如下:

1.客户端向服务端发起http请求,告诉服务端要进行websocket连接。

为了与普通的http请求进行区分,在进行http请求时在header中加入额外的身份识别数据,以供服务端进行鉴别。下面是一个请求的header示

阅读全文
  • 分类: html5
  • 阅读: (3296)
  • 评论: (0)

html5中不再支持table的cellspacing和cellpadding属性

xiaolingzi 发表于 2013-04-23 20:47:42

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个属性已经被移除,需要定义边框之类的时应该使用css的写法。

具体实现如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Html5 Table Test</title>
    <style type="text/css">
        table{ border-collapse:collapse; border:solid 1px Black; }
        table td{ width:50px; height:20px;  border:solid 1px Black

阅读全文
  • 分类: html5
  • 阅读: (18187)
  • 评论: (1)

html5实现文件批量上传组件 ling.html5Upload-1.0

xiaolingzi 发表于 2013-03-22 21:12:44

一、概述

在html5中,相对于之前添加了不少新的元素和属性,在javascript中也添加了一些新的API,这些给我们的开发带来了很多便利。但由于各浏览器的发展步骤不一致,也导致了不同浏览器对html5支持的差异性。

二、实现原理

1.在该html5实现的文件批量上传组件中,我们主要是利用html5中的一些新属性和新API来达到我们的目的。具体如下:

(1)file input控件中的multiple属性。添加了该属性后,我们在选择文件时就可以进行多选。

(2)javascript File API和相应一些属性。利用这些新功能,我们可以获取到选择的文件集合以及文件的一些属性,如文件名,文件大小,文件类型等等。

(3)FormData。使用它可以向服务器提交key/value的键值对数据。

(4)通过XMLHttpRequest的onprogress来获取和更新文件上传进度。

上面就是用到的主要技术点,

阅读全文
  • 分类: html5
  • 阅读: (7202)
  • 评论: (5)

如何让ie低版本浏览器支持html5标签

xiaolingzi 发表于 2012-05-16 20:39:29

背景:众所周知,IE8及其以下的IE低版本浏览器是不支持html5标签的,更无奈的是IE9虽然支持了部分html5标签,但是对系统做了严格限制,那就是xp系统是无法装IE9的,这就把IE8、IE7这些低版本浏览器的死期更xp系统的死期狠狠地绑在了一起。微软的同志们下定了决心要干掉xp系统,无奈xp系统根深蒂结,一时无法连根拔起,就给了个几年的期限,而这期限只是停止更新,就算到了那时,谁也不能保证广大老年人是否愿意挪动一下身体去更新换代呢。用户就是上帝,你可以有你的选择,但上帝不会再眷恋着你。

实现原理:每个浏览器有一个它本身所认识的标签的列表,那么不在这个列表里面的标签我们称之为该浏览器的不可识别标签。对于ie低版本浏览器来言,html5的标签就是它的不可识别标签,在未做任何处理的情况下,这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。有人研究发

阅读全文
  • 分类: html5
  • 阅读: (8898)
  • 评论: (8)