VUE2怎么引入websocket
时间: 2023-10-17 12:04:40 浏览: 156
1. 安装websocket库
使用npm或者yarn安装websocket库,命令如下:
```
npm install --save socket.io-client
```
或者
```
yarn add socket.io-client
```
2. 在vue组件中引入websocket
在vue组件中引入websocket库,代码如下:
```javascript
import Vue from 'vue'
import io from 'socket.io-client'
// 创建socket连接
const socket = io.connect('http://localhost:3000')
Vue.prototype.$socket = socket
```
在上述代码中,我们引入了socket.io-client库,并且创建一个socket连接,然后将其挂载到vue的原型对象上,以便在组件中可以直接通过`this.$socket`来访问socket对象。
3. 在vue组件中使用websocket
在vue组件中可以通过`this.$socket`来访问socket对象,具体使用方法如下:
```javascript
export default {
data() {
return {
message: ''
}
},
mounted() {
// 监听服务器发送的消息
this.$socket.on('message', data => {
this.message = data.message
})
},
methods: {
sendMessage() {
// 发送消息到服务器
this.$socket.emit('message', { message: 'Hello, World!' })
}
}
}
```
在上述代码中,我们通过`this.$socket.on`方法来监听服务器发送的消息,并将其赋值给组件的data属性`message`,然后在组件的`sendMessage`方法中,通过`this.$socket.emit`方法来向服务器发送消息。
注意:在vue组件中使用websocket时,最好在`mounted`或者`created`生命周期函数中进行初始化,以免在组件销毁时造成资源浪费。
阅读全文