前端使用webscoket

CongJiYong2023-11-13 22:05

前端

javascript 复制代码

<template>
  <div class="wrap">
    <button @click="socketEmit">连接Socket</button>
    <button @click="socketSendmsg">发送数据</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      randomId:null,
    }
  },
  methods:{
    socketEmit(){
      // 开始连接 socket
      this.$socket.open();
      // 订阅事件，testCall 是与后端约定好的名称
      this.sockets.subscribe('testCall', (res) => {
        if(res.code == 200 && res.randomId === this.randomId){
          console.log('召唤成功')

        }
      })
    },
    // 发送消息
    socketSendmsg(){
      this.randomId = Math.random();
      // testCall 是与后端约定好的名称
      this.$socket.emit('testCall', {
        "randomId": this.randomId,
        "deviceId": "123456"
      });
    },
  },
  sockets: {
    connect: function () {
      console.log('连接成功')
    },
    disconnect: function () {
      console.log('断开连接')
    },
    reconnect: function () {
      console.log('重新连接')
    },
  },
  beforeDestroy(){
    // 关闭 Socket
    this.sockets.unsubscribe('testCall');
    this.$socket.close();
  },
}
</script>

main.js

javascript 复制代码

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  // 生产环境建议关闭，开发环境打开(在控制台看到socket连接和事件监听的信息)
  debug: true,
  connection:'http://metinseylan.com:1992',
  options:{
    // 创建时是否自动连接 我们这里设定为false,在指定页面再开启
    autoConnect: false,
    // 路径(默认值：/socket.io/)
    path: "/my-app/",
    // 目前有两种传输方式：HTTP long-polling（可简称：polling）、WebSocket
    transports: ['polling'],
    // 附加请求头（在服务器端的 socket.handshake.headers 对象中找到）
    extraHeaders:{},
  },
}))