在最近的一篇文章中，我逐步完成了创建实时Web应用程序的步骤，以使用Butterfly Server .NET管理待办事项列表。
在另一篇文章中，我逐步介绍了创建Cordova应用的步骤，该应用可用于实时访问我们的待办事项列表。
在本文中，我们将再次使用同一台服务器，但是创建一个Electron应用程序，该应用程序可以实时访问待办事项列表。
是否希望跳过分步说明？
在终端或命令提示符下运行此命令…
git clone https://github.com/firesharkstudios/butterfly-server-dotnetcd butterfly-server-dotnet \ Butterfly.Example.Todo
dotnet运行-vm
在第二个终端或命令提示符中运行此命令…
＃假设您已经安装了Electron cd butterfly-server-dotnet \ Butterfly.Example.Todo \ electron
npm安装
npm run dev
或按照以下说明从头开始构建您的Electron应用程序。
假设您已经安装了Electron。
让我们再次使用npm创建客户端…
npm install -g vue-cli＃只接受默认值...
vue init vuetifyjs / electron我的待办事项电子客户端cd我的待办事项电子客户端
npm安装
npm install butterfly-client reqwest
上面的命令…
- 使用Vuetify电子模板创建初始项目
- 安装Butterfly-Client与我们的Butterfly Server .NET通信
- 安装reqwest库以进行我们的API调用
接下来，让我们编辑src / main / index.js以关闭浏览器中的网络安全性，以允许我们的API请求和WebSocket请求访问我们的本地Butterfly Server .NET…
mainWindow = new BrowserWindow（{
webPreferences：{webSecurity：false}，
高度：563，
useContentSize：true，
宽度：1000
}）
接下来，编辑src / main.js以添加几个导入…
从'butterfly-client'导入{ArrayDataEventHandler，WebSocketChannelClient}从'reqwest'导入reqwest
接下来，编辑src / renderer / main.js以将现有的新Vue（）调用替换为…
新Vue（{
el：“＃app”，
组件：{App}，
路由器，
模板：“ ”，
data（）{
返回{
channelClient：空，
channelClientState：空，
}
}，
方法： {
callApi（url，rawData）{
让fullUrl =`http：// localhost：8000 $ {url}`;
return reqwest（{
网址：fullUrl，
方法：“ POST”，
数据：JSON.stringify（rawData），
}）;
}，
订阅（选项）{
让自我=这个；
self.channelClient.subscribe（{
频道：options.key，
vars：options.vars，
处理程序：new ArrayDataEventHandler（{
arrayMapping：options.arrayMapping，
onInitialEnd：options.onInitialEnd，
onChannelMessage：options.onChannelMessage
}），
}）;
}，
退订（密钥）{
让自我=这个；
self.channelClient.unsubscribe（key）;
}，
}，
beforeMount（）{
让自我=这个； 让url =`ws：// localhost：8000 / ws`;
self.channelClient =新的WebSocketChannelClient（{
网址，
onStateChange（value）{
self.channelClientState =值;
}
}）;
self.channelClient.connect（）;
}，
}）
上面的代码…
- 创建一个WebSocketChannelClient实例，该实例维护与Butterfly Server .NET的WebSocket连接。
- 定义我们的客户端可用来调用API调用的callApi（）方法
- 定义我们的客户端可用来订阅/取消订阅我们的Butterfly Server .NET上特定频道的subscription （）和unsubscribe（）方法。
接下来，编辑src / renderer / App.vue以包含（与上一篇文章中的App.vue相同）…
我的待办事项示例
{{$ root.channelClientState}} ...
上面的模板将使我们页面的主要内容显示一个加载指示器，直到WebSocketChannelClient成功连接到Butterfly Server .NET为止。
接下来，编辑src / renderer / components / WelcomeView.vue （与上一篇文章的HelloWorld.vue相同）以包含…
从'@ / components / Todos'导入Todos导出默认{
组件： {
待办事项
}
}
接下来，创建一个新的src / renderer / components / Todos.vue （与上一篇文章的Todos.vue相同），其中包含……
尚无待办事项
添加待办事项
从'@ / components / Todo'导入Todo导出默认{
组件： {
去做，
}，
数据（）{
返回{
项目：[]，
}
}，
方法： {
add（）{
this。$ root.callApi（'/ api / todo / insert'，{
名称：“一个新的待办事项”，
}）;
}，
remove（id）{
$ root.callApi（'/ api / todo / delete'，id）;
}，
}，
Mounted（）{
让自我=这个；
self。$ root.subscribe（{
arrayMapping：{
待办事项：self.items，
}，
关键：“待办事项”，
}）;
}
}
上面的Todos.vue负责……
- 调用add（）函数以对我们的Butterfly Server .NET进行API调用，从而添加新的待办事项
- 调用remove（）函数以对我们的Butterfly Server .NET进行API调用，从而删除现有的待办事项
- 在Butterfly Server .NET上订阅todos通道，并将todo记录映射到本地项目数组
接下来，创建一个新的src / renderer / components / Todo.vue （与上一篇文章中的Todo.vue相同），其中包含…
{{item.name}}
删除
导出默认值{
道具： {
项目：null
}
}
上面的Todo.vue负责渲染单个todo 。
最后，通过注释掉.electron -vue / webpack.renderer.config.js中的此部分来禁用eslint …
/ *
{
测试：/ \。（js）$ /，
强制执行：“ pre”，
排除：/ node_modules /，
采用： {
loader：“ eslint-loader”，
选项：{
格式化程序：require（'eslint-friendly-formatter'）
}
}
}，
* /
最终结果将如下所示……
首先，在Visual Studio中运行服务器（根据先前的帖子创建服务器，或者从GitHub克隆并运行Butterfly.Example.Todo.Server）
接下来，通过执行（在my-todo-electron-client目录中）运行Electron应用程序…
npm run dev
Butterfly Server .NET支持构建更加复杂的实时Web应用程序（可以订阅具有多个数据集的频道，可以在每个数据集中联接多个表，等等）。 有关更多详细信息，请参见GitHub。
