持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
项目基础依赖
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>
结果:
最后
公众号:
小何成长
,佛系更文,都是自己曾经踩过的坑或者是学到的东西有兴趣的小伙伴欢迎关注我哦,我是:
何小玍
。大家一起进步鸭