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.读写分离总结本文导读 淘宝的数据库架构设计采用了分布式数据库技术，通过…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...
苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...
【SpringBoot自动化部署】
SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
密码学基础——SM4算法
博客主页：christine-rr-CSDN博客 专栏主页：密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...
欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱？分层思维来救场！
多连接 BLE 怎么设计服务不会乱？分层思维来救场！ 作者按： 你是不是也遇到过 BLE 多连接时，调试现场像网吧“掉线风暴”？ 温度传感器连上了，心率带丢了；一边 OTA 更新，一边通知卡壳。…...
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
报错 找到package.json文件 找到这个修改成 "lint": "eslint --fix --ext .js,.vue src" 为elsint有配置结尾换行符，最后运行：npm run lint --fix...