HTML5实现WebSocket协议原理浅析


Posted in HTML / CSS onJuly 07, 2014

WebSocket协议的目的是为了工作于现有的网络基础设施。作为这一设计原则的一部分,WebSocket连接的协议规范定义了一个HTTP连接作为其开始生命周期,进而保证其与pre-WebSocket世界的完全向后兼容。通常来说从HTTP协议切换WebSocket称为WebSocket握手。

浏览器发送一个请求到服务器,这表明它想开关从HTTP WebSocket协议。客户端通过升级标题表达的愿望,代码如下所示:

复制代码
代码如下:
GET ws://echo.websocket.org/?encoding=text HTTP/1.1
Origin: http://websocket.org
Cookie: __utma=99as
Connection: Upgrade
Host: echo.websocket.org
Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw==
Upgrade: websocket
Sec-WebSocket-Version: 13

如果服务器理解WebSocket协议,它通过升级头同意协议切换。

复制代码
代码如下:
HTTP/1.1 101 WebSocket Protocol Handshake
Date: Fri, 10 Feb 2012 17:38:18 GMT
Connection: Upgrade Server: Kaazing Gateway
Upgrade: WebSocket
Access-Control-Allow-Origin: http://websocket.org
Access-Control-Allow-Credentials: true
Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU=
Access-Control-Allow-Headers: content-type

此时HTTP连接分解并取代了WebSocket连接在同一底层TCP / IP连接。WebSocket连接使用HTTP(80)和HTTPS端口一样(443),默认情况下。

连接建立后,WebSocket数据帧可以发送客户机和服务器之间来回在全双工模式下。两种文本和二进制帧可以在两个方向同时发送。只有两个字节数据最小陷害。对于文本帧,每一帧始于0 x00字节,以0 xff字节结束,包含utf - 8数据。WebSocket文本框架使用一个终结者,而二进制帧使用前缀长度。

HTML / CSS 相关文章推荐
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 #HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 #HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 #HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 #HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
You might like
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JS获取父节点方法
2009/08/20 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Express.JS使用详解
2014/07/17 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Python 字符串定义
2009/09/25 Python
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python 接收处理外带的参数方法
2018/12/03 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python打开音乐文件的实例方法
2020/07/21 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
团队精神演讲稿
2013/12/31 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
Django显示可视化图表的实践
2021/05/10 Python