html5 WebSocket
2016-03-16 17:58
591 查看
websocket允许我们建立时时全双共的web实时通信,websocket没有出现之前,我们是利用长轮询,客户端和服务器建立起长期的链接,直到服务器数据状态改变或者时间过期才关闭,而每次的链接和请求都会把http 头部的一连串信息带过去,例如cookie等等,这样子会导致网络带宽还有延时等等,如果服务端的数据变更非常频繁的话,这种效率想必很低。
websoket通过一种握手协议来建立链接
客户端请求一个链接,头部中包含如下信息
服务器根据头部中的Sec-WebSocket-Key2,Sec-WebSocket-Key1,Upgrade,[8-byte security key] 知道客户端需要一个websocket协议链接,于是返回一个消息,包含如下头部
客户端收到消息之后,建立起websocket链接,这时就可以进行实时通信了
websocket是一种协议,若要和服务器简历起websocket链接,服务器必须要建立起websocket协议规范,这里我们不讨论服务器,我们讨论客户端如果进行websocket通信。
首先我们打开一个套接字链接,
websocket是一个打开过程,我们可以通过事件回调来处理业务过程
通过websocket发送消息,如果我们有一个点击按钮,我们可以直接在里面发送数据
发送消息出去,接收服务器消息,我们可以在socket的onmessage的回调函数里面获取数据
当我们想停止通讯时,我们必须要关闭socket链接来节省资源和避免不必要的错误
websocket基本的用法如上,现在浏览器对websocket的兼容性都比较好了,除了IE,需要在IE10+
博文参考
http://blog.teamtreehouse.com/an-introduction-to-websockets
websoket通过一种握手协议来建立链接
客户端请求一个链接,头部中包含如下信息
GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Upgrade: WebSocket Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 Origin: http://example.com [8-byte security key]
服务器根据头部中的Sec-WebSocket-Key2,Sec-WebSocket-Key1,Upgrade,[8-byte security key] 知道客户端需要一个websocket协议链接,于是返回一个消息,包含如下头部
HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo [16-byte hash response]
客户端收到消息之后,建立起websocket链接,这时就可以进行实时通信了
websocket是一种协议,若要和服务器简历起websocket链接,服务器必须要建立起websocket协议规范,这里我们不讨论服务器,我们讨论客户端如果进行websocket通信。
首先我们打开一个套接字链接,
// 创建一个websocket链接 var socket = new WebSocket('ws://192.158...');
websocket是一个打开过程,我们可以通过事件回调来处理业务过程
socket.onopen = function (evt) {...}; //打开的回调 socket.onclose = function (evt) {...}; //关闭的回调 socket.onmessage = function (evt) {...}; //消息发送成功,获取服务器消息时候的回调 socket.onerror = function (evt) {...}; //发送和接收过程出现错误的回调
通过websocket发送消息,如果我们有一个点击按钮,我们可以直接在里面发送数据
document.querySelect("#btn").onclick = function(){ socket.send(message); //发送消息 }
发送消息出去,接收服务器消息,我们可以在socket的onmessage的回调函数里面获取数据
socket.onmessage = function(event) { var message = event.data; //获取到服务器数据 };
当我们想停止通讯时,我们必须要关闭socket链接来节省资源和避免不必要的错误
socket.close(); //关闭链接
websocket基本的用法如上,现在浏览器对websocket的兼容性都比较好了,除了IE,需要在IE10+
博文参考
http://blog.teamtreehouse.com/an-introduction-to-websockets
相关文章推荐
- [转] 《高性能HTML5》读后整理的Web性能优化内容
- HTML5实现本地储存--localStorage、sessionStorage
- Html5之基础-4 HTML文本
- 为什么我们需要HTML5 WebSocket
- 让div可编辑,设置标签的可读可写属性
- Html5之基础-3 HTML概述、基础语法、文档结构
- Html5之基础-2 HTML快速入门
- 同学帮帮 h5 刮刮卡组件:Txbb.Scratch
- 同学帮帮移动 H5 弹出层类组件:txbb-pop
- 2016.3.16__HTML5新特性__第八天
- Html5之基础-1 WEB基础知识
- Html5_canvas_01
- Using HTML5 audio and video
- 使用HTML5 Web存储的localStorage和sessionStorage方式
- ace admin java 整合 开发 后台框架,aceadmin_HTML5
- [html5]记一些html5的东西
- h5
- HTML5骨骼动画Demo
- HTML5进阶(三)HBuilder实现软件自动升级(优化篇)
- HTML5进阶(三)HBuilder实现软件自动升级(优化篇)