聊天室和彈幕的js實現感覺沒差

標籤：...   xhr   返回   解析   form   package   ons   insert   檢測   

var hasLastCheckReturned = true;

var lastCheckedTime = 0;

setTimeout(function(){

if(!hasLastCheckReturned){

return; //上次還沒返回結果。放棄這次請求。

}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.responseCode=== 200){

//解析彈幕

vardanmakuList = yourFormatParser(xhr.responseText);

for(var i =0; i < danmakuList.length; i++){

CM.insert(danmakuList[i]);//把增量彈幕每一個都插入

};

lastCheckedTime= Date.now(); //更新上次檢測的時間

hasLastCheckReturned= true;

} else {

//可能出了問題

hasLastCheckReturned= true;

}

}

};

xhr.open(‘GET‘,‘http://yoururl/somevideoid/?from=‘ + lastCheckedTime, true); //告訴伺服器上次檢查的時間，來擷取增量

xhr.send(); //發送請求

hasLastCheckReturned = false;

}, 3000); //每3s檢查新的彈幕

以及：

//基於socket.io和JQuery來簡化代碼

var socket = io(); //開啟流

socket.on(‘danmaku‘, function(data){

//當遇到danmaku事件，就把推送來的彈幕推送給CCL

var danmaku = yourFormatParser(data);

CM.insert(danmaku);

});

$(‘#send-danmaku-btn‘).click(function(){

//當按了發送彈幕的按鈕

var data = {

"text":"擷取資訊。。"

...

};//通過UI擷取新彈幕的資訊

//封裝並發射彈幕

socket.emit(‘send-danmaku‘,JSON.stringify(yourFormatPackager(data));

//清除UI文字部分

$(‘#send-danmaku-field‘).value("");

});

tml"%?З`?

歡迎加入WEB前端互動交流群04，海量學習資料免費送

聊天室和彈幕的js實現感覺沒差