可借用代码,请勿转载,侵权必究
完全抛弃后端 实现客户端通信
新建vue项目,替换helloword.vue里的内容,然后清空app.vue文件的案例内容即可
<template>
<div class="hello">
<ul>
<li v-for="(value,index) in this.dataList" v-bind:key="index">
<div v-if="value.type">
<div>发送人地址: <span>{{value.address}}</span></div>
<div>发送的内容:<span>{{value.message}}</span></div>
</div>
<div v-else>
<div>******系统消息*******</div>
<div>{{value.message}}</div>
</div>
</li>
</ul>
<input type="text" :value="inputMsg" @input="inputMessage" placeholder="请输入消息">
<h2 @click="sendMessage">点我发送消息</h2>
</div>
</template>
<script>
var Bugout = require('bugout')
export default {
name: 'HelloWorld',
data () {
return {
inputMsg: '',
bugout: null,
onSeen: null,
onMessage: null,
dataList: []
}
},
created () {
let _this = this
this.bugout = new Bugout('bugout-chat-tutorial')
this.onSeen = this.bugout.on('seen', function (address) {
_this.dataList.push(
{
type: false,
message: address + '上线了'
}
)
})
this.onMessage = this.bugout.on('message', function (address, message) {
_this.dataList.push(
{
type: true,
address: address,
message: message
}
)
console.log(_this.dataList)
})
},
methods: {
inputMessage (event) {
this.inputMsg = event.target.value
},
sendMessage () {
this.bugout.send(this.inputMsg)
this.inputMsg = ''
}
}
}
</script>
<style scoped>
</style>
