跨标签通信的几种方式

🕗 发布于 2024-11-26 08:42 javascript 前端 html

以前面试被问到过，就了解了一下。还有其他方式，但是实际开发中，使用第一个就可以了

1. 使用BroadcastChannel

2. 使用SharedWorker

3. 使用webSocket

1. 使用BroadcastChannel

它允许同源（协议、域名、端口都相同）的不同浏览器窗口、标签页、frame 或者 iframe 下的不同文档之间相互通信。

新建一个文件夹后，新建下面两个文件

a页面

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<p id="count">0</p>
<button>count++</button>
<script>
// 在所有标签页中创建一个BroadcastChannel实例
const channel = new BroadcastChannel('my-channel')

const count = document.getElementById('count')
const btn = document.querySelector('button')
btn.addEventListener('click', () => {
count.innerHTML = parseInt(count.innerHTML) + 1
// 发送消息
channel.postMessage({ type: 'my-data', payload: parseInt(count.innerHTML) });
})
</script>
</body>

</html>

b页面

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<p></p>
<script>
// 在所有标签页中创建一个BroadcastChannel实例
const channel = new BroadcastChannel('my-channel');

var p = document.querySelector('p');

// 监听消息
channel.addEventListener('message', (event) => {
if (event.data.type === 'my-data') {
p.innerText = event.data.payload;
}
})
</script>
</body>

</html>

每次实例化BroadcastChannel构造函数，都会创建一个链接到命名频道的对象。

而命名频道则是给定源(协议、域名、端口)后产生的一个独有频道。只要源(协议、域名、端口)相同的，通过BroadcastChannel实例化后的对象，都可以进行通信

postMessage方法向所有监听了相同频道的 BroadcastChannel 对象发送一条消息，消息内容可以是任意类型的数据。
message方法当频道收到一条消息时触发。

2. 使用`SharedWorker`

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker

如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）
Worker 则是在后台中创建一个Worker线程，不会影响主线程，Worker线程中的代码执行完成后，会自动塞入到任务队列，等待执行。可以把一些特别耗时，计算量比较大的放到Worker线程中单独执行，依次达到性能优化的作用
SharedWorker 顾名思义，会共享线程中的数据

创建的Vue3项目

在public文件夹下新建shared-worker文件夹，然后新建SharedWorker.js

// 计时器
let counter = 0
// 存储所有连接端口的数组
let ports = []

// 监听连接
self.addEventListener('connect', e => {
  const port = e.ports[0]

  // 把端口对象存起来
  ports.push(port)

  // 监听消息
  port.onmessage = res => {
    // console.log('共享线程接收到信息：', res.data)
    switch (res.data) {
      case 'counter++':
        counter++
        break
    }
    // console.log('counter:', counter)
    // 发送消息
    // port.postMessage(counter)

    // 向所有端口广播，这样就都能接收到发送的消息，才会触发message事件
    ports.forEach(p => {
      p.postMessage(counter)
    })
  }
})

HomeView.vue

<template>
  <div>
    <h3>{{ data }}</h3>
    <button @click="worker.port.postMessage('counter++')">
      点击向共享线程发送消息
    </button>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from 'vue'

const data = ref(0)

// 兼容性判断
if (!window.SharedWorker) {
  throw new Error('当前浏览器不支持SharedWorker')
}

// 创建共享线程
const worker = new SharedWorker('/shared-worker/SharedWorker.js')

// 启动线程端口
worker.port.start()

// 消息处理
const messageHandle = e => {
  console.log('SharedWorker共享线程counter值：', e.data)
  data.value = e.data
}

// 线程监听消息
worker.port.addEventListener('message', messageHandle)

// 记得销毁worker线程
onUnmounted(() => {
  worker.port.removeEventListener('message', messageHandle)
  worker.port.close()
})
</script>

AboutView.vue

<template>
  <div>
    <h3>{{ data }}</h3>
    <button @click="worker.port.postMessage('counter++')">
      点击向共享线程发送消息
    </button>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from 'vue'

const data = ref(0)

// 兼容性判断
if (!window.SharedWorker) {
  throw new Error('当前浏览器不支持SharedWorker')
}

// 创建共享线程
const worker = new SharedWorker('/shared-worker/SharedWorker.js')

// 启动线程端口
worker.port.start()

// 消息处理
const messageHandle = e => {
  console.log('SharedWorker共享线程counter值：', e.data)
  data.value = e.data
}

// 线程监听消息
worker.port.addEventListener('message', messageHandle)

// 记得销毁
onUnmounted(() => {
  worker.port.removeEventListener('message', messageHandle)
  worker.port.close()
})
</script>

3. 使用webSocket

前端：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>WebSocket 测试</h1>
    <p>WebSocket 是一种网络通信协议，提供全双工、双向的通信。</p>
    <input type="text" />
    <button>发送消息</button>

    <script>
      const ws = new WebSocket("ws://127.0.0.1:3001");
      const input = document.querySelector("input");
      const btn = document.querySelector("button");

      ws.onopen = function () {
        console.log("连接成功");
      };

      ws.onmessage = function (e) {
        console.log("收到服务端信息：" + e.data);
        input.value = e.data;
      };

      ws.onclose = function () {
        console.log("连接已关闭");
      };

      ws.onerror = function () {
        console.log("连接出错");
      };

      // 向服务端发送消息
      btn.addEventListener("click", function () {
        console.log("发送消息：" + input.value);
        ws.send(input.value);
      });
    </script>
  </body>
</html>

后端：使用express创建的node项目

安装node后，全局安装express：npm i -g express

然后创建node项目：express 项目名

创建项目完成后，在项目根目录下安装ws包和nodemon：npm i nodemon ws

修改package.json中的scripts节点：把node改为nodemon运行，这样能实现热更新

修改app.js

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

var app = express();

// 实现webSocket start ----
const WebSocket = require("ws");
// 创建WebSocket服务器，监听端口3001，express服务器的端口是3000，端口要不一样
const server = new WebSocket.Server({ port: 3001 });
server.on("connection", (ws) => {
  console.log("New client connected");

  ws.on("message", (message) => {
    console.log(`Received: ${message}`);

    // 广播收到的消息给所有客户端
    server.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});
// 实现webSocket end ----

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

然后运行后端项目即可：npm start

或者使用socket.io插件

客户端：Vue3项目

<template>
  <div>
    <el-input v-model="data" @change="handleInput"></el-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { io } from 'socket.io-client'

const data = ref('')

const socket = io('http://localhost:3001', {
  autoConnect: false, // 自动连接
  // 传递参数
  query: {
    name: localStorage.getItem('user'),
  },
  // 设置请求头
  extraHeaders: {
    token: 'Bearer authorization_token_here',
  },
  reconnection: true, // 自动重连
  reconnectionAttempts: 10, // 重连次数
})

// 监听连接状态
socket.on('connect', function () {
  console.log('客户端链接成功')
})

// 监听断开连接
socket.on('disconnect', function () {
  console.log('客户端断开连接')
})

// 连接
socket.connect()

// 监听输入框
const handleInput = () => {
  socket.emit('chatMessage', data.value)
}
// 实时接收后台返回的数据
socket.on('chat message', function (msg) {
  console.log('接收消息', msg)
  data.value = msg.data
})
</script>

服务端：app.js

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
// const cors = require("cors");

var app = express();
// app.use(cors());

// socket.io 创建web服务，不同端口
const http = require("http");
const server = http.createServer();
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: {
    origin: "*", // 配置客户端可跨域地址
  },
});
io.on("connection", (socket) => {
  let { name } = socket.handshake.query;
  console.log("客户端连接成功，参数：: ", name);
  let { token } = socket.handshake.headers;
  console.log("客户端连接成功，token: ", token);
  // 监听客户端请求
  socket.on("chatMessage", (msg) => {
    // 广播给所有客户端
    io.emit("chat message", {
      status: 200,
      data: msg,
    });
  });

  // 监听断开事件
  socket.on("disconnect", (reason) => {
    console.log("断开链接原因：", reason);
  });
});
server.listen(3001, () => {
  console.log("3001服务启动成功！");
});
// socket.io ------------

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

原文地址：https://blog.csdn.net/qq_52845451/article/details/144019416

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：大语言模型---梯度的简单介绍；梯度的定义；梯度计算的方法
下一篇：wkhtmltopdf的安装与使用

Mybatis-Day3
定义与SQL映射文件同名的Mapper接口，并且将Mapper接口和SQL映射文件放置在同一目录下设置SQL映射我呢见的namespace属性为Mapper接口的全限定名在Mapper接口中定义方法，
阅读更多2024-11-26
TCL大数据面试题及参考答案
HBase 中的 Region 是数据存储和管理的基本单元，Region 切分是指将一个大的 Region 按照一定的规则拆分成多个较小的 Region 的过程。Clickhouse 的物化视图是一种
阅读更多2024-11-26
选择使用whisper.cpp进行语音转文字
当你添加本地文件后，不管文件多大，数量有几个，它会马上启动文件上传，让你误以为它能够无限制的免费帮你进行转换，最差情况，估计也就是让你这种白嫖党多等一会儿。需要将一些wav格式的语音文件转成文字（AS
阅读更多2024-11-26
【MATLAB源码-第224期】基于matlab的快跳频系统仿真采用4FSK，模拟了单音干扰，宽带干扰以及部分频带干扰，输出误码率曲线以及各节点图像。
调制后的信号在特定的时间间隔内会迅速跳变到不同的频率，这些频率在预先确定的跳频表中随机选取。在仿真中，宽带干扰是通过一个覆盖整个频谱范围的噪声信号来实现的，而窄带干扰则是通过若干个覆盖部分频谱的单音信
阅读更多2024-11-26
【cocos creator】下拉框
【代码】【cocos creator】下拉框。
阅读更多2024-11-26
无人机飞行姿态详解！
例如，基于深度学习的姿态估计算法、基于视觉的避障算法等，这些新技术和新算法的应用将进一步推动无人机技术的发展和创新。这些技术和算法的应用可以显著提高无人机的飞行性能和稳定性，使其在各种复杂环境下都能够
阅读更多2024-11-26
commitlint校验git提交信息
commitlint校验git提交信息。
阅读更多2024-11-26
Python+Selenium无头浏览器实现网页截图
Selenium就是个自动化测试框架，底层还可以切换控制Chrome、火狐等等相关浏览器驱动。。可以使用Python+Selenium的方式进行网页截图等等相关工作
阅读更多2024-11-26
11.25 深度学习-pytorch模型组件
sgd=optim.SGD(model1.parameters(),lr=0.01) # model1.parameters()能够返回模型的参数（初始化的W和预测的值）传给optim.SGD
阅读更多2024-11-26
从0开始深度学习（31）——循环神经网络
前面介绍了n元语法模型，里面有一个叫隐状态，也被叫做隐藏变量，循环神经网络（recurrent neural networks，RNNs）是具有的神经网络。
阅读更多2024-11-26

跨标签通信的几种方式

1. 使用BroadcastChannel

2. 使用SharedWorker

3. 使用webSocket

相关文章

2. 使用`SharedWorker`