Electron 中使用 TCP 和 WebSocket 通信
在上一篇文章《Electron与工业CCD通过TCP Server协议连接通讯》中，当时为了实现需求，草率的实验成功了，但是发现里面还有很多瑕疵，经过今天一上午的学习研究，我想再优化一下，补充的更加完善一点。在昨天的文章里，我们是在Electron的主进程中实现TCP连接的，这样是很不方便的，这次我们把TCP连接直接放到渲染进程中实现，并对其简单封装一下。
具体 API 参考资料：http://nodejs.cn/api/net.html#net_event_close_1
1、Electron 中使用 TCP 通信
把上篇文章中主进程中关于TCP连接的代码注释掉，或者直接去掉，我们在渲染进程中实现TCP连接。渲染进程是无法直接使用主进程中net模块的，所以第一步我们将net模块引入到渲染进程的页面中。
// 引入 net 模块 const net = window.require("net");
在Home.vue中：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<div>发送的消息：<input type="text" v-model="msg" /></div>
<div>接收的消息：<input type="text" v-model="msg2" /></div>
<div>
<button @click="tcpClick">发送</button>
</div>
<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
</div>
</template>
<script>
// 引入 net 模块
const net = window.require("net");
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
data() {
return {
client: null,
HOST: "127.0.0.1",
PORT: 7899,
msg: "",
msg2: "",
};
},
created() {},
mounted() {
// console.log(net);
this.initTcp();
this.connect(this.PORT, this.HOST);
this.data();
this.close()
// this.tcpClicent(this.PORT,this.HOST,'hellow TCP')
},
destroyed() {},
methods: {
// 初始化TCP连接
initTcp() {
this.client = new net.Socket();
},
// 当一个 socket 连接成功建立的时候触发该事件。
connect(PORT, HOST) {
this.client.connect(PORT, HOST, () => {
console.log("连接成功: " + HOST + ":" + PORT);
// 建立连接后立即向服务器发送数据，服务器将收到这些数据
this.sendMsgToTcp('hellow TCP,Fuck you!')
});
},
// 当接收到数据的时触发该事件。
data() {
this.client.on("data", (data) => {
console.log("DATA: " + data);
this.msg2 = data;
this.destroyTcp();
});
},
// 一旦 socket 完全关闭就发出该事件, 监听连接关闭事件
close() {
this.client.on("close", function () {
console.log("关闭连接");
});
},
// 向服务器发送数据，服务器将收到这些数据
sendMsgToTcp(msg) {
this.client.write(msg);
},
// 手动关闭连接
destroyTcp() {
this.client.destroy();
},
tcpClick() {
console.log(this.msg);
this.sendMsgToTcp(this.msg);
},
},
};
</script>
<style lang="css" scoped>
img {
-webkit-app-region: drag;
}
</style>
页面展示：
使用网络调试助手，开启一个 127.0.0.1:7899 的 TCP Server
启动Electron项目，Home页面一加载，就会向TCP服务器发送一条数据，如下图所示：
测试发送消息，在发送的消息输入框中输入消息，点击发送按钮，结果如下图：
测试接收消息，在网络调试助手中，输入消息后点击发送按钮，结果如下图所示：
接收到消息后，我就手动关闭连接了，所以打印出了关闭连接
// 当接收到数据的时触发该事件。 data() { this.client.on("data", (data) => { console.log("DATA: " + data); this.msg2 = data; this.destroyTcp(); }); }, // 手动关闭连接 destroyTcp() { this.client.destroy(); }, // 一旦 socket 完全关闭就发出该事件, 监听连接关闭事件 close() { this.client.on("close", function () { console.log("关闭连接"); }); },
2、Electron 中使用 WebSocket 通信
Electron 中使用 WebSocket 通信是非常简单的，直接写代码即可：
<template>
<div>
<h1>websocket</h1>
<el-input v-model="sendMessage" placeholder="请输入内容"></el-input>
<el-button size="mini" type="primary" @click="send">发送消息</el-button>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="收到的消息"
v-model="textarea2"
></el-input>
<div>{{testMsg | addZero}}</div>
</div>
</template>
<script>
export default {
data() {
return {
path: "ws://192.168.43.50:8082/websocket1",
socket: "",
sendMessage: "",
textarea2: "",
testMsg: 9,
};
},
mounted() {
// 初始化
this.init();
if (this.socket.readyState != this.socket.OPEN) {
console.log("连接已中断!");
//todo...
this.init();
return false;
}
},
destroyed() {
// 销毁监听
this.socket.onclose = this.close;
},
methods: {
init() {
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
// 实例化socket
this.socket = new WebSocket(this.path);
// 监听socket连接
this.socket.onopen = this.open;
// 监听socket错误信息
this.socket.onerror = this.error;
// 监听socket消息
this.socket.onmessage = this.getMessage;
this.socket.onclose = this.close;
}
},
open() {
console.log("socket连接成功");
},
error() {
console.log("连接错误");
this.init();
},
getMessage(msg) {
// 得到服务器返回的数据
console.log(msg);
this.textarea2 = msg.data;
},
send() {
console.log("发送消息");
this.socket.send(this.sendMessage);
},
close() {
console.log("socket已经关闭");
},
},
};
</script>
<style lang="scss" scoped>
</style>
所有文章都会首发于我的微信公众号：小笑残虹，欢迎大家关注，一起交流进步
