您的位置:首页 > Web前端 > HTML5

html5 WebSocket

2016-03-16 17:58 591 查看
websocket允许我们建立时时全双共的web实时通信,websocket没有出现之前,我们是利用长轮询,客户端和服务器建立起长期的链接,直到服务器数据状态改变或者时间过期才关闭,而每次的链接和请求都会把http 头部的一连串信息带过去,例如cookie等等,这样子会导致网络带宽还有延时等等,如果服务端的数据变更非常频繁的话,这种效率想必很低。

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: