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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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时间不正确的解决方法
2008/04/09 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
js 学习笔记(三)
2009/12/29 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
ExtJS 入门
2010/10/29 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
园林资料员岗位职责
2013/12/30 职场文书
四群教育工作实施方案
2014/03/26 职场文书
民主生活会汇报材料
2014/12/15 职场文书
未中标通知书
2015/04/17 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书