h5提供了WebSocket网络协议,可以实现浏览器与服务器的双向数据传输
构造函数
WebSocket(url,protocol)
url:WebSocket API URL,URL之前需要添加ws://或者wss://(类似http://、https://)
protocol:与服务端定义的协议名称相同,协议的参数例如XMPP(Extensible Messaging and Presence Protocol)、SOAP(Simple Object Access Protocol)或者自定义协议。
var ws = new WebSocket('ws://url', 'myprotocol');
var ws = new WebSocket('ws://url', ['myprotocol','myprotovol2']);
方法
send(message) 通过已建立的websocket连接发送数据
close(code(numerical),reason(string)) 关闭打开的websocket连接
事件
-WebSocket API是纯事件驱动,建立连接之后,可自动发送状态改变的数据和通知
onopen 当建立websocket连接时触发,只触发一次
onerror 当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件。
onmessage 当服务端发送数据时触发,可多次触发,页面数据展示处理模块-实现轮询
onclose 当websocket连接关闭时触发,只触发一次
属性
readyState: WebSocket连接状态
0 正在与服务端建立WebSocket连接,还没有连接成功
1 连接成功并打开,可以发送消息
2 进行关闭连接的操作,且尚未关闭
3 连接已关闭或不能打开
bufferedAmount:检查传输数据的大小,当客户端传输大量数据时使用避免网络饱和
protocol:在构造函数中使用,protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称,可以为空
完整案例
使用公开的“echo.websocket.org/echo” websocket接口服务写一个完整的案例
var ws = new WebSocket('ws://echo.websocket.org/echo');
console.log('ws连接状态:' + ws.readyState);
//监听是否连接成功
ws.onopen = function () {
console.log('ws连接状态:' + ws.readyState);
//连接成功则发送一个数据
ws.send('test1');
}
//接听服务器发回的信息并处理展示
ws.onmessage = function (data) {
console.log('接收到来自服务器的消息:');
console.log(data);
//完成通信后关闭WebSocket连接
ws.close();
}
//监听连接关闭事件
ws.onclose = function () {
//监听整个过程中websocket的状态
console.log('ws连接状态:' + ws.readyState);
}
//监听并处理error事件
ws.onerror = function (error) {
console.log(error);
}
`
![websocket](https://img-blog.csdnimg.cn/20190228161210681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTkwNjIz,size_16,color_FFFFFF,t_70)