websocket+vue2

WebSocket是一种在单个TCP连接上进行全双工通信的协议。Vue.js是一个流行的JavaScript框架，用于构建用户界面。在Vue.js中使用WebSocket可以实现实时数据更新，下面是一个简单的示例：

1.安装vue-native-websocket插件

npm install vue-native-websocket --save

2.在main.js中引入并使用插件

import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:8080', {
  reconnection: true, // 是否自动重连
  reconnectionAttempts: 5, // 重连次数
  reconnectionDelay: 3000 // 重连间隔时间
})

3.在Vue组件中使用WebSocket

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    this.$options.sockets.onmessage = (event) => {
      this.message = event.data
    }
  }
}

在上面的代码中，我们使用了vue-native-websocket插件来连接WebSocket服务器。在Vue组件中，我们使用了onmessage事件来监听WebSocket服务器发送的消息，并将其存储在组件的data中。