electron中使用ws-阿里云开发者社区

electron中使用ws

2022-06-09 1510

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： electron中使用ws

项目基础依赖

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>
复制代码

结果：

网络异常，图片无法展示

文章标签：

JavaScript