• 聊天室和弹幕的js实现感觉没差


    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,海量学习资料免费送

  • 相关阅读:
    javascript数组对象
    jquery、javascript实现(get、post两种方式)跨域解决方法
    js检查字符串的包含关系
    element——message消息提示
    js把mysql传过来的时间格式化为:0000-00-00 00:00:00
    beego orm操蛋问题:操作都需要主键
    element——message-box
    VUE.js全局变量的定义
    element el-upload组件获取文件名
    go遍历某个文件夹
  • 原文地址:https://www.cnblogs.com/xsns/p/6667905.html
Copyright © 2020-2023  润新知