Vue+WebSocket实现在线聊天

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue+WebSocket实现在线聊天，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1421字，纯文字阅读大概需要3分钟。

内容图文

好了，话不多说，直接上代码！

<template>
  <div class="hobnob-box">
    <div class="txt-box">
      <input ref="sendMssage" v-model="valueTxt" type="text" @keyup.enter="handleSend()" />
      <button @click="handleSend()">发送消息</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      socket: null,
      valueTxt: ''
    }
  },
  mounted () {
    // 初始化
    this.initWebSocket()
  },
  destroyed () {
    // 离开页面时关闭websocket连接
    this.socket.onclose(undefined)
  },
  methods: {
    /**
     * 初始化进入页面创建websocket连接
     */
    initWebSocket () {
      let _this = this
      // 判断页面是否已存在websocket连接
      if (window.WebSocket) {
        // 设置连接地址
        var url = `http://192.168.0.132:40111/chart?userid=${this.userId}`
        // 实例化WebSocket
        let socket = new WebSocket(url)
        _this.socket = socket
        // 监听WebSocket连接
        socket.onopen = (e) => {
          this.$message.success('服务器连接成功')
        }
        // 监听WebSocket关闭消息
        socket.onclose = (e) => {
          this.$message.success('服务器连接关闭')
        }
        // 监听WebSocket错误消息
        socket.onerror = () => {
          this.$message.error('服务器连接出错l')
        }
        // 监听WebSocket返回消息
        socket.onmessage = (e) => {
          let resData = JSON.parse(e.data)
          console.log(resData)
        }
      }
    },
    /**
      * 发送聊天消息
      */
    handleSend () {
      let _this = this
      // 输入框聚焦
      _this.$refs['sendMssage'].focus()
      if (!_this.valueTxt) {
        return
      }
      // 调用WebSocket.send()发送消息的方法
      _this.socket.send(_this.valueTxt)
      _this.valueTxt = ''
      // 设置消息滚动位置
      setTimeout(() => {
        let el = this.$refs['hobnob-box']
        el.scrollTop = el.scrollHeight
      }, 500)
    }
  }
}
</script>

内容总结

以上是互联网集市为您收集整理的Vue+WebSocket实现在线聊天全部内容，希望文章能够帮你解决Vue+WebSocket实现在线聊天所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---