消桥

非项目组人员请勿直接应用，如有问题请与我获得联系先。

使用说明

双方都既可以作为服务方又可以作为客户端发起请求和提供服务 数据交换方式如同没有请求方式的http请求一般，url为请求命名空间地址 data数据对象为参数。 传递的是 结构化克隆的副本，而不是原始对象的引用 ,双方之间的数据是隔离的。 send方法既可以支持同步调用也可以支持异步调用，异步调用支持promise方式返回回复信息（支持msBridge.send().then().catche() 支持async/await msBridge.send() ,支持msBridge.send(url,data,callback)）

不能传递以下类型的值：

1. 函数（不会被克隆）
2. DOM 节点、Window 等宿主对象
3. 含循环引用的对象（现代浏览器支持了结构化克隆循环引用）
4. 含 undefined 的对象属性会被忽略
5. 传输代理数据会报错

Author Mumu [email protected]

Date 2025/4/15

服务端示例代码

<script setup>
let msBridge = null
onMounted(() => {
//   window.addEventListener('message', handleMessage);
	msBridge = new MsBridge({
		// origin:'http://localhost:5173',
		iframeEl:iframeRef.value,
	})
	msBridge.listen('/getToken',res=>{
		console.log('/getToken收到来自子页面的请求',res)
		res.send(JSON.parse(JSON.stringify(store.state.user.auth)))
	})
	msBridge.listen('/getRoute',res=>{
		console.log('/getRoute收到来自子页面的请求',res)
		res.send(JSON.parse(JSON.stringify(route)))
	})
	msBridge.listen('/getRole',res=>{
		console.log('/getRole收到来自子页面的请求',res)
		const role = {
			btns:store.state.user.btns,
			roles:store.state.user.roles,
			menus:store.state.user.menus
		}
		res.send(JSON.parse(JSON.stringify(role)))
	})
	msBridge.listen('/getUserInfo',res=>{
		console.log('/getUserInfo收到来自子页面的请求',res)
		res.send(JSON.parse(JSON.stringify(store.state.user.userDetail)))
	})
	msBridge.listen('/getLoginInfo',res=>{
		console.log('/getLoginInfo收到来自子页面的请求',res)
		res.send(JSON.parse(JSON.stringify(store.state.user)))
	})
	msBridge.listen('/routeControl',res=>{
		console.log('/routeControl收到来自子页面的请求',res)
		router[res.data.action](res.data.routeInfo)
		res.send('ok')
	})
	msBridge.listen('/storeControl',res=>{
		console.log('/storeControl收到来自子页面的请求',res)
		if(res.data.action=='getData'){
			console.log(res.data.field, store.state[res.data.field])
			res.send(JSON.parse(JSON.stringify(store.state[res.data.field])))
		}else{
			store.dispatch(res.data.action,res.data.params)
			res.send('ok')
		}
	})
	msBridge.listen('/winControl',res=>{
		console.log('/winControl收到来自子页面的请求',res)
		res.send('ok')
		store.dispatch('aiManager/saveData',res.data)
	})
	msBridge.listen('/muajaxSend',async res=>{
		console.log('/muajaxSend收到来自子页面的请求',res)
		let rs = await muajax(res.data.url,res.data.config)
		res.send(rs)
	})
});
onUnmounted(() => {
	msBridge.destroy()
//   window.removeEventListener('message', handleMessage);
});
</script>

客户端示例代码 VUE

<script setup>
import {ref,onUnmounted} from 'vue'
import MsBridge from 'msbridge'
const msBridge = new MsBridge({target:'child'})
onUnmounted(()=>{
	msBridge.destroy()
})
function openTargetDebug(bool){
	msBridge.setTargetDebug(bool)
}
async function getToken(){
	let res = await msBridge.send('/getToken')
	console.log('token获取结果：',res)
}
async function getRoute(){
	let res = await msBridge.send('/getRoute')
	console.log('路由信息获取结果：',res)
}
async function getRole(){
	let res = await msBridge.send('/getRole')
	console.log('权限信息获取结果：',res)
}
async function getUserInfo(){
	let res = await msBridge.send('/getUserInfo')
	console.log('权限信息获取结果：',res)
}
async function getLoginInfo(){
	let res = await msBridge.send('/getLoginInfo')
	console.log('权限信息获取结果：',res)
}
async function routeControl(action,routeInfo){
	let res = await msBridge.send('/routeControl',{action,routeInfo})
	console.log('路由操作结果：',res)
}
const storeCount = ref('')
async function storeControlSet(action,params){
	let res = await msBridge.send('/storeControl',{action,params})
	console.log('store操作结果：',res)
	storeCount.value=''
}
async function storeControlGet(action,field){
	let res = await msBridge.send('/storeControl',{action,field})
	console.log('store操作结果：',res)
	alert(res.data)
}
async function winControl(params){
	let res = await msBridge.send('/winControl',params)
	console.log('store操作结果：',res)
}
async function muajaxSend(){
	let res = await msBridge.send('/muajaxSend',{
		url:'zero-admin/open/flow/countFlowToDo',
		config:{
		    method:'post',
			data:{
				"userId": "1597761606179323906",
				"processKeys": [
					"customerComplaint",
				]
			}
		},//axios配置以及lisa2系统扩展配置
	})
	console.log('store操作结果：',res)
}

function listenFun(res){
	console.log('/test收到来自父页面的消息',res)
	res.send('hellow word')
}
function addListen(){
	msBridge.listen('/test',listenFun)
	console.log('/test已启动')
}
function removeListen(){
	msBridge.removeListen('/test',listenFun)
	console.log('/test已注销')
}
</script>

<template>
	<main>
		<h3>调试支持</h3>
		<button class="mr-10" @click="openTargetDebug(true)">打开通信目标调试输出</button>
		<button class="mr-10" @click="openTargetDebug(false)">关闭通信目标调试输出</button>
		<h3>主系统信息api</h3>
		<button class="mr-10" @click="getToken">获取主系统token</button>
		<button class="mr-10" @click="getRoute">获取主系统路由信息</button>
		<button class="mr-10" @click="getRole">获取主系统权限配置</button>
		<button class="mr-10" @click="getUserInfo">获取当前登陆用户信息</button>
		<button class="mr-10" @click="getLoginInfo">获取完整登陆信息</button>
		<h3>主系统功能api</h3>
		<h4 style="text-indent: 20px;">1、操作父窗口路由：已暴露完整的父级路由Router操作</h4>
		<button class="mr-10" @click="routeControl('push',{path:'/aihome',query:{a:1}})">执行父框架路由跳转-内部</button>
		<button class="mr-10" @click="routeControl('winOpen',{path:'/aihome',query:{a:1}})">执行父框架路由跳转-新页签</button>
		<h4 style="text-indent: 20px;">2、操作父窗口状态管理：已暴露完整的父级Store功能</h4>
		<button class="mr-10" @click="storeControlSet('saveData',{field:'count',value:storeCount})">设置store测试字段count为：<input type="text" style="width: 100px;" placeholder="输入数值" v-model="storeCount" @click.stop /></button>
		<button class="mr-10" @click="storeControlGet('getData','count')">获取store测试字段count</button>
		<button class="mr-10" @click="storeControlSet('saveUser',null)">退出登录</button>
		<h4 style="text-indent: 20px;">3、窗口结构控制</h4>
		<button class="mr-10" @click="winControl({field:'menuOpened',value:false})">收起父窗口菜单</button>
		<button class="mr-10" @click="winControl({field:'menuOpened',value:true})">显示父窗口菜单</button>
		<button class="mr-10" @click="winControl({field:'childFullScreen',value:true})">伪装独立项目</button>
		<button class="mr-10" @click="winControl({field:'childFullScreen',value:false})">显示主框架</button>
		<h4 style="text-indent: 20px;">4、Api请求支持</h4>
		<button class="mr-10" @click="muajaxSend">从父窗口发出请求</button>
	
		<h3>作为服务提供api支持</h3>
		<button class="mr-10" @click="addListen">动态注册服务支持</button>
		<button class="mr-10" @click="removeListen">注销服务</button>
	</main>
</template>

<style scoped>
.mr-10{
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px 10px;
}
</style>

客户端完整demo可以以查看https://gitee.com/hexinglin/embed-tolisa2-demo