spring boot netty整合websocket 即时通讯系统之用户一对一单聊（十）

loginOne.vue

<template>
  <el-form>
    <el-select v-model="value" multiple placeholder="请选择需要发送的用户">
      <el-option
        v-for="item in others"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-input v-model="sendData" type="textarea"></el-input>
    <el-button @click="send()">发送</el-button>
  </el-form>
</template>

<script>
  import ReconnectingWebSocket from '../js/reconnecting-websocket.min.js'

  export default {
    data() {
      return {
        websocket: null,
        sendData: '',
        receiveData: '',
        others: [{
          value: '1',
          label: '蝙蝠侠'
        }, {
          value: '2',
          label: '闪电侠'
        }, {
          value: '4',
          label: '蜘蛛侠'
        }, {
          value: '3',
          label: '钢铁侠'
        }],
        value: []
      }
    },
    mounted() {
      if ('WebSocket' in window) {
        //使用ReconnectingWebSocket增加断线重连机制
        this.websocket = new ReconnectingWebSocket('ws://localhost:8082/ws')
        this.initWebSocket()
      } else {
        alert('当前浏览器 Not support websocket')
      }
    },
    beforeDestroy() {
      this.onbeforeunload()
    },
    methods: {
      initWebSocket() {
        //连接错误
        this.websocket.onerror = this.setErrorMessage

        // //连接成功
        this.websocket.onopen = this.setOnopenMessage

        //收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage

        //连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage() {
        this.receiveData = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
      },
      setOnopenMessage() {
        let data = {"token": this.$route.params.token, "type": "register"}
        data = JSON.stringify(data);
        this.websocket.send(data)
        const h = this.$createElement
        let $notify = this.$notify;
        //登录成功后向后端发送信息发送数据
        this.axios.get("http://localhost:8081/getUnsentMessage/" + this.$route.params.id)
          .then(async data => {
            let message = data.data;
            if (message.length > 0) {
              for (let i = 0; i < message.length; i++) {
                await $notify({
                  title: '接收的消息',
                  message: h('i', {style: 'color: teal'}, message[i].time + ":" + message[i].msg),
                  duration: 0
                })
                console.log($notify.offset)
              }
            }
          })
        // this.receiveData = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
      },
      //回调消息
      setOnmessageMessage(event) {
        this.notification(event.data)
      },
      setOncloseMessage() {
        this.receiveData = "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState;
      },
      onbeforeunload() {
        this.closeWebSocket();
      },
      //websocket发送消息
      send() {
        let others = [];
        this.value.forEach(function (other) {
          others.push(other)
        })
        let data = {"token": this.$route.params.token, "msg": this.sendData, "others": others}
        data = JSON.stringify(data);
        this.websocket.send(data)
        this.sendData = ''
      },
      closeWebSocket() {
        this.websocket.close()
      },
      notification(data) {
        const h = this.$createElement
        this.$notify({
          title: '接收的消息',
          message: h('i', {style: 'color: teal'}, data)
        })
      }
    }
  }
</script>

<style scoped>

</style>

 

webSocketOne.vue

<template>
  <el-form>
    <el-select v-model="value" multiple placeholder="请选择需要发送的用户">
      <el-option
        v-for="item in others"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-input v-model="sendData" type="textarea"></el-input>
    <el-button @click="send()">发送</el-button>
  </el-form>
</template>

<script>
  import ReconnectingWebSocket from '../js/reconnecting-websocket.min.js'

  export default {
    data() {
      return {
        websocket: null,
        sendData: '',
        receiveData: '',
        others: [{
          value: '1',
          label: '蝙蝠侠'
        }, {
          value: '2',
          label: '闪电侠'
        }, {
          value: '4',
          label: '蜘蛛侠'
        }, {
          value: '3',
          label: '钢铁侠'
        }],
        value: []
      }
    },
    mounted() {
      if ('WebSocket' in window) {
        //使用ReconnectingWebSocket增加断线重连机制
        this.websocket = new ReconnectingWebSocket('ws://localhost:8082/ws')
        this.initWebSocket()
      } else {
        alert('当前浏览器 Not support websocket')
      }
    },
    beforeDestroy() {
      this.onbeforeunload()
    },
    methods: {
      initWebSocket() {
        //连接错误
        this.websocket.onerror = this.setErrorMessage

        // //连接成功
        this.websocket.onopen = this.setOnopenMessage

        //收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage

        //连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage() {
        this.receiveData = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
      },
      setOnopenMessage() {
        let data = {"token": this.$route.params.token, "type": "register"}
        data = JSON.stringify(data);
        this.websocket.send(data)
        const h = this.$createElement
        let $notify = this.$notify;
        //登录成功后向后端发送信息发送数据
        this.axios.get("http://localhost:8081/getUnsentMessage/" + this.$route.params.id)
          .then(async data => {
            let message = data.data;
            if (message.length > 0) {
              for (let i = 0; i < message.length; i++) {
                await $notify({
                  title: '接收的消息',
                  message: h('i', {style: 'color: teal'}, message[i].time + ":" + message[i].msg),
                  duration: 0
                })
                console.log($notify.offset)
              }
            }
          })
        // this.receiveData = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
      },
      //回调消息
      setOnmessageMessage(event) {
        this.notification(event.data)
      },
      setOncloseMessage() {
        this.receiveData = "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState;
      },
      onbeforeunload() {
        this.closeWebSocket();
      },
      //websocket发送消息
      send() {
        let others = [];
        this.value.forEach(function (other) {
          others.push(other)
        })
        let data = {"token": this.$route.params.token, "msg": this.sendData, "others": others}
        data = JSON.stringify(data);
        this.websocket.send(data)
        this.sendData = ''
      },
      closeWebSocket() {
        this.websocket.close()
      },
      notification(data) {
        const h = this.$createElement
        this.$notify({
          title: '接收的消息',
          message: h('i', {style: 'color: teal'}, data)
        })
      }
    }
  }
</script>

<style scoped>

</style>

 

 

 

 

 

最终实现效果:

  进行用户登录

 

代码已上传至github:https://github.com/beibeirenzhe/netty-im/tree/master/fyrtim