项目基础依赖
vue: 3.2.25
typescript: 4.5.4
vite: 2.9.7
先安装对应的ws和@types/ws
npm ws
// 安装ws npm install ws @types/ws 复制代码
项目依赖详情
网络异常，图片无法展示
|
1. 在electron的入口函数里，引入对应的master主体函数
const cp = require("../cp/master") cp.onFn() 复制代码
由于当前项目是基于node多进程去实现的，所以会在cp文件夹下，创建一个对应的master主进程去处理任务
2. 在master中，开启多进程，根据不同的进程去处理不同的任务
const cp = require("child_process") const onFn = async () => { cp.fork(path.join(__dirname, './websocket.js')) // 启动websocket子进程 } module.exports = { onFn } 复制代码
3. 进入到websocket子进程中处理服务端的业务需求
/** * websocket消息通信部分 * @author 何小玍。 * @timer 2022/05/30 */ const WebSocket = require("ws") console.log('websocket.js已进来') // 创建websocket服务 const server = new WebSocket.Server({ port: 1122 }, () => { console.log("websocket服务器正在监听1122端口") }) // 连接时 server.on("connection", ws => { ws.on("message", msg => { console.log("客户端传来的消息", msg.toString()) ws.send("客户端传过来的消息，服务端已收到!") }) }) // 错误异常 server.on("error", err => { console.error("服务器错误:", err.message) }) // 服务器关闭事件监听 server.on("close", () => { console.log("服务器关闭!") }) 复制代码
4. 在对应的render层，就可以直接连接websocket使用了。
<template> <div class="index-container"> <el-button type="primary" @click.stop="onSendSocketFn">首页</el-button> </div> </template> <script lang="ts"> import { defineComponent } from "vue" const Websocket = require('ws') export default defineComponent({ name: "index-container", setup() { const client = new Websocket('ws://localhost:1122') // 启动websocket const onFn = () => { // 建立连接 client.on('open', () => { console.log('已连接上服务器!') client.send('客户端时间:' + new Date().getTime()) }) // 断开连接 client.on('close', () => { console.log('连接已断开!') }) // 监听服务器返回消息 client.on('message', e => { console.log('服务端返回的消息:', e.toString()) }) // 异常错误 client.on('error', e => { console.log('客户端错误:', e.message) }) } onFn() const onSendSocketFn = () => { client.send('发送给服务端') } return { onSendSocketFn } } }) </script> <style scoped> </style> 复制代码
结果：
网络异常，图片无法展示
|
