跨页面通信

2730

同源

BroadcastChannel

在相同的源的浏览器上下文(windows,tabs,frames或者iframes)之间进行简单的通信

API

  • 事件监听:
  1. (on)message: 监听到有数据发送时触发;
  2. (on)onmessageerror: 监听到消息错误是触发;
  • 方法:
  1. postMessage(msg: any): 发送消息;
  2. close(): 关闭channel,不再接收;

发送页:

// pages/dispather.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useState } from 'react';

export default function Dispather() {
  const [message, setMessage] = useState('');

  // 发送消息
  const handleSendMessage = () => {
    // new BroadcastChannel的参数发送方和接收方必须是一样的
    const channel = new BroadcastChannel('this_params_must_be_same');
    channel.postMessage(message);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Dispatcher</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege to be sent:</h4>
        <input
          value={message}
          onChange={e => {
            setMessage(e.target.value);
          }}
        />
        <br />
        <button onClick={handleSendMessage}>click to send</button>
      </main>
    </div>
  );
}

复制代码

接收页

// pages/receiver.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useEffect, useState } from 'react';

export default function Receiver() {
  // --监听消息接收--
  const handleListenMessage = () => {
    // new BroadcastChannel的参数发送方和接收方必须是一样的
    const channel = new BroadcastChannel('this_params_must_be_same');
    console.log('This channel is working:', channel.name, '(channel.name)');
    channel.onmessage = function (event) {
      setMessage(event.data);
    };
  };
  const [message, setMessage] = useState('');

  // handleListenMessage不能直接在组件里执行,因为用的ssr,在server端没有BroadcastChannel这个API
  useEffect(() => {
    handleListenMessage();
  }, []);
  // ReferenceError: BroadcastChannel is not defined
  // handleListenMessage();
  return (
    <div className={styles.container}>
      <Head>
        <title>Receiver</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege received:</h4>
        <h4>{message}</h4>
        <br />
      </main>
    </div>
  );
}

复制代码

Shared Worker

普通的 Worker 之间独立运行、数据互不相通；而多个 Tab 注册的 Shared Worker 则可以实现数据共享。

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useState, useEffect } from 'react';

export default function Dispather() {
  const [message, setMessage] = useState('');
  const [worker, setWorker] = useState('');
  useEffect(() => {
    // new SharedWorker引用同一个脚本,名字必须要一样才能数据共享
    setWorker(new SharedWorker('/worker.js', 'this_name_must_be_same'));
  }, []);

  // 发送消息
  const handleSendMessage = () => {
    worker.port.postMessage(message);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Dispatcher</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege to be sent:</h4>
        <input
          value={message}
          onChange={e => {
            setMessage(e.target.value);
          }}
        />
        <br />
        <button onClick={handleSendMessage}>click to send</button>
      </main>
    </div>
  );
}

复制代码

接收页

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useEffect, useState } from 'react';

export default function Receiver() {
  const [worker, setWorker] = useState('');
  useEffect(() => {
    setWorker(new SharedWorker('/worker.js', 'this_name_must_be_same'));
    handleListenMessage();
  }, []);
  // --监听消息接收--
  const handleListenMessage = () => {
    // new SharedWorker引用同一个worker
    console.log('This worker is working:', worker);
    if (worker.port) {
      worker.port.onmessage = function (event) {
        setMessage(event.data);
      };
    }
  };
  const [message, setMessage] = useState('');

  return (
    <div className={styles.container}>
      <Head>
        <title>Receiver</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege received:</h4>
        <h4>{message}</h4>
        <br />
      </main>
    </div>
  );
}
复制代码

worker

// public/worker.js
// worker.js
const ports = new Set();
// 链接时触发
self.onconnect = event => {
  // 通过 event.ports 拿到 父线程MessageEvent,new SharedWorker时第二个参数想通被认为是同一个port
  const port = event.ports[0];
  console.log(
    '子线程worker的connect事件在父线程port的new SharedWorker时候触发,此时的port是:',
    event.ports[0],
    '一共的父线程port有:',
    ports
  );

  ports.add(port);

  port.onmessage = e => {
    // port.onmessage 监听父线程的消息
    console.log(e.data);
    console.log(
      '父线程port的message事件在postMessage时候触发,此时的port是:',
      port,
      'message是:',
      e.data,
      '一共的父线程port有:',
      ports,
      '排除自己还有',
      Array.from(ports).filter(p => p !== port)
    );
    Array.from(ports)
      .filter(p => p !== port) // 广播消息时把自己除掉
      .forEach(p => p.postMessage(e.data)); // 向链接池里的用户发送消息
  };
};
复制代码

LocalStorage

同源限制

一个源共享同一个 localStorage，a.meituan.com 和 b.meituan.com 是两个域名，不能共享storage;但同源不同tab页可以共享localStorage

大小限制

localStorage的最大限制是5MB,如果存满了，再往里存东西，或者要存的东西超过了剩余容量，会存不进去并报错（QuotaExceededError）

API

  1. 发送window.localStorage.setItem('localStore', JSON.stringify(message));

  2. 接收window.onstorage = function (e) {if (e.key === 'localStore')const data = JSON.parse(e.newValue);};

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useState, useEffect } from 'react';

export default function Dispather() {
  const [message, setMessage] = useState('');

  // 发送消息
  const handleSendMessage = () => {
    window.localStorage.setItem('localStore', JSON.stringify(message));
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Dispatcher</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege to be sent:</h4>
        <input
          value={message}
          onChange={e => {
            setMessage(e.target.value);
          }}
        />
        <br />
        <button onClick={handleSendMessage}>click to send</button>
      </main>
    </div>
  );
}
复制代码
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useEffect, useState } from 'react';

export default function Receiver() {
  useEffect(() => {
    handleListenMessage();
  }, []);
  // --监听消息接收--
  const handleListenMessage = () => {
    window.onstorage = function (e) {
      console.log(e);
      if (e.key === 'localStore') {
        const data = JSON.parse(e.newValue);
        setMessage(data);
      }
    };
  };
  const [message, setMessage] = useState('');

  return (
    <div className={styles.container}>
      <Head>
        <title>Receiver</title>
      </Head>

      <main className={styles.main}>
        <h4>This is messege received:</h4>
        <h4>{message}</h4>
        <br />
      </main>
    </div>
  );
}
复制代码
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4250
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3921
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3850
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3421
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3167
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3167
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3156
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3106
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2850
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2749
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2656
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.8W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云