中博建设集团有限公司网站网络规划设计师月薪

当前位置： 首页 > news >正文

中博建设集团有限公司网站,网络规划设计师月薪,网站建设企业需要准备资料,临海如何制作公司网站框架数据通道不仅可以发送文本消息, 还可以发送图片、二进制文件,将其类型binaryType属性设置成arraybuffer类型即可. 九\、文件传输 1、文件传输流程 #xff08;1#xff09;使用表单file打开本地文件 #xff08;2#xff09;使用FileReader读取文件的二进制数据 #…数据通道不仅可以发送文本消息, 还可以发送图片、二进制文件,将其类型binaryType属性设置成arraybuffer类型即可. 九\、文件传输 1、文件传输流程 1使用表单file打开本地文件 2使用FileReader读取文件的二进制数据 3创建对等连接本地连接及远端连接 4创建发送数据通道 5创建接收数据通道 6将读取的二进制数据 切割成一个个切片然后使用数据通道的send方法发送数据 。 7使用接收数据通道二进制数据 将其放入数据缓存 8根据数据缓存生成Blob 文件 10生成文件连接并提供下载。 读取流程中文件二进制数据使用FileReader对象还需要对数据进行切片处理在接收方法中使用缓存将接收的数据缓存起来最后生成blob下载文件。处理流程如下所示 2、FileReader FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件内容。常用事件如下所示 使用File或Blob对象指定要读取的文件或数据当监听到load事件后即可通过事件的结果属性拿到数据然后使用发送通道的send方法将数据发送出去。代码如下 sendChannel.send(e.target.result) 读取二进制数据可以使用FileReader的readAsArrayBuffer方法结果为ArrayBuffer对象。还有其它处理方法如下所示 读取数据 时需要将数据分成一段一段的然后发送接收时再按顺序读取到数据缓存中数据流的走向如图所示 上图中数据块叫做ChunkDataChannel每次发送的数据即为Chunk,  使用对象的slice方法按顺序切割 出数据块。如下面代码所示 let slicefile.slice(offset,offsetchunksize) 假设chunksize的大小为16348整个文件的数据块如下所示 3、发送文件示例 本示例为文件具休步骤如下 1首先在界面上添加input,类型为file,用于选择并读取文件progress两个分别用于发送及接收文件进度展示。 2创建本地和远端连接发送和接收数据通道发送和接收通道的数据类型设置为arraybuffer。 3建立本地和远端连接 4实例化FileReader对象并添加如下事件 error:  读取文件错误 abort:  读取文件取消 load:  文件加载完成 load事件表示数据已经准备好可以进行切割发送具体处理逻辑如下所示 //监听load事件 fileReader.addEventListener(load,(e){…//发送文件数据sendChannel.send(e.target.result);//偏移量offere.target.result.byteLength;…//判断偏移量是否小于文件大小if(offerfile.size){//继续读取readSlice(offser)} });//读取切片大小 let readSlice(o){…//开始切片let slicefile.slice(offset ,ochunksize);//读取二进制数据 fileReader.readAsArrayBuffer(slice);}5数据接收处理将收到第一个数据放入receiveBuffer缓存处理逻辑如下所示 //接收消息处理 onReceiveMessageCallback(event){ //将接收的数据添加到接收缓存里receiveBuffer.push(event.data); //设置当前接收文件的大小receivedSizeevent.data.byteLength;…const filefileInput.files[0]; //判断当前接收的文件大小是否等于文件的大小 if(receivedSizefile.size){//根据缓存生成Blob文件const receivednew Blob(receiveBuffer)//将缓存数据设置为空receiveBuffer[];…//创建下载文件对象及连接…} } 完整代码如下 import React from react; import { Button } from antd;//本地连接对象 let localConnection; //远端连接对象 let remoteConnection; //发送通道 let sendChannel; //接收通道 let receiveChannel; //文件读取 let fileReader; //接收数据缓存 let receiveBuffer []; //接收到的数据大小 let receivedSize 0; //文件选择 let fileInput; //发送进度条 let sendProgress; //接收进度条 let receiveProgress;/*** 数据通道发送文件示例*/ class DataChannelFile extends React.Component {componentDidMount() {sendProgress document.getElementById(sendProgress) receiveProgress document.getElementById(receiveProgress)fileInput document.getElementById(fileInput);//监听change事件,判断文件是否选择fileInput.addEventListener(change, async () {const file fileInput.files[0];if (!file) {console.log(没有选择文件);} else {console.log(选择的文件是: file.name);}});}//建立对等连接并发送文件startSendFile async () {//创建RTCPeerConnection对象localConnection new RTCPeerConnection();console.log(创建本地PeerConnection成功:localConnection);//监听返回的Candidate信息localConnection.addEventListener(icecandidate, this.onLocalIceCandidate);//实例化发送通道sendChannel localConnection.createDataChannel(webrtc-datachannel);//数据类型为二进制sendChannel.binaryType arraybuffer;//onopen事件监听sendChannel.addEventListener(open, this.onSendChannelStateChange);//onclose事件监听sendChannel.addEventListener(close, this.onSendChannelStateChange);//创建RTCPeerConnection对象remoteConnection new RTCPeerConnection();console.log(创建本地PeerConnection成功:remoteConnection);//监听返回的Candidate信息remoteConnection.addEventListener(icecandidate, this.onRemoteIceCandidate);//远端连接数据到达事件监听remoteConnection.addEventListener(datachannel, this.receiveChannelCallback);//监听ICE状态变化localConnection.addEventListener(iceconnectionstatechange, this.onLocalIceStateChange);//监听ICE状态变化remoteConnection.addEventListener(iceconnectionstatechange, this.onRemoteIceStateChange);try {console.log(localConnection创建提议Offer开始);//创建提议Offerconst offer await localConnection.createOffer();//创建Offer成功await this.onCreateOfferSuccess(offer);} catch (e) {//创建Offer失败this.onCreateSessionDescriptionError(e);}}//创建会话描述错误onCreateSessionDescriptionError (error) {console.log(创建会话描述SD错误: \({error.toString()});}//创建提议Offer成功onCreateOfferSuccess async (desc) {//localConnection创建Offer返回的SDP信息console.log(localConnection创建Offer返回的SDP信息\n\){desc.sdp});console.log(设置localConnection的本地描述start);try {//设置localConnection的本地描述await localConnection.setLocalDescription(desc);this.onSetLocalSuccess(localConnection);} catch (e) {this.onSetSessionDescriptionError();}console.log(remoteConnection开始设置远端描述);try {//设置remoteConnection的远端描述await remoteConnection.setRemoteDescription(desc);this.onSetRemoteSuccess(remoteConnection);} catch (e) {//创建会话描述错误this.onSetSessionDescriptionError();}console.log(remoteConnection开始创建应答Answer);try {//创建应答Answerconst answer await remoteConnection.createAnswer();//创建应答成功await this.onCreateAnswerSuccess(answer);} catch (e) {//创建会话描述错误this.onCreateSessionDescriptionError(e);}}//设置本地描述完成onSetLocalSuccess (pc) {console.log(\({this.getName(pc)}设置本地描述完成:setLocalDescription);}//设置远端描述完成onSetRemoteSuccess (pc) {console.log(\){this.getName(pc)}设置远端描述完成:setRemoteDescription);}//设置描述SD错误onSetSessionDescriptionError (error) {console.log(设置描述SD错误: \({error.toString()});}getName (pc) {return (pc localConnection) ? localConnection : remoteConnection;}//创建应答成功onCreateAnswerSuccess async (desc) {//输出SDP信息console.log(remoteConnection的应答Answer数据:\n\){desc.sdp});console.log(remoteConnection设置本地描述开始:setLocalDescription);try {//设置remoteConnection的本地描述信息await remoteConnection.setLocalDescription(desc);this.onSetLocalSuccess(remoteConnection);} catch (e) {this.onSetSessionDescriptionError(e);}console.log(localConnection设置远端描述开始:setRemoteDescription);try {//设置localConnection的远端描述,即remoteConnection的应答信息await localConnection.setRemoteDescription(desc);this.onSetRemoteSuccess(localConnection);} catch (e) {this.onSetSessionDescriptionError(e);}}//Candidate事件回调方法onLocalIceCandidate async (event) {try {if (event.candidate) {//将会localConnection的Candidate添加至remoteConnection里await remoteConnection.addIceCandidate(event.candidate);this.onAddIceCandidateSuccess(remoteConnection);}} catch (e) {this.onAddIceCandidateError(remoteConnection, e);}console.log(IceCandidate数据:\n\({event.candidate ? event.candidate.candidate : (null)});}//Candidate事件回调方法onRemoteIceCandidate async (event) {try {if (event.candidate) {//将会remoteConnection的Candidate添加至localConnection里await localConnection.addIceCandidate(event.candidate);this.onAddIceCandidateSuccess(localConnection);}} catch (e) {this.onAddIceCandidateError(localConnection, e);}console.log(IceCandidate数据:\n\){event.candidate ? event.candidate.candidate : (null)});}//添加Candidate成功onAddIceCandidateSuccess (pc) {console.log(\({this.getName(pc)}添加IceCandidate成功);}//添加Candidate失败onAddIceCandidateError (pc, error) {console.log(\){this.getName(pc)}添加IceCandidate失败: \({error.toString()});}//监听ICE状态变化事件回调方法onLocalIceStateChange (event) {console.log(localConnection连接的ICE状态: \){localConnection.iceConnectionState});console.log(ICE状态改变事件: , event);}//监听ICE状态变化事件回调方法onRemoteIceStateChange (event) {console.log(remoteConnection连接的ICE状态: \({remoteConnection.iceConnectionState});console.log(ICE状态改变事件: , event);}//关闭数据通道closeChannel () {console.log(关闭数据通道);sendChannel.close();if (receiveChannel) {receiveChannel.close();}//关闭localConnectionlocalConnection.close();//关闭remoteConnectionremoteConnection.close();//localConnection置为空localConnection null;//remoteConnection置为空remoteConnection null;}//发送数据sendData () {let file fileInput.files[0];console.log(文件是: \){[file.name, file.size, file.type].join( )});//设置发送进度条的最大值sendProgress.max file.size;//设置接收进度条的最大值receiveProgress.max file.size;//文件切片大小,即每次读取的文件大小let chunkSize 16384;//实例化文件读取对象fileReader new FileReader();//偏移量可用于表示进度let offset 0;//监听error事件fileReader.addEventListener(error, (error) {console.error(读取文件出错:, error)});//监听abort事件fileReader.addEventListener(abort, (event) {console.log(读取文件取消:, event)});//监听load事件fileReader.addEventListener(load, (e) {console.log(文件加载完成 , e);//使用发送通道开始发送文件数据sendChannel.send(e.target.result);//使用文件二进制数据长度作为偏移量offset e.target.result.byteLength;//使用偏移量作为发送进度sendProgress.value offset;console.log(当前文件发送进度为:, offset);//判断偏移量是否小于文件大小if (offset file.size) {//继续读取readSlice(offset);}});//读取切片大小let readSlice (o) {console.log(readSlice , o);//将文件的某一段切割下来,从offset到offset chunkSize位置切下let slice file.slice(offset, o chunkSize);//读取切片的二进制数据fileReader.readAsArrayBuffer(slice);};//首次读取0到chunkSize大小的切片数据readSlice(0);}//接收通道数据到达回调方法receiveChannelCallback (event) {//实例化接收通道receiveChannel event.channel;//数据类型为二进制receiveChannel.binaryType arraybuffer;//接收消息事件监听receiveChannel.onmessage this.onReceiveMessageCallback;//onopen事件监听receiveChannel.onopen this.onReceiveChannelStateChange;//onclose事件监听receiveChannel.onclose this.onReceiveChannelStateChange;receivedSize 0;}//接收消息处理onReceiveMessageCallback (event) {console.log(接收的数据 \({event.data.byteLength});//将接收到的数据添加到接收缓存里receiveBuffer.push(event.data);//设置当前接收文件的大小receivedSize event.data.byteLength;//使用接收文件的大小表示当前接收进度receiveProgress.value receivedSize;const file fileInput.files[0];//判断当前接收的文件大小是否等于文件的大小if (receivedSize file.size) {//根据缓存数据生成Blob文件const received new Blob(receiveBuffer);//将缓存数据置为空receiveBuffer [];//获取下载连接对象let download document.getElementById(download);//创建下载文件对象及链接download.href URL.createObjectURL(received);download.download file.name;download.textContent 点击下载\){file.name}(${file.size} bytes);download.style.display block;}}//发送通道状态变化onSendChannelStateChange () {const readyState sendChannel.readyState;console.log(发送通道状态: readyState);if (readyState open) {this.sendData();}}//接收通道状态变化onReceiveChannelStateChange () {const readyState receiveChannel.readyState;console.log(接收通道状态: readyState);}//取消发送文件cancleSendFile () {if (fileReader fileReader.readyState 1) {console.log(取消读取文件);fileReader.abort();}}render() {return (div classNamecontainerdivform idfileInfoinput typefile idfileInput namefiles //formdivh2发送/h2progress idsendProgress max0 value0 style{{width:500px}}/progress/divdivh2接收/h2progress idreceiveProgress max0 value0 style{{width:500px}}/progress/div/diva iddownload/adivButton onClick{this.startSendFile} style{{ marginRight: 10px }}发送/ButtonButton onClick{this.cancleSendFile} style{{ marginRight: 10px }}取消/ButtonButton onClick{this.closeChannel} style{{ marginRight: 10px }}关闭/Button/div/div);} } //导出组件 export default DataChannelFile;