长链接通信
http://javascript.ruanyifeng.com/htmlapi/websocket.html#toc7
项目实现：实现web实时更新匹配人数。onError或onClose则提示刷新。
image
<code>
//websocket
varmatchId = {{.match_id}};
functionwebSocket() {
varwsUri ="{{.match_socket_url}}";
wsUri = wsUri+"?user_id="+userId+"&match_id="+matchId;
websocket=newWebSocket(wsUri);
showLoading(loadControl);
console.log(wsUri);
console.log("start1.....");
websocket.onopen=function(evt) {
onOpen(evt)
};
websocket.onmessage=function(evt) {
onMessage(evt);
};
websocket.onerror=function(evt) {
console.log("onError: "+evt);
createCookie("join_user_"+userId,"",-1);
hideLoading(loadControl);
$(".match-title").html("请刷新页面获取匹配进度")
};
websocket.onclose=function(evt) {
console.log("onclose: "+evt);
createCookie("join_user_"+userId,"",-1);
hideLoading(loadControl);
$(".match-title").html("请刷新页面获取匹配进度")
};
}
functiononOpen(evt) {
console.log("onOpen send start1.....");
websocket.send('{"user_id":"'+userId+'","match_id":"'+matchId+'"}');
console.log("onOpen send start2.....");
}
functiononMessage(evt) {
hideLoading(loadControl);
varjsonObject = JSON.parse(evt.data);
varbodyObj = JSON.parse(jsonObject.body);
varjoinUser = bodyObj.join_users;
varmatchFlag = bodyObj.match_flag;
console.log("joinUser:"+joinUser);
console.log("matchFlag:"+matchFlag);
createCookie("join_user_"+userId,joinUser,1);
setInterval(function() {
if(curJoinUser < joinUser) {
curJoinUser ++;
}
$(".green-ft").html(curJoinUser);
if(matchFlag ==1&& curJoinUser ==10){
createCookie("join_user_"+userId,"",-1);
window.location.reload();
}
},500);
}
</code>
