Vuex &网络套接字 [英] Vuex & Websockets
问题描述
所以目前我正在使用 VueJS 2，我对它很陌生.现在我得到了一些其他人的帮助，但我仍然被困住了.
这是我想要实现的目标(示例 - 与我想要的紧密相关):
- 我有一个侦听 WebSockets 的 NodeJS 应用程序.该应用程序通过 WebSocket 侦听连接，并将获取 JSON 数据、一个命令，然后是一个包含该命令所需的任何内容的数据对象.
例如命令可以是登录，数据是用户名和密码.然后 NodeJS 应用程序上的登录函数将获取这些数据，做它需要做的事情，然后通过套接字将其返回，无论它是否成功，并且可能包含一个 ID 和一些用户信息，以便 Vuex 提取并放置在它的状态，供应用前端获取/使用.
目前我正在使用这个样板:https://github.com/SimulatedGREG/electron-vue
这对我来说非常有用，因为我想使用 Vue 和 Vuex 来管理我的应用程序，然后使用 WebSockets 来管理进出数据服务器的数据.
因此，如果您查看我在 app/src/renderer/中发送的链接(这是 vue 和 vuex 的主要代码所在).
我的一个朋友为我添加了以下代码作为示例，我试图将其作为动作和突变放入 vuex.他在一个 vue 组件中完成了这一切，所以我正在努力研究它如何与 vuex 一起工作.因为我希望能够从应用程序的任何地方访问(示例) loginUser 操作(使用多个页面/视图的路由).
所以在MyApp/app/src/renderer/components/LandingPageView.vue
<div><img src="./LandingPageView/assets/logo.png" alt="electron-vue"><h1>欢迎.</h1><当前页面></当前页面><websocket-output></websocket-output><版本></版本><链接></链接><脚本>从 './LandingPageView/CurrentPage' 导入 CurrentPage从./LandingPageView/Links"导入链接从./LandingPageView/Versions"导入版本从 './LandingPageView/WebsocketOutput' 导入 WebsocketOutput导出默认{组件: {当前页面，链接，版本，网络套接字输出},name: '登陆页面'}<样式范围>图片{边距顶部:-25px；宽度:450px；}</风格>
这是更新后的文件，下面是MyApp/app/src/renderer/components/LandingPageView/WebsocketOutput.vue
<div><h2>套接字输出:</h2><p v-text="socket_out"></p><脚本>var ws = require("nodejs-websocket")导出默认{数据 () {返回 {socket_out: "正在连接到 websocket 服务器..."}},挂载(){const 父 = 这个var connection = ws.connect("ws://dannysmc.com:9999", {}, function (conn) {})connection.on(文本"，函数(文本){console.log('收到的文本:' + text)parent.socket_out = 文本})connection.on(连接"，函数(){connection.send('yo')})},创建(){//设置单元测试期间未预设的 $route 值如果(process.env.NODE_ENV === '测试'){this.$route = {name: 'websocket 输出',路径:'/websocket-输出'}}}}<样式范围>代码 {背景颜色:rgba(46, 56, 76, .5);边框半径:3px；颜色:#fff;字体粗细:粗体；填充:3px 6px；边距:0 3px；垂直对齐:底部；}p{行高:24px；红色;}</风格>
其他一切都只是你看到的样板，所以如果有人愿意帮助我并给我一些阅读的提示来解释这个或其他任何东西?因为很遗憾我找不到太多相关信息.
我有一个使用 Vue 和 websocket 获取信息的电子应用程序，这是我的设置方法.
我定义了一个商店，它实际上也创建和设置了 websocket.
Store.js
const socket = require("socket-library")//选择套接字库const mySocket = 新套接字(...)mySocket.on("message", message => store.handleMessage(message))...其他处理程序...常量存储 = {处理消息(消息){//处理消息}}导出默认商店Renderer.js
从./store"导入商店新的 Vue({数据:{店铺}})这在我的 Vue 的根级别公开了我的商店，并允许我将数据传递给组件，或者你有什么.store 管理来自 websocket 的所有传入信息.
如果你想使用 Vuex，你基本上可以做同样的事情，Vuex 是你的存储，当消息通过套接字传入时，你只需将它们传递给 Vuex.
mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))并像往常一样设置您的 Vue 和组件以与 Vuex 一起使用.
So currently I am working with VueJS 2 and I am very new with it. Now I was getting some help with some other people, but I am still stuck.
Here is what I want to achieve (example - closely linked to what I want):
- I have a NodeJS application that listens on WebSockets. The application listens for connections via WebSocket and will take JSON data, with a command and then a data object with any content needed for that command.
The command for example could be login, and the data be username and password. The login function on the NodeJS application will then take this data, do what it needs and then return it back over the socket, whether it was successful or not, and maybe include an ID and some user information for Vuex to pickup and place in it's state, for the front-end of the application to pick up/use.
Currently I am using this boiler plate: https://github.com/SimulatedGREG/electron-vue
Which has served me very well as a learning curve, due to me wanting to use Vue and Vuex to manage my application and then use WebSockets for managing data to and from the data server.
So if you look at the link I sent in app/src/renderer/ (this is where the main code is for vue and vuex).
A friend of mine added the following code for me as an example and I am stuck trying to get it into vuex as actions and mutations. He made it all in one vue component, so I am struggling on how it works with vuex. As I want to be able to access the (example) loginUser action from anywhere in the application (uses routes for multiple pages/views).
So in the MyApp/app/src/renderer/components/LandingPageView.vue
<template>
<div>
<img src="./LandingPageView/assets/logo.png" alt="electron-vue">
<h1>Welcome.</h1>
<current-page></current-page>
<websocket-output></websocket-output>
<versions></versions>
<links></links>
</div>
</template>
<script>
import CurrentPage from './LandingPageView/CurrentPage'
import Links from './LandingPageView/Links'
import Versions from './LandingPageView/Versions'
import WebsocketOutput from './LandingPageView/WebsocketOutput'
export default {
components: {
CurrentPage,
Links,
Versions,
WebsocketOutput
},
name: 'landing-page'
}
</script>
<style scoped>
img {
margin-top: -25px;
width: 450px;
}
</style>
That is the updated file for that, and then below is the code for the MyApp/app/src/renderer/components/LandingPageView/WebsocketOutput.vue
<template>
<div>
<h2>Socket output:</h2>
<p v-text="socket_out"></p>
</div>
</template>
<script>
var ws = require("nodejs-websocket")
export default {
data () {
return {
socket_out: "connecting to the websocket server..."
}
},
mounted () {
const parent = this
var connection = ws.connect("ws://dannysmc.com:9999", {}, function (conn) {})
connection.on("text", function (text) {
console.log('Text received: ' + text)
parent.socket_out = text
})
connection.on("connect", function () {
connection.send('yo')
})
},
created () {
// Set $route values that are not preset during unit testing
if (process.env.NODE_ENV === 'testing') {
this.$route = {
name: 'websocket-output',
path: '/websocket-output'
}
}
}
}
</script>
<style scoped>
code {
background-color: rgba(46, 56, 76, .5);
border-radius: 3px;
color: #fff;
font-weight: bold;
padding: 3px 6px;
margin: 0 3px;
vertical-align: bottom;
}
p {
line-height: 24px;
color: red;
}
</style>
Everything else is just the boiler plate that you see, so if anyone is willing to help me and give me some tips of what to read that explains this or anything else? as I can't find much information on it unfortunately.
I have an electron application that uses Vue and a websocket for information and here is how I set mine up.
I have a store defined that also actually creates and sets up the websocket.
Store.js
const socket = require("socket-library") // Take your pick of socket libs
const mySocket = new socket(...)
mySocket.on("message", message => store.handleMessage(message))
...other handlers...
const store = {
handleMessage(message){
// do things with the message
}
}
export default store
Renderer.js
import store from "./store"
new Vue({
data:{
store
}
})
This exposes my store at the root level of my Vue and allows me to pass data to components, or what have you. The store manages all the incoming information from the websocket.
With you wanting to use Vuex, you could do essentially the same thing, where Vuex would be your store and when messages come in over the socket, you just pass them to Vuex.
mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))
and set up your Vue and components to work with Vuex as you typically would.
这篇关于Vuex &网络套接字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
