vue中websocket的封装
时间: 2023-07-21 20:18:17 浏览: 49
Vue 中使用 WebSocket 的一种常见方式是将其封装成一个 Vue 插件,以便在整个应用程序中方便地使用。以下是一个基本的 WebSocket 插件的示例:
```javascript
// websocket.js
const WebSocketPlugin = {}
WebSocketPlugin.install = function (Vue, options) {
const socket = new WebSocket(options.url)
Vue.prototype.$socket = socket
socket.onopen = function (event) {
console.log('WebSocket connected: ', event)
}
socket.onmessage = function (event) {
console.log('WebSocket message received:', event.data)
}
socket.onclose = function (event) {
console.log('WebSocket disconnected: ', event)
}
}
export default WebSocketPlugin
```
在 main.js 中引入并注册该插件:
```javascript
// main.js
import Vue from 'vue'
import WebSocketPlugin from './websocket'
Vue.use(WebSocketPlugin, { url: 'ws://localhost:8080' })
new Vue({
// ...
})
```
现在,您可以在 Vue 组件中通过`$socket`访问 WebSocket 对象:
```javascript
// MyComponent.vue
export default {
created() {
this.$socket.send('Hello WebSocket')
}
}
```
这样,您就可以在 Vue 应用程序中方便地使用 WebSocket 了。当然,您可以根据自己的需求进行更复杂的封装。