Skip to content

Commit

Permalink
pref：menu ipc升级setup语法糖
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinloser
jinloser committed Feb 2, 2024
1 parent a9ce69d commit 0ab664b
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 112 deletions.
2 changes: 0 additions & 2 deletions src/layouts/Menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ const props = defineProps({
const states = reactive({
menu: {} as CommonObjectType,
//selectedKeys: ['menu_100'],
current: 'menu_100',
keys: [],
});
Expand All @@ -58,7 +57,6 @@ watch(
);
const menuHandle = () => {
// 该组件优先被加载了，所以没拿到参数
console.log('params:', route);
console.log('menu ------ id:', props.id);
states.menu = subMenu[props.id];
Expand Down
215 changes: 105 additions & 110 deletions src/views/framework/socket/Ipc.vue
View file
Original file line number Diff line number Diff line change
@@ -1,151 +1,146 @@
<template>
<div id="app-base-socket-ipc">
<div class="one-block-1">
<span>
1. 发送异步消息
</span>
</div>
<span> 1. 发送异步消息 </span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="handleInvoke">发送 - 回调</a-button>
结果：{{ message1 }}
结果：{{ states.message1 }}
</a-space>
<p></p>
<a-space>
<a-button @click="handleInvoke2">发送 - async/await</a-button>
结果：{{ message2 }}
</a-space>
</div>
结果：{{ states.message2 }}
</a-space>
</div>
<div class="one-block-1">
<span>
<!-- 尽量不要使用，任何错误都容易引起卡死 -->
2. 同步消息（不推荐，阻塞执行）
</span>
</div>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="handleSendSync">同步消息</a-button>
结果：{{ message3 }}
</a-space>
</div>
结果：{{ states.message3 }}
</a-space>
</div>
<div class="one-block-1">
<span>
3. 长消息： 服务端持续向前端页面发消息
</span>
</div>
<span> 3. 长消息： 服务端持续向前端页面发消息 </span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="sendMsgStart">开始</a-button>
<a-button @click="sendMsgStop">结束</a-button>
结果：{{ messageString }}
结果：{{ states.messageString }}
</a-space>
</div>
<div class="one-block-1">
<span>
4. 多窗口通信：子窗口与主进程通信，子窗口互相通信
</span>
</div>
<span> 4. 多窗口通信：子窗口与主进程通信，子窗口互相通信 </span>
</div>
<div class="one-block-2">
<a-space>
<a-button @click="createWindow(0)">打开新窗口2</a-button>
<a-button @click="sendTosubWindow()">向新窗口2发消息</a-button>
</a-space>
</div>
</div>
</div>
</template>
<script>
<script lang="ts" setup>
import { ipcApiRoute, specialIpcRoute } from '@/utils/ipcMainApi';
import { ipc,cptext } from '@/utils/ipcRenderer';
import { toRaw } from 'vue';
import { ipc } from '@/utils/ipcRenderer';
import { reactive, toRaw } from 'vue';
import { Message } from '@arco-design/web-vue';
export default {
data() {
return {
messageString: '',
message1: '',
message2: '',
message3: '',
const states = reactive({
messageString: '',
message1: '',
message2: '',
message3: '',
windowName: 'window-ipc',
newWcId: 0,
newsubwinContentsId: 0,
views: [
{
type: 'vue',
content: '#/special/subwindow',
windowName: 'window-ipc',
newWcId: 0,
newsubwinContentsId:0,
views: [
{
type: 'vue',
content: '#/special/subwindow',
windowName: 'window-ipc',
windowTitle: 'ipc window'
},
],
}
},
mounted () {
this.init();
},
methods: {
init () {
// 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
ipc.removeAllListeners(ipcApiRoute.ipcSendMsg);
ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => {
console.log('[ipcRenderer] [socketMsgStart] result:', result);
windowTitle: 'ipc window',
},
],
});
this.messageString = result;
// 调用后端的另一个接口
event.sender.send(ipcApiRoute.hello, 'electron-egg');
})
const init = () => {
// 避免重复监听，或者将 on 功能写到一个统一的地方，只加载一次
ipc.removeAllListeners(ipcApiRoute.ipcSendMsg);
ipc.on(ipcApiRoute.ipcSendMsg, (event, result) => {
console.log('[ipcRenderer] [socketMsgStart] result:', result);
// 监听 窗口2 发来的消息
ipc.removeAllListeners(specialIpcRoute.window2ToWindow1);
ipc.on(specialIpcRoute.window2ToWindow1, (event, arg) => {
this.$message.info(arg);
})
},
sendMsgStart() {
const params = {
type: 'start',
content: '开始'
}
ipc.send(ipcApiRoute.ipcSendMsg, params)
},
sendMsgStop() {
const params = {
type: 'end',
content: ''
}
ipc.send(ipcApiRoute.ipcSendMsg, params)
},
handleInvoke() {
ipc.invoke(ipcApiRoute.ipcInvokeMsg, '异步-回调OK').then(r => {
console.log('r:', r);
this.message1 = r;
});
},
async handleInvoke2() {
const msg = await ipc.invoke(ipcApiRoute.ipcInvokeMsg, '异步');
console.log('msg:', msg);
this.message2 = msg;
},
handleSendSync() {
const msg = ipc.sendSync(ipcApiRoute.ipcSendSyncMsg, '同步');
this.message3 = msg;
},
createWindow(index) {
ipc.invoke(ipcApiRoute.createWindow, toRaw(this.views[index])).then(id => {
this.newsubwinContentsId=id
console.log('[createWindow] id:', id);
})
ipc.send('frommainwin', '主动发送我是渲染进程的test2');
ipc.on('sendtosubwin', (event, value) => {
console.log("接收主程序通讯：",value); // prints "我是主进程的test1"
this.$message.info("接收主程序通讯："+value);
event.sender.send("frommainwin", '收到主程序-回复主程序消息');
})
},
async sendTosubWindow() {
// 新窗口id this.newsubwinContentsId
ipc.sendTo( this.newsubwinContentsId, specialIpcRoute.window1ToWindow2, '窗口1通过 sendTo 给窗口2发送消息');
},
}
}
states.messageString = result;
// 调用后端的另一个接口
event.sender.send(ipcApiRoute.hello, 'electron-egg');
});
// 监听 窗口2 发来的消息
ipc.removeAllListeners(specialIpcRoute.window2ToWindow1);
ipc.on(specialIpcRoute.window2ToWindow1, (_, arg) => {
Message.info(arg);
});
};
init();
const sendMsgStart = () => {
const params = {
type: 'start',
content: '开始',
};
ipc.send(ipcApiRoute.ipcSendMsg, params);
};
const sendMsgStop = () => {
const params = {
type: 'end',
content: '',
};
ipc.send(ipcApiRoute.ipcSendMsg, params);
};
const handleInvoke = () => {
ipc.invoke(ipcApiRoute.ipcInvokeMsg, '异步-回调OK').then((r) => {
console.log('r:', r);
states.message1 = r;
});
};
const handleInvoke2 = async () => {
const msg = await ipc.invoke(ipcApiRoute.ipcInvokeMsg, '异步');
console.log('msg:', msg);
states.message2 = msg;
};
const handleSendSync = () => {
const msg = ipc.sendSync(ipcApiRoute.ipcSendSyncMsg, '同步');
states.message3 = msg;
};
const createWindow = (index) => {
ipc
.invoke(ipcApiRoute.createWindow, toRaw(states.views[index]))
.then((id) => {
states.newsubwinContentsId = id;
console.log('[createWindow] id:', id);
});
ipc.send('frommainwin', '主动发送我是渲染进程的test2');
ipc.on('sendtosubwin', (event, value) => {
console.log('接收主程序通讯：', value); // prints "我是主进程的test1"
Message.info('接收主程序通讯：' + value);
event.sender.send('frommainwin', '收到主程序-回复主程序消息');
});
};
const sendTosubWindow = async () => {
// 新窗口id this.newsubwinContentsId
ipc.sendTo(
states.newsubwinContentsId,
specialIpcRoute.window1ToWindow2,
'窗口1通过 sendTo 给窗口2发送消息'
);
};
</script>
<style lang="less" scoped>
#app-base-socket-ipc {
Expand Down

0 comments on commit 0ab664b

Please sign in to comment.