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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS极坐标的实例代码
Jun 03 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
python购物车程序简单代码
2018/04/18 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python Shapely使用指南详解
2020/02/18 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python实现飞船大战
2020/04/24 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
初入社会应届生求职信
2013/11/18 职场文书
采购部主管岗位职责
2014/01/01 职场文书
工作会议欢迎词
2014/01/16 职场文书
中学生班主任评语
2014/01/30 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
2015中学教学工作总结
2015/07/22 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
带你了解Java中的ForkJoin
2022/04/28 Java/Android