websocket 配置 vue

最新推荐文章于 2025-05-29 09:42:37 发布

(´ꑣ｀)走啊，去学习

最新推荐文章于 2025-05-29 09:42:37 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏：自学前端

本文链接：https://blog.csdn.net/weixin_44180190/article/details/116337856

自学前端专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何在Web应用程序中配置WebSocket服务，并重点讲解了如何将其与Vue.js前端框架进行有效整合，实现实时双向通信。通过实例代码，读者将学会创建WebSocket连接，发送与接收消息，并在Vue组件中展示更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 data(){
	return {
	socket:null
	}
}

 mounted() {
    // 初始化
    this.init()
  },
// 组件被销毁时关闭监听，如不关闭，websocket会一直挂载
  beforeDestroy() {
    this.close()
  },

methods: {
	//   进入聊天室，连接socket
    init: function () {
      let that = this
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(你的socket地址)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
        //关闭 的函数  onclose 并不是关闭函数
        this.socket.close = this.close
      }
    },
    open: function () {},
    error: function () {
      this.init()
    },
      getMessage: function (msg) {
      let that = this
      if (msg.data == 'HeartBeat') {
        return
      }
      以下是对数据进行的处理，注意要将传入的对象进行josn解码操作，不然不是对象形式
      let str = JSON.parse(msg.data)
      if (str.projectId == this.projectId) {
        this.newsArr.push(str)
        // 滚动
        this.$nextTick(() => {
          let msg = document.getElementById('gundong') // 获取对象
          if (msg == null) {
            return
          }
          msg.scrollTop = msg.scrollHeight // 滚动高度
        })
        //播放提示音，提示来消息了——   
        let audio = document.querySelector('#tishi-audio')
        audio.play()
      }
      // 关闭连接
    close: function () {
    //在其内执行函数，相当于onclose 这个websocket的周期
      clearInterval(this.timeoutObj)
    },
    }, 
}