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

WritableStream()写入流,将数字或字符流,写入你需要的地方

WritableStream有两个对象参数:
第一个必选,用于配置一些写入流时的钩子;
第二个可选,用于配置一些chunk入队和队列控制的策略;
第二个参数的策略(利用ByteLengthQueuingStrategy【按字节计量】和CountQueuingStrategy【按元素数量计量】接口去定义策略)两种

在第一个参数必选中,所有的对象字段都是可选的,可以单选,也可以全部,如下:
start(controller):在WritableStream对象完成构造后立即调用controller method执行一次
write(chunk,controller):每当一个新的chunk准备写入接收器的时候,将调用方法
close(controller):当结束写入流时候调用该方法
abort(reason):当写入流被中断或者写入流进入错误状态的时候,调用该方法

如下面的例子:
//写入流要插入的页面


<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>javascript写入流测试</title></head><body><div id="stream"><ul id="listStream"></ul></div></body><script type="text/javascript" src="test.js"></script></html>

//这里是上面html的javascript代码

//插入数字的异步函数
async function* ints(){for(let i=0;i<5;i++){const textEncoder=new TextEncoder();const encodedText=textEncoder.encode(i);for(let x of encodedText){yield await new Promise((resolve,reject)=>setTimeout(resolve,200,x));}}
}
//插入字符串的异步函数
async function* strs(str)
{for(let i=0,len=str.length;i<len;i++){const textEncoder=new TextEncoder();const encodedText=textEncoder.encode(str[i]);for(let x of encodedText){yield await new Promise((res,rej)=>setTimeout(res,100,x));}}
}//解码二进制字符流
const decoder=new TextDecoder();
//这个是第二参数的可选策略,我们选按元素计量
const queuingStrategy=new CountQueuingStrategy({highWaterMark:1});
let result="";
//获取到我们在html页面中的容器元素
let list=document.getElementById('listStream');
//写入二进制流
const writableStream=new WritableStream({//写入方法write(chunk){return new Promise((resolve,reject)=>{//设置一个定型数组,在内存中分配一个字节const buffer=new ArrayBuffer(1);//设置一个无符号1个字节缓冲const view=new Uint8Array(buffer);//为1个字符赋值view[0]=chunk;//解码二进制文字或数字const decoded=decoder.decode(view,{stream:true});//创建元素const listItem=document.createElement('li');listItem.textContent=`Chunk decoded:${decoded}`;list.appendChild(listItem);//将所有解码的字符或数字串连起来result+=decoded;//完成期约resolve();});},//所有的字符流或数字流完成后关闭流close(){const listItem=document.createElement('li');listItem.textContent=`[message received]${result}`;list.appendChild(listItem);},//发生错误时abort(err){console.error("sink error:",err);}},//写入流的第二个参数queuingStrategy,
);
//查看写入流锁的状态
console.log(writableStream.locked);
//getWriter()获得写入流的锁,锁定写入
const writableStreamDefaultWrite=writableStream.getWriter();
console.log(writableStream.locked);
//自闭异步函数执行写入操作,这里用的是字符串strs()函数,你可以用数字函数ints()
(async function(){for await (let chunk of strs('javascript ok')){await writableStreamDefaultWrite.ready;writableStreamDefaultWrite.write(chunk);}writableStreamDefaultWrite.close();
})();

//最后输出是这样
Chunk decoded:j
Chunk decoded:a
Chunk decoded:v
Chunk decoded:a
Chunk decoded:s
Chunk decoded:c
Chunk decoded:r
Chunk decoded:i
Chunk decoded:p
Chunk decoded:t
Chunk decoded:
Chunk decoded:o
Chunk decoded:k
[message received]javascript ok

http://www.lryc.cn/news/396128.html

相关文章:

  • RK3568平台(opencv篇)opencv处理图像视频
  • 4. kvm存储虚拟化
  • uniapp+vue3嵌入Markdown格式
  • 处理成二维数组对象
  • 智能汽车网络安全笔记
  • web 网络安全
  • Vue 3与Pinia:下一代状态管理的探索
  • 《植物大战僵尸杂交版》2.2版本:全新内容与下载指南
  • 探索Hash Router:构建单页应用的基石
  • MySQL中undo log、redo log 和 binlog三种日志的作用及应用场景
  • javaweb零碎知识3
  • 2024.7.9.小组汇报postman分享会
  • C语言文件操作-文件IO(系统调用)
  • LeetCode67(二进制求和[位运算,大数运算])
  • grep对文件内容搜索(附重要拓展-正则表达式)
  • 前端JS特效第26波:jQuery日期时间选择器插件
  • Anaconda+Pycharm 项目运行保姆级教程(附带视频)
  • java面试-java基础(上)
  • STM32快速搭建项目框架
  • JMH324-免费【最后一战LOL】MOBA竞技版本+单机一键端+视频教程+文本教程
  • WPF UI 3D 多轴 机械臂 stl 模型UI交互
  • 《金山 WPS AI 2.0:重塑办公未来的智能引擎》
  • RT2-使用NLP的方式去训练机器人控制器
  • VisActor vs ECharts: 哪个更适合你的数据可视化需求?
  • 【QT中实现摄像头播放、以及视频录制】
  • el-table封装popver組件,点击列筛选行数据功能,支持筛选,搜索,排序功能
  • 基于DPU的云原生计算资源共池管理解决方案
  • Bugly并非无所不能
  • 2024年信息系统项目管理师1批次上午客观题参考答案及解析(3)
  • YOLOv8改进 | 注意力机制 | 对密集和小目标友好的EVAblock 【原理 + 完整代码】