node.js - nodejs - websocket javascript

Vuex y Websockets

Question

Actualmente estoy trabajando con VueJS 2 y soy muy nuevo con esto. Ahora estaba recibiendo ayuda con otras personas, pero todavía estoy atascado.

Esto es lo que quiero lograr (por ejemplo, muy relacionado con lo que quiero):

1. Tengo una aplicación NodeJS que escucha en WebSockets. La aplicación escucha las conexiones a través de WebSocket y tomará datos JSON, con un comando y luego un objeto de datos con cualquier contenido necesario para ese comando.

El comando, por ejemplo, podría ser inicio de sesión y los datos serían nombre de usuario y contraseña. La función de inicio de sesión en la aplicación NodeJS tomará esta información, hará lo que necesita y luego la devolverá a través del socket, si fue exitosa o no, y tal vez incluya una identificación y cierta información del usuario para que Vuex la recoja y la coloque en su estado, para el front-end de la aplicación para recoger / usar.

Actualmente estoy usando esta placa de caldera: https://github.com/SimulatedGREG/electron-vue

Lo que me ha servido muy bien como curva de aprendizaje, debido a que quiero usar Vue y Vuex para administrar mi aplicación y luego usar WebSockets para administrar datos hacia y desde el servidor de datos.

Entonces, si miran el enlace que envié en la aplicación / src / renderer / (aquí es donde el código principal es para vue y vuex).

Un amigo mío agregó el siguiente código para mí como ejemplo y estoy atrapado tratando de ponerlo en vuex como acciones y mutaciones. Lo hizo todo en un componente vue, así que estoy luchando sobre cómo funciona con vuex. Como deseo poder acceder a la acción (de ejemplo) loginUser desde cualquier lugar de la aplicación (usa rutas para varias páginas / vistas).

Entonces en 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>

Ese es el archivo actualizado para eso, y luego debajo está el código para 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>

Todo lo demás es solo la placa de la caldera que ves, así que si alguien está dispuesto a ayudarme y darme algunos consejos sobre qué leer, ¿eso explica esto o algo más? ya que no puedo encontrar mucha información desafortunadamente.

Answer 1

Tengo una aplicación de electrones que usa Vue y un websocket para obtener información y así es cómo configuro el mío.

Tengo una tienda definida que también realmente crea y configura el 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
}
})

Esto expone mi tienda en el nivel raíz de mi Vue y me permite pasar datos a los componentes, o lo que sea. La tienda administra toda la información entrante del websocket.

Si quiere usar Vuex, podría hacer prácticamente lo mismo, donde Vuex sería su tienda y cuando los mensajes lleguen a través del zócalo, simplemente se los pasará a Vuex.

mySocket.on("message", msg => vuexStore.dispatch("onSocketMessage", msg))

y configure su Vue y sus componentes para que trabajen con Vuex como lo haría normalmente.