欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈HTML5 WebSocket

程序员文章站 2022-04-12 20:05:25
email:longsu2010 at yeah dot net websocket是我现在所在的公司获取数据的主要通道,也是我工作的重要组成部分。今天看同事讨论这个问题,出现了好多有趣的事情,比如...

email:longsu2010 at yeah dot net

websocket是我现在所在的公司获取数据的主要通道,也是我工作的重要组成部分。今天看同事讨论这个问题,出现了好多有趣的事情,比如说要把websocket做成同步的来调试错误(websocket是异步全双工通信,标准就是这样的),所以对websocket做一个简单的说明,如果有需要后期可能会做一个详细的补充,欢迎关注我的csdn博客。


简单示例:
var socket = new websocket('ws://' + host + ':' + port);
socket.onmessage = function(evt){

console.log(evt.data);
};
socket.onclose = function(){ };
socket.onopen = function(){

this.send("发送的内容");
};
socket.onerror = function(err){

console.log(err); console.log(arguments);
};

// 发送信息的方法

function sendmsg(){
 if( socket && (websock.readystate === 1) ){
  socket.send("sdf");
 }else{
  // 放入发送队列
  // 创建or重新创建连接
 }
}

通过ajax获取数据时xmlhttprequest对象(实例)一般不会复用(每次都创建一个新的),但是websocket连接是可以复用的,而且复用的好处很多,比如减少服务器端连接、节省创建连接时间等等,再说也没有不复用的道理。因为复用所以一般都只创建一个websocket实例,为了保证通信的可靠性就要在每次发送信息前检查一下websocket连接是否可用(是不是服务器端已经主动断开连接了),可用才能发信息嘛,可用就发送,不可用那个放入发送队列,websocket实例的readystate属性就是用来检测websocket实例状态的,说明如下。

readystate
0 : 对应常量connecting,表示连接正在创建
1 : 对应常量open,表示连接处于可通讯状态
2 : 对应常量closing,表示连接正在断开
3 : 对应常量closed,表示连接已经断开

因为websocket实例创建和信息传输都是异步的所以就会涉及到回调函数,如当连接创建完成调用哪个函数。各回调函数句柄如下:
onopen:当连接创建完成调用哪个函数,对应open事件,适合将待发送队列中的信息发送到server端。
onerror:当连接本身出现问题时,对应error事件,适合做重新连接。
onclose:当连接关闭时,对应close事件,适合资源清理。
onmessage:当服务器端推送信息到客户端时,对应message事件。

websocket实例提供的方法如下:
send:发送信息到server端。如果readystate为1返回true,否则返回false。
close:关闭websocket连接。

websocket实例会发布如下事件:
open:当连接创建完成时,及readystate从0变为1时。
message:每当有信息从server端推送到client端时。
error:当连接本身发生错误时
close:当连接关闭时。

订阅事件可以通过websocket实例的addeventlistener方法来完成,如:
var onmsg = function(){

console.log(arguments)
};
socket.addeventlistener("message", onmsg);
取消订阅可以通过removeeventlistener,如:
socket.removeeventlistener("message", onmsg);

功能上socket.addeventlistener("message", onmsg);与socket.onopen = onmsg;是相同的,区别在于前者是可以添加多个回调函数的,而后者是赋值操作,总是使用最后一次所赋的值。