首页 > 代码库 > WebSocket的使用
WebSocket的使用
先来介绍一下webScoket,其实开始我也不知道是啥,所以搜了一下:
WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。
现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求。
在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端
做webSocket是由于项目需求,要求界面动态显示实时数据,但是又不可能一秒就给服务器发送一个,这个太不切实际了,于是有了webSocket。虽然后来可以但是中间遇到了很多的问题,查资料的时候还发现ie到10的版本才支持,真是人艰不拆啊~~~
function start() { //---2:到了这里
var wsImpl = window.WebSocket||window.MozWebSocket; //这应该是定义好的
window.ws = new wsImpl(‘ws://192.168.11.11:8180/‘); //这里是服务器地址
ws.binaryType = "arraybuffer";
ws.onmessage = function(evt) { //---6:这里就是用来接受数据的,想要怎么处理就是自己的事啦
var mess = evt.data;
//对于数据的处理一是看服务器传过来的是什么数据;二是看你需要什么样式的数据
}
};
ws.onopen = function() { //---3.1:打开服务器,并连接成功
$.ajax({ //---4:这里我是用来第一次想服务器发送请求的内容
type:‘POST‘,
url:ctx+‘/do/xx/xx/xxx‘,
async : false,
data:{
xx:xx
},
dataType:‘text‘,
success:function(data){
ws.send(data); //-----5:获取到ajax的内容之后,就可以将其发送给服务器,就是这个send的啦
}
});
};
ws.onclose = function() { //---3.2:到了这里应该是服务器关闭了
$.messager.alert(‘Warning‘,‘服务器已经关闭了~‘);
};
ws.onerror = function() { //---3.3连接出现问题了,关闭也是错误哦~
$.messager.alert(‘error‘,‘出现错误,请重试~‘);
};
};
$(function(){
start(); //---1:开始
});
本文出自 “落幕青” 博客,请务必保留此出处http://lmq4930.blog.51cto.com/3208925/1576584
WebSocket的使用