亚洲必赢登录 > 亚洲必赢app > ajax文件上传,js中的七十九线程

原标题:ajax文件上传,js中的七十九线程

浏览次数:163 时间:2019-12-01

一、websocket与http

WebSocket是HTML5出的东西(左券),也等于说HTTP契约未有成形,大概说不妨,但HTTP是不支持长久连接的(长连接,循环连接的不算)

首先HTTP有 1.1 和 1.0 之说,约等于所谓的 keep-alive ,把多少个HTTP央求归并为叁个,可是 Websocket 其实是叁个新说道,跟HTTP合同基本未有涉嫌,只是为了协作现存浏览器的拉手标准而已,相当于说它是HTTP左券上的生机勃勃种补偿能够经过那样一张图精晓

亚洲必赢登录 1

有交集,不过并不是整整。

其它Html5是指的生龙活虎类别新的API,大概说新规范,新技艺。Http合同自己独有1.0和1.1,何况跟Html本人并未有一直关系。。通俗的话,你能够用HTTP公约传输非Html数据,正是这么=。=

再轻便的话,层级不近似。

 成功后的意义:

方法

postMessage:

向线程worker的中间范围发送音信,能够设置参数,发送给worker线程的多寡。在onmessage中采取。

亚洲必赢登录 ,terminate:

过多的拉开worker线程特别浪费能源所以在接纳未来能够告后生可畏段落它,终止方法运用terminate()。示例:worker.terminate();

close:

除了上面包车型客车关闭,假设是在worker线程自个儿也足以接收self.close()关闭。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebGL魔方小游戏 - www.web-tinker.com</title>
<style>* {padding:0px;margin:0px;overflow:hidden;background:#000;}</style>
<canvas id="canvas" width="512" height="512"></canvas>
<script type="text/x-glsl" id="svShader">
attribute vec3 position;
attribute vec3 normal;
attribute vec3 color;
uniform mat4 mMatrix;
uniform mat4 mvpMatrix;
uniform mat4 mvpShadowerMatrix;
uniform vec3 lVector;
varying float diffuse;
varying vec4 vPosition;
varying vec3 vColor;
void main(){
  vec4 v4Position=vec4(position,1.0);
  vPosition=mvpShadowerMatrix*v4Position;
  gl_Position=mvpMatrix*v4Position;
  vec3 tNormal=(mMatrix*vec4(normalize(normal),0.0)).xyz;
  diffuse=max(-dot(tNormal,normalize(lVector)),0.4);
  vColor=color;
}
</script>
<script type="text/x-glsl" id="sfShader">
precision lowp float;
varying float diffuse;
uniform sampler2D depthData;
uniform vec2 size;
varying vec4 vPosition;
varying vec3 vColor;
vec2 depthMap;
float f(float i,float j){
  float z=texture2D(depthData,depthMap+vec2(i,j)*2.0/size).z;
  return abs(z-vPosition.z)<0.01?diffuse:0.4;
}
void main(){
  depthMap=(vPosition.xy/vPosition.w*0.5+0.5)/512.0*size;
  float vDiffuse=0.0;
  for(float i=-2.0;i<=2.0;i++)for(float j=-2.0;j<=2.0;j++)vDiffuse+=f(i,j);
  vDiffuse/=25.0;
  gl_FragColor=vec4(vec3(vDiffuse*vColor),1.0);
}
</script>
<script type="text/x-glsl" id="pvShader">
attribute vec3 position;
attribute vec3 normal;
attribute vec3 color;
uniform mat4 mvpMatrix;
varying float xx;
void main(){
  gl_Position=mvpMatrix*vec4(position,1.0);
  normal;color;
}
</script>
<script type="text/x-glsl" id="pfShader">
precision lowp float;
uniform float index;
void main(){
  gl_FragColor=vec4(vec3(index),1.0);
}
</script>
<script type="text/x-glsl" id="bvShader">
attribute vec3 position;
uniform mat4 mvpShadowerMatrix;
varying float depth;
void main(){
  gl_Position=mvpShadowerMatrix*vec4(position,1.0);
  depth=gl_Position.z;
}
</script>
<script type="text/x-glsl" id="bfShader">
varying lowp float depth;
void main(){
  gl_FragColor=vec4(vec3(depth),1.0);
}
</script>
<base href="http://www.web-tinker.com/files/" />
<script src="SimpleWebGL.2.0.js"></script>
<script src="SimpleWebGL.Matrix.1.0.js"></script>
<script>
new SimpleWebGL(canvas).namespace(function(
  Program,VertexShader,FragmentShader,ArrayBuffer,
  Framebuffer,Renderbuffer,Texture2D,Matrix
){
  //基本函数
  var π=Math.PI,sin=Math.sin,cos=Math.cos,acos=Math.acos,pow=Math.pow,abs=Math.abs,
      round=Math.round,random=Math.random,updateMvpMatrix=function(){
        this.data.mvpMatrix=new Matrix(this.data.mMatrix).multiply(vpMatrix);
        this.data.mvpShadowerMatrix=new Matrix(this.data.mMatrix).multiply(vpShadowerMatrix);
      };
  //定义方块
  var Cube;
  (function(){
    var i,j,k,p,n,position=[],normal=[],color=[],push=Array.prototype.push,a=1,b=0.9,
        ctab=[[1,1,0],[0,0,1],[1,0,0],[1,1,1],[0,1,0],[1,0.5,0]];
    for(i=0;i<2;i++)for(j=0;j<3;j++){ //面
      for(k=0;k<4;k++)
        p=[k>>1?b:-b,k&1?b:-b],p.splice(j,0,i?a:-a),push.apply(position,p),
        n=[0,0],n.splice(j,0,i?a:-a),push.apply(normal,n),
        push.apply(color,ctab[i*3+j]);
      push.apply(position,position.slice(-9,-3));
      push.apply(normal,normal.slice(-9,-3));
      push.apply(color,color.slice(-9,-3));
    };
    for(i=0;i<3;i++)for(j=0;j<4;j++){ //棱
      for(k=0;k<4;k++)
        p=k<2?[a,b]:[b,a],p[0]*=j&2?1:-1,p[1]*=j&1?1:-1,
        p.splice(i,0,(k&1?1:-1)*b),push.apply(position,p),
        n=[a*(j&2?1:-1),a*(j&1?1:-1)],n.splice(i,0,0),push.apply(normal,n);
      push.apply(position,position.slice(-9,-3));
      push.apply(normal,normal.slice(-9,-3));
      for(k=0;k<6;k++)color.push(0.5,0.5,0.5);
    };
    for(i=0;i<8;i++)for(j=0;j<3;j++){ //角
      for(k=0;k<3;k++)
        position.push((k==j?a:b)*(i&1<<k?1:-1)),
        normal.push(a*(i&1<<k?1:-1));
      color.push(0.5,0.5,0.5);
    };
    var count=position.length/3,buffers={
      position:new ArrayBuffer(position),
      normal:new ArrayBuffer(normal),
      color:new ArrayBuffer(color)
    };
    Cube=function(){this.data=Object.create(buffers);};
    Cube.prototype={update:updateMvpMatrix,valueOf:function(){return count;}};
  })();
  //生成操作对象
  var cubes=[],ground;
  cubes.dimension=3,
  cubes.translation=Matrix.model([0,2,0]);
  cubes.rotation=Matrix.model([]).pitch(60).yaw(40).pitch(10);
  cubes.wMatrix=new Matrix(cubes.rotation).multiply(cubes.translation);
  (function(d){
    var i,j,k,o,e=(cubes.dimension-1)/2;
    for(i=0;i<d;i++)for(j=0;j<d;j++)for(k=0;k<d;k++)
      cubes.push(o=new Cube()),
      o.location=[i,j,k],o.rotation=new Matrix(4),
      o.translation=[i*2-d+1,j*2-d+1,k*2-d+1],
      o.m=Matrix.model(o.translation),
      o.data.mMatrix=new Matrix(o.m).multiply(cubes.wMatrix),
      o.rotate=function(m,r){
        this.location=Matrix.model(this.location).move(-e,-e,-e)[m](r*90).move(e,e,e).slice(-4,-1).map(round);
        this.m=Matrix.model(this.translation).multiply(this.rotation[m](r*90));
      };
  })(cubes.dimension);
  (function(i,j,k){

    ground={update:updateMvpMatrix,data:{
      position:new ArrayBuffer([-i,0,-j, -i,0,j, i,0,-j, i,0,j, -i,0,j, i,0,-j]),
      normal:new ArrayBuffer([0,1,0, 0,1,0, 0,1,0, 0,1,0, 0,1,0, 0,1,0]),
      color:new ArrayBuffer([].concat(k,k,k,k,k,k)),mMatrix:Matrix.model([0,-7,-9])
    },valueOf:function(){return 6;}};
  })(7,12,[0.5,0.5,0.5]);
  //打乱
  (function shuffle(c){
    var d=cubes.dimension,dir=random()*d|0,m=["pitch","yaw","roll"][dir],
        r=random()*3+1|0,cur=random()*d|0,offset=(d-1)/2,group=[],i,o;
    for(i=0;o=cubes[i];i++)if(o.location[dir]==cur)group.push(o);
    for(i=0;o=group[i];i++)o.rotate(m,r),o.data.mMatrix=new Matrix(o.m).multiply(cubes.wMatrix);
    if(c-->0)shuffle(c);
  })(30);
  //定义矩阵
  var vpMatrix=Matrix.view([0,0,32]).multiply(
    Matrix.projection(30,canvas.width/canvas.height,0.01,200)
  ),lVector=[-0,-8,-8],vpShadowerMatrix=Matrix.view( //光
    [-lVector[0],-lVector[1],-lVector[2]],
    acos(-lVector[2]/pow(pow(lVector[0],2)+pow(lVector[2],2),0.5))/π*180,
    -acos(-lVector[2]/pow(pow(lVector[1],2)+pow(lVector[2],2),0.5))/π*180
  ).multiply(new Matrix(4).data(2,2,-1/32).data(3,3,9).data(3,1,-1.2));
  //初始化着色器
  var picker=new Program(new VertexShader(pvShader),new FragmentShader(pfShader)).link(),
  shadower=new Program(new VertexShader(bvShader),new FragmentShader(bfShader)).link(),
  stage=new Program(new VertexShader(svShader),new FragmentShader(sfShader)).link();
  stage.use().data({size:[canvas.width,canvas.height],lVector:lVector});
  //初始化缓冲区
  var frameTexture=new Texture2D(null,"RGBA",512,512).bind(0),
  framebuffer=new Framebuffer(new Renderbuffer("DEPTH_COMPONENT16",512,512),frameTexture).unbind();
  //播放帧
  var active;
  this.play(function(){
    var i,o,l=cubes.length;
    for(i=0;i<l;i++)cubes[i].update();
    ground.update();
    if(MBUTTON==null){
      framebuffer.bind(),this.clear("COLOR","DEPTH"),picker.use();
      for(i=0;o=cubes[i];i++)picker.data(o.data).data({index:(i+1)/l}).draw(o);
      active=round(frameTexture.readPixels(MX,512-MY)[0]/0xFF*l-1);
    };
    framebuffer.bind(),this.clear("COLOR","DEPTH"),shadower.use();
    for(i=0;o=cubes[i];i++)shadower.data(o.data).draw(o);
    shadower.data(ground.data).draw(ground);
    framebuffer.unbind(),this.clear("COLOR","DEPTH"),stage.use();
    for(i=0;o=cubes[i];i++)stage.data(o.data).draw(o);
    stage.data(ground.data).draw(ground);
  }).setting({DEPTH_TEST:"LESS"}).color(0,0,0,1);
  //鼠标操作
  var MX,MY,MBUTTON;
  (function(){
    addEventListener("contextmenu",function(e){e.preventDefault();});
    addEventListener("mousedown",function(e){MBUTTON=e.button;});
    addEventListener("mouseup",function(e){MBUTTON=null;});
    addEventListener("mousemove",function(e){MX=e.layerX,MY=e.layerY;});
    //元素拖拽
    var queue=[],offset=(cubes.dimension-1)/2;
    addEventListener("mousedown",function(e){
      if(e.button!=0||active<0)return;
      var i,j,o,dir,mx=e.clientX,my=e.clientY,mousemove,mouseup,
          groups=[[],[],[]],methods=["pitch","yaw","roll"],mpos;
      for(i=0;o=cubes[i];i++)for(j=0;j<3;j++)
        if(o.location[j]==cubes[active].location[j])groups[j].push(o);
      addEventListener("mousemove",mousemove=function(e){
        var ndir,group,i,j,o;
        mpos=Matrix.model([(e.clientY-my)/2,(e.clientX-mx)/2,0]).multiply(new Matrix(cubes.wMatrix).inverse()).slice(-4,-1);
        group=groups[o=mpos.map(abs),ndir=o.indexOf(Math.max.apply(Math,o))];
        if(dir!=ndir)for(i=0;i<queue.length;i++)for(j=0;j<group.length;j++)
          if(queue[i].indexOf(group[j])>-1)ndir=dir,j=group.length,i=queue.length;
        if(dir!=void 0&&dir!=ndir)
          for(i=0;o=groups[dir][i];i++)o.data.mMatrix=new Matrix(o.m).multiply(cubes.wMatrix);
        if(group=groups[dir=ndir])for(i=0;o=group[i];i++)
          o.data.mMatrix=new Matrix(o.m)[methods[dir]](mpos[dir]).multiply(cubes.wMatrix);
      }),addEventListener("mouseup",mouseup=function(){
        removeEventListener("mousemove",mousemove),removeEventListener("mouseup",mouseup);
        var m=methods[dir],r=round(mpos[dir]/90)%4,group=groups[dir],i,o,r;
        if(!group)return;
        queue.push(group);
        for(i=0;o=group[i];i++)o.rotate(m,r);
        if(r=mpos[dir]%=90)if(abs(r)>45)r=r<0?90-abs(r):abs(r)-90;
        (function callee(){
          if(abs(r*=0.7)<0.5)r=0;
          for(i=0;o=group[i];i++)o.data.mMatrix=new Matrix(o.m)[m](r).multiply(cubes.wMatrix);
          if(r)setTimeout(callee,16);
          else queue.splice(queue.indexOf(group),1);
        })()
      });
    });
    //控制方向
    addEventListener("mousedown",function(e){
      if(e.button!=2)return;
      var x=e.clientX,y=e.clientY,mousemove,mouseup;
      addEventListener("mousemove",mousemove=function(e){
        cubes.rotation.yaw((e.clientX-x)/2).pitch((e.clientY-y)/2);
        cubes.wMatrix=new Matrix(cubes.rotation).multiply(cubes.translation);
        for(var i=0,o;o=cubes[i];i++)o.data.mMatrix=new Matrix(o.m).multiply(cubes.wMatrix);
        x=e.clientX,y=e.clientY;
      }),addEventListener("mouseup",mouseup=function(e){
        removeEventListener("mousemove",mousemove),removeEventListener("mouseup",mouseup);
      });
    });
  })();

});
</script>
</head>
<body>

</body>
</html>

css包容代码

ajax轮询

ajax轮询的规律非常轻松,让浏览器隔个几秒就发送叁遍倡议,询问服务器是或不是有新音信。

场景再次出现:

顾客端:啦啦啦,有未有新消息(Request卡塔尔(英语:State of Qatar)

服务端:没有(Response)

客商端:啦啦啦,有未有新消息(Request卡塔尔

服务端:没有。。(Response)

顾客端:啦啦啦,有未有新音信(Request卡塔尔国

服务端:你好烦啊,未有呀。。(Response)

客商端:啦啦啦,有未有新音信(Request)

服务端:好啊好啊,有哇给你。(Response)

客商端:啦啦啦,有未有新音信(Request)

服务端:。。。。。没。。。。没。。。没有(Response) —- loop

 1     <form action="">
 2     
 3         <input type="file" id="file1" name="">
 4     
 5         <br>
 6     
 7         <input type="file" id="file2" name="">
 8     
 9         <br>
10     
11         <input type="button" value="保存">
12     
13     </form>

Worker简介

    JavaScript 语言使用的是单线程模型,也正是说,全部职分只可以在二个线程上实现,叁回只好做豆蔻年华件事。后面包车型地铁职务没做完,后边的天职只好等着。这几个都以我们所公知的。不过随着专业的不仅扩张,只是意气风发味的单线程方式已经只怕不能满意大家的须要了。于是在html5中新添了后台职务worker API。

w3c中的介绍:web worker 是运作在后台的 JavaScript,独立于其它脚本,不会耳熟能详页面包车型地铁性质。您能够三番五次做其余愿意做的作业:点击、选拔内容等等,而这时候web worker 在后台运营。

       worker就是为了JavaScript 成立三十二线程情状,允许主线程创造 Worker 线程,将有些职责分配给后代运维。开启后台线程,在不影响前台线程的前提下做一些耗费时间恐怕异步的操作。因为是见仁见智的线程,所以主线程与worker线程互不苦闷。也不会相互打断。所以在某些地方能够加强页面包车型客车流程性。Worker 线程意气风发旦新建设成功,就能一直运作,不会被主线程上的位移(比方客户点击按键、提交表单)打断。那样有扶植随即响应主线程的通讯。可是,那也促成了 Worker 相比较开支财富,不应有过度使用,何况假如选用达成,就相应关闭。

 

progress {``display: inline-block; `` ``width: 160px;height: 20px;  border: 1px solid #0064B4;   ``background-color:#e6e6e6;color: #0064B4; /*IE10*/}  

long poll

long poll 其实原理跟 ajax轮询 大约,都以选择轮询的诀窍,可是使用的是拥塞模型(一向打电话,没收到就不挂电话),也正是说,客商端发起连接后,要是没音讯,就直接不回去Response给顾客端。直到有音信才回来,再次来到完以往,客商端再次成立连接,生生不息。

此情此景重现:

客商端:啦啦啦,有未有新信息,没有的话就等有了才回来给自家吧(Request)

服务端:额。。 等待到有新闻的时候。。来 给您(Response)

客商端:啦啦啦,有未有新音讯,未有的话就等有了才回到给自个儿吗(Request) -loop

从上边能够看看其实那二种方法,都以在不停地创制HTTP连接,然后等待服务端管理,能够反映HTTP协议的其它三个风味,被动性。

何为被动性呢,其实就是,服务端无法积极交换客商端,只好有顾客端发起。

粗略地说正是,服务器是三个很懒的智能冰箱(那是个梗)(不会、不能够积极发起连接),然则下边有指令,假如有客商来,不管多么累都要杰出应接。

说罢这几个,大家再来讲一说上边包车型客车破绽(原谅本人废话这么多吧OAQ)

从上边比较轻易看出来,不管怎么着,下面这两种都以可怜消功耗源的。

ajax轮询 供给服务器有长足的管理速度和财富。(速度)long poll 供给有超级高的面世,也正是说同不经常候招待顾客的手艺。(场所质大学小)

ajax文件上传,js中的七十九线程。所以 ajax轮询 和 long poll 都有相当大希望发生这种场所。

客商端:啦啦啦啦,有新新闻么?

服务端:月线正忙,请稍后再试(503 Server Unavailable)

客户端:。。。。好呢,啦啦啦,有新音讯么?

服务端:月线正忙,请稍后再试(503 Server Unavailable)

顾客端:然后服务端在边际忙的要死:三门双门电冰箱,小编要愈来愈多的智能冰箱!更加多。。越多。。(我错了。。那又是梗。。)

 

布局函数

worker():创立一个专项使用的Web worker,在钦点的UCRUISERL上实施脚本。示例:var worker=new Worker('js/setTime.js'卡塔尔(英语:State of Qatar);

(3)position是只读属性,当前速度的岗位,正是value / max的值。要是进程条不明显,则值为-1.
(4)labels也是只读属性,得到的是指向该progress成分的label成分们。比方document.querySelector("progress"卡塔尔国.labels,重返的正是HTMLCollection。

三、Websocket的作用

在讲Websocket早先,作者就顺便着讲下 long poll 和 ajax轮询 的原理。

JS:

 电磁打点计时器示例

上面说了那么多都以介绍worker的片段宗旨天性恐怕措施的施用。下面通过切实的亲自过问来看效果。

大家就拿最常用的倒计时来做示范表明。很简短的二个例子。大家在业务中平日遇上倒计时业务,在倒计时的时候还要做一些其余的作业。因为js单线程的本性,你会开掘你的倒计时在你进行任何事情操作的时候是制动踏板了的。比方现在是9:57你举行了三秒的政工管理。等事务管理完结应该是:9:54,不过你的倒计时依然9:57.就很家喻户晓的注解了那叁个气象。

2.基本天性

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:ajax文件上传,js中的七十九线程

关键词:

上一篇:没有了

下一篇:没有了