今天记录下socket在客户端的使用，以下先附上代码
//开始socket连接
var wsUrl = ""; //ws地址（根据实际情况填写）
var ws = ""; //创建的socket对象
var lockReconnect = true; //避免ws重复连接
var heartReceive = true; //检测心跳是否成功返回
var timeoutId1 = 0; // 定时触发心跳
var timeoutId2 = 0; //心跳回复后再次定时
//创建socket连接
function createWebSocket() {
if(ws.readyState != 1){
ws = new WebSocket(wsUrl);
}
initEventHandle(); //连接创建成功后，进行状态监听
}
//发送心跳方法
function xSubWSTick()
{
if(!heartReceive || !lockReconnect){
console.log("心跳发送回复失败");
ws.close();//心跳发送后未收到服务器端响应则关闭连接
}else{
var myDate = new Date();
var xIsSendCommand = JSON.stringify({"1":"1"});
console.log(new Date().toLocaleTimeString()+' 发送心跳:'+xIsSendCommand);
heartReceive = false; //发送心跳前将标志置为false
if(ws.bufferedAmount == 0){//防止心跳发送排队
ws.send(xIsSendCommand);
}
}
}
function initEventHandle() {
ws.onclose = function (e) { //socket连接关闭时执行
lockReconnect = false;
console.log("ws连接关闭!"+new Date().toUTCString()+JSON.stringify(e));
reconnect(); //进行重连
};
ws.onerror = function (e) { //socket连接发生错误时执行（建议该方法不要做处理，如果是客户端检测到后会自动发起ws.close方法）
console.log("连接错误!"+JSON.stringify(e));
};
ws.onopen = function () { //socket连接成功时执行
console.log("连接成功!"+new Date().toUTCString());
lockReconnect = true;
heartReceive = true;
timeoutId1 = setTimeout("xSubWSTick()",20000); //连接成功后开始定时发送心跳
};
ws.onmessage = function (event) { //客户端收到服务器发送的消息时执行
console.log(new Date().toLocaleTimeString()+" 收到消息:"+event.data);
var iseval = event.data.substr(2,1); //这一步根据你发送的心跳进行处理，因为我发送的是"{"1":"1"}",所以判断心跳回复和推送的消息根据截取的第二个字符串可判断出
if(iseval != 1){
//处理发送过来的消息
}else{
heartReceive = true;//心跳回复正常
timeoutId2 = setTimeout("xSubWSTick()",20000); //再次定时发送心跳
}
}
}
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
ws.close();
};
//重连方法
function reconnect() {
if(lockReconnect)return; //避免造成多次连接
//如果是用setTimeout定时发送心跳，此处可不清除，但调用后清除是一个好的习惯，如果使用setInterval定时发送心跳，则一定要清除
clearTimeout(timeoutId1);
clearTimeout(timeoutId2);
setTimeout(function () {//没连接上会一直重连，设置延迟避免请求过多
createWebSocket();
}, 2000);
}
接下来请注意：
1.创建websocket连接对象是先请判断下对应的连接状态，不然会造成一直重连的问题（我就是被这个问题折磨了大半个月）
2.定时发送心跳可以用setTimeout()，也可以用setInterval(),两者的区别是：前者需要调用两次，但是重连前可以不清除，后者只用调用一次，但重连前一定要清除，如果不清除并重连过，那定时的时间会加快，会造成心跳发送异常，关闭websocket，亦会造成重连。
3.在此还学会了一个JavaScript小常识，所有变量，如果将其赋值为null的话JavaScript会进行回收。
总结：websocket在客户端使用虽然很简单，但是一定要细心，一定要细心，一定要细心。
网友评论