vue2 websocket
时间: 2023-10-21 20:37:44 浏览: 35
怎么使用?
可以通过引入vue-socket.io插件来使用Vue2和WebSocket进行通信。首先需要安装vue-socket.io插件,然后在Vue组件中引入并使用socket对象来进行WebSocket通信。 下面是一个简单的使用WebSocket在Vue2中实现实时聊天的例子:
1. 安装插件:npm install vue-socket.io
2. 在vue组件中引入插件并创建socket对象
import VueSocketIO from 'vue-socket.io'
import io from 'socket.io-client'
export default {
data () {
return {
messages: [],
message: ''
}
},
mounted () {
const socket = io('http://localhost:3000')
Vue.use(new VueSocketIO({
debug: true,
connection: socket
}))
this.$socket.on('message', (data) => {
this.messages.push(data.message)
})
},
methods: {
send () {
this.$socket.emit('message', { message: this.message })
this.message = ''
}
}
}
3. 在HTML模板中使用socket对象
<template>
<div>
<ul>
<li v-for="msg in messages">{{msg}}</li>
</ul>
<input type="text" v-model="message" @keyup.enter="send">
<button @click="send">Send</button>
</div>
</template>
这里通过socket对象监听message事件来接收来自服务端的数据,并通过$socket.emit方法向服务端发送数据。在HTML模板中可以通过v-for指令来循环渲染接收到的消息,并通过文本框和按钮来发送消息。