使用小型vuejs
应用程序入门。如何在根组件中打开websocket连接并在其他组件中重用相同的连接?
我希望组件能够通过同一连接发送和接收。 这些组件将被绑定到路由,以便根组件和为路由呈现的组件之间没有直接的父子关系。
App.vue:
<template>
<div id="app">
<h1>My app</h1>
<router-link to="/">P&L</router-link>
<router-link to="/other-page">other page</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
ws: null
}
},
created () {
this.ws = new WebSocket('ws://localhost:8123/ws')
},
methods: {
}
}
}
</script>
现在我想在ws
重用other-page
,以便每次更改路线时都不重新连接。
答案 0 :(得分:2)
创建新的js文件(假设为“/services/ws.js”)。创建websocket的实例。
const WS = new WebSocket('ws://localhost:8080');
export default WS;
然后在你的Vue组件中导入它。
<script>
import WS from '../services/ws';
export default {
// here WS is your websocket instance
}
</script>
这是在组件之间共享数据的最简单方法(此处您只需共享在另一个模块中创建的WS实例)。您还可以在其上使用MVC样式,将所有逻辑保留在控制器(其他模块)中,而不是Vue方法。
答案 1 :(得分:1)
使用Vue mixin或插件可以更轻松,比如这个:
https://github.com/icebob/vue-websocket
它初始化一个套接字并在所有组件之间共享,也可以轻松地为每个组件添加事件处理程序,从而获得良好的模块化。
如果你不想使用socket.io,那么修改它以使用原生websockets并不困难;或者你可以使用这个,虽然我不喜欢语法:
答案 2 :(得分:-1)
将其传递至router-view
。
<router-view :socket="ws"></router-view>
在每个页面组件中,
{
props:["socket"],
data...
}
或者,使用像Vuex这样的全局商店或您自己创建的商店。