最近有个需求，就是需要前端调取一个封装成exe文件的websoket服务。

很显然，在浏览器的框架下，根本不可能完成这个事情。因为浏览器的沙盒机制和安全策略，是不允许读取本地文件的。

所以，我们需要nodejs的帮助。

那么，既要集成nodejs环境，同时又不偏离前端开发的范畴，我只好决定使用eletron来封装我的浏览器应用。

如果，还不知道如何使用electron封装前端应用的请参考我的其他文章或者百度bing搜索一下：

vuecli4 electron13.3.0 创建客户端应用以及安装、打包时候遇到的问题_win.loadurl('app://./index.html')_屋昂仼的博客-CSDN博客

vue electron node koa 实现桌面应用_electron+vue+node_屋昂仼的博客-CSDN博客

electron内部集成了浏览器和node环境，这使得我们可以在一个框架下同时在开发前端界面交互js）和nodejs（server）服务端功能。

现在读取本地文件的功能难题已经解决了。

我们现在需要一个封装为exe的websocket服务文件来测试一下。

由于对其他语言不熟悉，我采用python来写websocket服务。

开始

注意：你可以使用任意你熟悉的后端语言去写websocket服务。我使用python，基于以下两点：

1. python 我相对熟悉一些，而且使用极其方便；

2.利用python可以直接将服务打包为exe文件，十分便捷！

如果你也想要和我一样使用python，那么请先百度安装配置好python环境。因为这是前置条件。

一、首先安装对应模块。

# python 安装websockets 模块
# 打开cmd

pip install websockets


# 然后确认有没有安装成功 

pip list 

# 可以查看当前安装的模块

二、编写socket服务代码

编写python文件 - websocket.py， 代码如下：

# websocket.py

import asyncio
import websockets


async def echo(websocket, path):
    # fetch msg
    async for message in websocket:
        print("got a message:{}".format(message))
        await websocket.send(message)


async def main():
    # start a websocket server
    # 开启socket服务 地址为 ws://localhost:8765
    async with websockets.serve(echo, "localhost", 8765):
        await asyncio.Future()  # run forever

asyncio.run(main())

三、生成exe文件

因为我们的终极目标是通过node执行一个exe文件，然后连接webocket服务。

使用python打包py文件，首先需要安装三方依赖 pyinstaller。

首先全局安装：

# 打开cmd

pip install pyinstaller

# 查看是否安装成功

pip list 

# 可以看到安装的所有依赖

然后进入py文件所在的文件夹，cmd进入，执行如下命令：

# 进入写有websocket.py的文件夹内 执行一下命令

pyinstaller --onefile websocket.py

执行成功之后，最终会出现 successful 字样。

然后在这个文件夹内会自动生成一个dist文件，dist内会有打包后的exe文件：

 如上所示，我们的exe文件就已经生成好了，python确实很好用，对不对？

四、使用nodejs执行这个exe文件，建立websocket服务

不废话了，新建一个server.js，代码如下：

// server.js

// 注意 一下代码是nodejs代码

// node开启子进程
const cp = require('child_process');

// 然后执行我们刚生成的exe文件 看看能不能起来websocket服务  
// 注意地址要正确

let child = cp.spawn('D://Local_file/py/excersise/dist/websocket.exe')

打开cmd，执行 node server.js 。

五、测试是否可以连接成功

打开websocket测试工具（可网上自行下载，小巧方便），输入连接地址，开始测试；

 

如上，测试连接成功。 

六、如何获取electron客户端的安装地址

在background.js（electron配置js文件）中，可以写下如下代码：

// 以下代码是利用electron获取electron安装的位置

const { app } = electron;
let path = require('path');
let exePath = path.dirname(app.getPath('exe'));\

// exePath 就是 安装地址

 

为什么获取安装地址？

前边提到，我的需求就是需要读取并执行安装目录下的一个名字叫 websocket.exe 的文件。

获取地址了之后，我便可以通过上边的nodejs的方法执行这个exe文件。

总结：前端几乎不接触exe执行。所以刚开始有这个需求的时候，一脸茫然。我这个例子主要是使用了python和nodejs来帮助验证并解决了实际需求问题。

end~