electron中使用ws

1,816 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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>

结果:

最后

公众号:小何成长,佛系更文,都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦,我是:何小玍。大家一起进步鸭