可借用代碼,請(qǐng)勿轉(zhuǎn)載,侵權(quán)必究
完全拋棄后端 實(shí)現(xiàn)客戶端通信
新建vue項(xiàng)目,替換helloword.vue里的內(nèi)容,然后清空app.vue文件的案例內(nèi)容即可
<template>
<div class="hello">
<ul>
<li v-for="(value,index) in this.dataList" v-bind:key="index">
<div v-if="value.type">
<div>發(fā)送人地址: <span>{{value.address}}</span></div>
<div>發(fā)送的內(nèi)容:<span>{{value.message}}</span></div>
</div>
<div v-else>
<div>******系統(tǒng)消息*******</div>
<div>{{value.message}}</div>
</div>
</li>
</ul>
<input type="text" :value="inputMsg" @input="inputMessage" placeholder="請(qǐng)輸入消息">
<h2 @click="sendMessage">點(diǎn)我發(fā)送消息</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>
