TCP Socket Client with Electron and Vue js

I have used vue-cli-plugin-electron-builder to get started with Vue and Electron, thanks to https://github.com/nklayman. As an Automation Engineer, most of the time, our project needs to communicate with Hardware directly using TCP/IP Socket, Serial interface, etc.

It is easy to implement WebSocket in Vue and other web frameworks, but raw TCP socket communications are not supported since the browser not able to access raw TCP directly. But it is possible with node integration in Electron Vue.

Add the following lines in Vue.config.js

my vue.config.js

In Background.js enable node integration, the true and false states are taken from env variable

my background.js

Create a new js file and name it reader.js and add following codes, change the IP address or changes to localhost for testing with a local server

my reader.js

Add new vue file in your project and name it whatever you want for me I called it client.vue and added the following code, and you can notice that I am importing reader.js in the script.

At this stage, everything ready to receive and send data with the TCP server; we need a test server to test our code.

Here is my server code in js run with node

start the electron serve and TCP server with node, for me like in the following picture

left-hand side electron and the right-hand side is TCP server

Click connect and start sending messages to the TCP server. Happy Coding :)

you can clone the whole project from git repo

durairajasivam/TCP-Raw-Socket-with-Vue-and-Electron

Thanks for reading.