gin使用websocket连接vue

可以使用Vue.js的WebSocket插件来连接gin的WebSocket服务。

首先安装Vue.js的WebSocket插件：

npm install vue-native-websocket --save

然后在Vue.js的main.js文件中添加以下代码：

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:8080/websocket', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
})

这里的ws://localhost:8080/websocket是gin的WebSocket服务地址。

在Vue组件中使用WebSocket连接：

<script>
export default {
  name: 'WebSocketDemo',
  mounted() {
    this.$socket.onmessage = (event) => {
      console.log(event.data)
    }
  },
  methods: {
    sendMessage() {
      this.$socket.send(JSON.stringify({ message: 'Hello world' }))
    }
  }
}
</script>

这里的onmessage方法是WebSocket连接接收到消息时的回调函数，sendMessage方法是发送消息的方法。在mounted生命周期中，绑定onmessage方法。在sendMessage方法中，使用WebSocket的send方法发送消息。