/* utils/serve_socket.js */
export default class SocketService {
  /**
   * 單例
   */
  static instance = null
  static get Instance () {
    if (!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }

  ws = null  // 和服務端連線的socket物件
  callBackMapping = {}// 儲存回撥函式
  connected = false        // 標識是否連線成功
  sendRetryCount = 0      // 記錄重試的次數
  connectRetryCount = 0  // 重新連線嘗試的次數
  //  定義連線伺服器的方法
  connect () {
    // 連線伺服器
    if (!window.WebSocket) {
      return console.log('您的瀏覽器不支援WebSocket')
    }
    this.ws = new WebSocket('ws://192.168.0.254:9000')
    // 連線成功的事件
    this.ws.onopen = () => {
      console.log('連線服務端成功了')
      this.connected = true
      // 重置重新連線的次數
      this.connectRetryCount = 0
    }
    // 1.連線服務端失敗
    // 2.當連線成功之後, 伺服器關閉的情況
    this.ws.onclose = () => {
      console.log('連線服務端失敗')
      this.connected = false // 連線表示（失敗）
      this.connectRetryCount++  // 重連次數
      // 如果連線失敗，每個一段事件重連一次
      setTimeout(() => {
        this.connect()
      }, 500 * this.connectRetryCount)
    }
    // 得到服務端傳送過來的資料
    this.ws.onmessage = msg => {
      console.log(msg);
      // 伺服器響應的資料格式 {message: 'ue_get',data: {}, type: 'MME'}
      const recvData = JSON.parse(msg.data)
      const socketType = recvData.message // 訊息型別
      // 判斷回撥函式是否存在
      if (this.callBackMapping[socketType]) {
        const action = recvData.message
        switch (action) {
          case 'ue_get':
            // 呼叫註冊的回撥函式函式
            this.callBackMapping[socketType].call(this, recvData.ue_list)
            break;
          case 'log_get':
            this.callBackMapping[socketType].call(this, recvData.log_get)
            break;
          default:
            this.callBackMapping[socketType].call(this, [])
            break
        }
      }
    }
  }

  // 回撥函式的註冊
  registerCallBack (socketType, callBack) {
    this.callBackMapping[socketType] = callBack
  }

  // 取消某一個回撥函式
  unRegisterCallBack (socketType) {
    this.callBackMapping[socketType] = null
  }

  // 傳送資料的方法
  send (data) {
    // 判斷此時此刻有沒有連線成功
    if (this.connected) {
      this.sendRetryCount = 0
      this.ws.send(JSON.stringify(data))
    } else {
      this.sendRetryCount++
      setTimeout(() => {
        this.send(data)
      }, this.sendRetryCount * 500)
    }
  }
}
 

export default {
	created() {
		this.$socket.registerCallBack('ue_get', this.getdata)
	},
	mounted() {
		this.$socket.send({ message: 'ue_get' })
	},
	destroyed() {
		this.$socket.unRegisterCallBack('ue_get')
	},
	methods: {
		getdata(res) {
			console.log('服務端響應的資料', res)
		}
	}
}