Vue客户端通信(去中心化:无需服务器交互)

可借用代码,请勿转载,侵权必究
完全抛弃后端 实现客户端通信
新建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>