渡一学习

const channel = new BroadcastChannel("music")
channel.postMessage({
    musicName:'只因你太美'
})


另一个页面  频道名要一样music
const channel = new BroadcastChannel("music")

channel.addEventListener('message',(e)=>{
    console.log(e.data.musicName)
})

封装
function createChannel(name){
    const channel = new BroadcastChannel(name)
    channel.id = createId(name);
    channel.listeners = new Set();
    channel.addEventListener('message',(e)=>{
       if(e.data.msg === 'coming'){
           channel.listeners.add(e.data.id)
       }
       if(e.data.msg === 'leave'){
           channel.listeners.remove(e.data.id)
       }
    });
    window.addEventListener("upload",function(){
         sendMag('leave',channel);
    })
    sendMag('coming',channel);
    return channel;
}
function createId(name){
    const key = "channel-name";
    let id = +localStorage.getItem(key);
    if(!id){ id = 0 }
    id++
    localStorage.setItem(key,id.toSting())
    return id
}
function sendMsg(msg,channel){
    channel.postMessage({ msg ,id:channel.id})
}

// 使用
const channel=createChannel('music')
if(channel.listeners.size ===0){
    window.open()
}else{
    channel.postMessage({
        msg:''
    })
}

function useWidth(imgRef){
    const width = ref(0);
    const observer = new ResizeObserver(()=>{
        width.value = imgRef.value.width
    })
    let img = null;
    watchEffect(()=>{
        const _img = imgRef.value
        if(_img){
           img = _img 
           observer.oberve(img)
         }else if(img){
           observer.unoberve(img)
        }
    })
    return {width}
}

function useDpr(){
    const dpr = ref(window.decivePixelRatio);
    const observer = new ResizeObserver(()=>{
        dpr.value = window.decivePixelRatio
    })
      observer.oberve(document.documentElement)
    onUnmounted(()=>{
      observer.unoberve(document.documentElement) 
    })
    return {dpr}
}

async function run() {
        const resp = await fetch("http://localhost:8080/xiaoshuo.txt");
        // const text = await resp.text();
        // console.log("text: ", text);

        const reader = resp.body.getReader();
        const contentLength = resp.headers.get("content-length");
        console.log("contentLength: ", contentLength);
        for (;;) {
          const { value, done } = await reader.read();
          if (done) {
            break;
          }
          const decoder = new TextDecoder();
          const text = decoder.decode(value);
          // console.log("文本", text);
          console.log("进度", value.length, contentLength);
        }
      }
run();