JS的BroadcastChannel与MessageChannel
BroadcastChannel与MessageChannel
BroadcastChannel
BroadcastChannel以广播的形式进行通信
BroadcastChannel用于创建浏览器标签页之间的通信
使用BroadcastChannel的浏览器标签页面必须要遵循同源策略
页面1使用BroadcastChannel创建一个频道，页面2使用BroadcastChannel链接频道，页面1与页面2即可通信。
let m1=new BroadcastChannel("channel");//入参是创建或链接的频道名，没有频道则创建通信频道，有频道则进入频道
m1.postMessage('data数据');//以广播的形式向其他链接频道的标签发送消息
m1.onmessage=(e)=>{console.log(e);//接收频道发送过来的消息
}
实例
//BroadcastChannel1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="http://127.0.0.1:8080/BroadcastChannel2.html" target="_blank">打开新的标签页</a><button onclick="send()">点击</button><script>const m1=new BroadcastChannel('one');function send(){m1.postMessage({data:"123123"})}m1.onmessage=(e)=>{console.log('e=>',e);}</script>
</body>
</html>//BroadcastChannel2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const m1=new BroadcastChannel('one');m1.onmessage=(e)=>{console.log("e=>",e)}m1.postMessage('adad')</script>
</body>
</html>
MessageChannel
MessageChannel以通道的形式进行传值
MessageChannel无法跨越浏览器标签页通信，只能在当前标签页进行通信
MessageChannel的对象只有两个端口：prot1、port2
let m=new MessageChannel();//创建消息通道
//m有两个端口：prot1、prot2
m.port1.postMessage("data数据");//prot1数据肯定是向prot2发送，同理prot2也只能向prot1发送数据
m.prot2.onmessage=(e)=>{console.log(e);//prot2接收prot1发送的数据
}
实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let m=new MessageChannel();m.port1.postMessage("data");m.port2.onmessage=(e)=>{console.log(e);}</script>
</body>
</html>
Tips：使用MessageChannel传递的引用数据类型是深拷贝。也就是改变端口数据的值，发送端的数据不会改变。
相关文章：
JS的BroadcastChannel与MessageChannel
BroadcastChannel与MessageChannel BroadcastChannel BroadcastChannel以广播的形式进行通信 BroadcastChannel用于创建浏览器标签页之间的通信 使用BroadcastChannel的浏览器标签页面必须要遵循同源策略 页面1使用BroadcastChannel创建一个频道，页面2使用Broadc…...
nextjs开发 + vercel 部署 ssr ssg
前言 最近想实践下ssr 就打算用nextjs 做一个人博客 ， vercel 部署 提供免费域名，来学习实践下ssr ssg nextjs 一个轻量级的react服务端渲染框架 vercel 由 Next.js 的创建者制作 支持nextjs 部署 免费静态网站托管 初始化项目 npx create-next-app p…...
Good Idea, 利用MySQL JSON特性优化千万级文库表
👳我亲爱的各位大佬们好😘😘😘 ♨️本篇文章记录的为 利用MySQL JSON特性优化千万级文库表 相关内容，适合在学Java的小白,帮助新手快速上手,也适合复习中，面试中的大佬🙉🙉…...
【python游戏制作】快来跟愤怒的小鸟一起攻击肥猪们的堡垒吧
前言 嗨喽~大家好呀，这里是魔王呐 ❤ ~! 为了防止/报复偷走鸟蛋的肥猪们，鸟儿以自己的身体为武器， 仿佛炮弹一样去攻击肥猪们的堡垒，保卫自己的鸟蛋 这个游戏大家没玩过的想必也听说过~ 今天就给大家分享一下用python写的愤怒的…...
ARM 学习（一）
ARM 处理器的运行模式ARM处理器共有7种运行模式，如下表所示：处理器模式描述用户模式（User）正常程序运行模式中断模式（IRQ）用于通常的中断处理快速中断模式（FIQ）用于高速传输和通道处…...
深入分析Java的序列化与反序列化
序列化是一种对象持久化的手段。普遍应用在网络传输、RMI等场景中。本文通过分析ArrayList的序列化来介绍Java序列化的相关内容。主要涉及到以下几个问题： 怎么实现Java的序列化 为什么实现了java.io.Serializable接口才能被序列化 transient的作用是什么 怎么自…...
、Tomcat源码分析-类加载器
接下来，我们再来看下 tomcat 是如何创建 common 类加载器的。关键代码如下所示，在创建类加载器时，会读取相关的路径配置，并把路径封装成 Repository 对象，然后交给 ClassLoaderFactory 创建类加载器。 Bootstrap.java…...
反转链表相关的练习（下）
目录 一、回文链表 二、 重排链表 三、旋转链表 一、回文链表 给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。 示例 1： 输入：head [1,2,2,1] 输…...
2.进程和线程
1.进程1.1 终止正常退出(自愿)出错退出(自愿)严重错误(非自愿)被其他进程杀死(非自愿)1.2 状态就绪态：可运行，但因为其他进程正在运行而暂时停止阻塞态：除非某种外部事件发生，否则进程不能运行1.3 实现一个进程在执行过程中可能被…...
C++回顾（十四）—— 函数模板
14.1 概述 所谓函数模板(function template)，实际上是建立一个通用函数，其函数类型和形参类型不具体指定，用一个虚拟的类型来代表。这个通用函数就称为函数模板。凡是函数体相同的函数都可以用这个模板来代替，不必定义多个函数&a…...
如何做好项目各干系人的管理及应对？
如何更好地识别、分析和管理项目关系人？主要有以下几个方面： 1、项目干系人的分析 一般对项目干系人的分析有2种方法， 方法一：权利（影响），即对项目可以产生影响的人； 方法二…...
Elasticsearch使用系列-ES增删查改基本操作+ik分词
一、安装可视化工具KibanaES是一个NoSql数据库应用。和其他数据库一样，我们为了方便操作查看它，需要安装一个可视化工具 Kibana。官网：https://www.elastic.co/cn/downloads/kibana和前面安装ES一样，选中对应的环境下载࿰…...
07-PL/SQL基础（if语句，case语句，循环语句）
本章主要内容： 1.PL/SQL的基本构成：declare,begin,exception,end; 2.结构控制语句:IF语句,CASE语句 3.循环结构：loop循环，for loop循环，while loop循环 PL/SQL的基本构成 特点 PL/SQL语言是SQL语言的扩展ÿ…...
信捷 XDH Ethercat A_VELMOVE
本文描述信捷 EthercatA_VELMOVE指令，以设定的速度持续运行 上图中，在M100的上升沿，执行A_VELMOVE指令。A_VELMOVE HD100 D100 M101 K0HD100输入参数起始地址 ，HD118输入参数末尾地址HD100~HD103,双精度浮点数（64位&am…...
【专项训练】分治、回溯
分治、回溯其实就是递归，只是是递归的一个细分，是一种特殊的递归 碰到一个题目，你就找他的重复性 最近重复性：根据重复性怎么构造以及如何分解，包括：分治、回溯 最优重复性：动态规划 本质：找重复性、分解问题、组合子问题的结果 回溯：试错！ 50. Pow(x, n) https:…...
Linux上安装配置ZooKeeper
Linux上安装配置ZooKeeper 下载压缩文件 将压缩文件拷贝到指定目录下 执行命令 tar -zxvf [apache-zookeeper-3.5.7-bin.tar.gz] -C [/opt/module/]注：第一个括号里面是压缩文件名称，第二个括号里面是解压到指定的目录 进入到解压后的文件夹当中&am…...
idea leetcode插件无法登录
em 2022某天 leetcode-cn.com 改为了 leetcode.cn so , 如果是版本比较老idea leetcode插件, 就无法使用了. 因为用的旧域名 先说解决办法: 2.0 先把旧版本卸载了 2.1 ideaplugin官网找到本地idea版本下可安装的最高版本的leetcode.cn 假设是 leetcode-editor-6.9.zip 2.2 下…...
VR会议不断升级，为商务会谈打造云端洽谈服务！
VR会议不断升级，为商务会谈打造云端洽谈服务。在商务合作中，对客户需求的理解以及与客户讲解方案都需要建立在一个有效的沟通上，因此VR会议的用武之地就有了，以VR全景技术为核心，通过同屏互动和全景通信技术࿰…...
Ubuntu系统开机自动挂载NTFS硬盘【超实用】
由于跑深度学习实验(图像分割)f非常消耗内存，系统盘sda1内存小，配置了一个大容量得出NTFS机械盘，网上招了一些资料如何挂在，但是每次开机得手动挂载一遍才能使用硬盘，非常不方便，还容易造成数据丢失。 Step…...
淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。
淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。 文章目录淘宝十年资深架构师吐血总结淘宝的数据库架构设计和采用的技术手段。本文导读1.分库分表2.数据冗余3.异步复制4.读写分离总结本文导读 淘宝的数据库架构设计采用了分布式数据库技术，通过…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
Python Einops库：深度学习中的张量操作革命
Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...