<script type="text/javascript">
var cnt=0;
var lockReconnect = false; //避免ws重復連接
var ws = null; // 判斷當前瀏覽器是否支持WebSocket
var wsUrl=webSocketURL;
createWebSocket(wsUrl);
function createWebSocket(url) {
try {
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
layer.open({
content: "當前瀏覽器不支持WebSocket",
type: 1,
// icon: 0,
time: 0, closeBtn: 1, btn: 0, title: "提示信息", isOutAnim:true,anim: 2,area: ['400px', '300px'],shade: 0.2,tipsMore: true
});
}
initEventHandle();
} catch (e) {
reconnect(url);
}
}
// var socketsend;
function initEventHandle() {
ws.onclose = function () {
console.log("llws連接關閉!" + CurentTime());
reconnect(wsUrl);
};
ws.onerror = function () {
console.log("llws連接錯誤!");
reconnect(wsUrl);
};
ws.onopen = function () {
// heartCheck.reset().start(); //心跳檢測重置
console.info("llws連接成功!" + CurentTime());
};
ws.onmessage = function (evt) { //如果獲取到消息,心跳檢測重置
console.info("llws連接成功" + evt.data);
var data = $.parseJSON(evt.data);
if(data.order==0){
addOpenRecord();//開門記錄
}
if(data.order==1){
addStranger(data.data);//推送陌生人
}
if(data.order==2){
//推送命中內(nèi)部人員實時照片
addInsider(data.data);
}
if(data.order==3){//陌生人記錄
addStrangerRecord();
}
}
}
// 監(jiān)聽窗口關閉事件哮针,當窗口關閉時睡汹,
// 主動去關閉websocket連接,防止連接還沒斷開就關閉窗口,server端會拋異常圆裕。
window.onbeforeunload = function () {
ws.close();
}
function reconnect(url) {
if (lockReconnect) return;
lockReconnect = true;
setTimeout(function () {
//沒連接上會一直重連取逾,設置延遲避免請求過多
createWebSocket(url);
lockReconnect = false;
}, 2000);
}
//心跳檢測
var heartCheck = {
timeout: 3000,
timeoutObj: null,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
var self = this;
this.timeoutObj = setTimeout(function () {
//這里發(fā)送一個心跳,后端收到后箕母,返回一個心跳消息储藐,
//onmessage拿到返回的心跳就說明連接正常
ws.send("ping");
console.log("ping!")
self.serverTimeoutObj = setTimeout(function () {
//如果超過一定時間還沒重置,說明后端主動斷開了
//如果onclose會執(zhí)行reconnect嘶是,我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會觸發(fā)onclose導致重連兩次
ws.close();
},self.timeout)
},this.timeout)
}
}
function CurentTime(){
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //時
var mm = now.getMinutes(); //分
var ss=now.getSeconds(); // 獲取當前秒數(shù)(0-59)
if(month < 10)
month = "0"+month;
if(day < 10)
day = "0"+day;
if(hh < 10)
hh = "0"+hh;
if(mm < 10)
mm = "0"+mm;
if(ss < 10)
ss = "0"+ss;
clock=year+"-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
return(clock);
}
</script>
前端websocket連接
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門矾湃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人堕澄,你說我怎么就攤上這事邀跃。” “怎么了蛙紫?”我有些...
- 文/不壞的土叔 我叫張陵拍屑,是天一觀的道長。 經(jīng)常有香客問我坑傅,道長僵驰,這世上最難降的妖魔是什么? 我笑而不...
- 正文 為了忘掉前任唁毒,我火速辦了婚禮蒜茴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘枉证。我一直安慰自己矮男,他們只是感情好,可當我...
- 文/花漫 我一把揭開白布室谚。 她就那樣靜靜地躺著毡鉴,像睡著了一般崔泵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上猪瞬,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鞍泉!你這毒婦竟也來了皱埠?” 一聲冷哼從身側(cè)響起,我...
- 正文 年R本政府宣布,位于F島的核電站洋幻,受9級特大地震影響郁轻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜文留,卻給世界環(huán)境...
- 文/蒙蒙 一好唯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧燥翅,春花似錦骑篙、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽谎势。三九已至,卻和暖如春杨名,著一層夾襖步出監(jiān)牢的瞬間脏榆,已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- WebSocket的只讀屬性ready State表示連接狀態(tài)炎咖,可以是以下4個值: 0-表示連接尚未建立赃泡。 1-表...
- 錯誤信息:socket連接失敗:Error Domain=SRWebSocketErrorDomain Code=...
- 遇到的問題 WebSocket connection to 'ws://localhost:8080/biding...
- 三次捂手的無狀態(tài)http協(xié)議,是web應用的基礎乘盼,以此來建立client和server的交互升熊,但是在這種協(xié)議下造成...
- 今天永澄大大的文章簡直是太扎心啦级野,一字一句說的不就是我嗎?沒有看過大大文章的小伙伴請戳https://mp.wei...