@mapgis/webclient-es6-mapboxgl/service/socket/SocketService.js

import mapboxgl from 'mapbox-gl'
import '../../core/Base'

import {
  SubscribeEvent,
  BroadcastEvent
} from './SocketEvent'
import { ISocketService } from './ISocketService'

mapboxgl.zondy.SocketService = undefined

/**
 * Socket的代理类，实际上是接受websocket的事件，然后转换成mapbox的事件再进行发送
 * @author 潘卓然ParnDeedlit 基础平台/创新中心
 *
 * @alias SocketService
 * @constructor
 *
 * @param {Object} url Socket流地址的url：
 * @param {Number} options 其他预留参数.
 *
 * @example
 * 固定url  ws://{ip}:{socket}/websocket/{servicename}
 * 服务名 streamdemo
 * 消息接收 ws://192.168.91.121:9382/websocket/streamdemo/subscribe
 * 消息发送 ws://192.168.91.121:9382/websocket/streamdemo/broadcast
 *
 * @exception {DeveloperError} options.styleOption 必须是正确的样式.
 *
 */
export class SocketService extends mapboxgl.Evented {
  constructor(url, options) {
    super()
    
    this.url = url || ''
    this.options = options || {}

    this.socket = new ISocketService(url, options)
  }

  createSubscribe() {
    console.log('在使用流图层的时候容易出现回调堆栈溢出的问题，其核心原因是socket通信是双工通信，因此上下文环境context在不同的场景下是不一样的，以leaflet的on为例，其函数原型off(types, fn, context)第三个参数context的默认会是运行时的this而不是绑定时的this，最好在使用on监听的时候主动传入真正的上下文环境this')
    this.socket.createSubscribe()
    this.socket.evented.on(SubscribeEvent.OPEN, this.mapEvent, this)
    this.socket.evented.on(SubscribeEvent.MESSAGE, this.mapEvent, this)
    this.socket.evented.on(SubscribeEvent.CLOSE, this.mapEvent, this)
    this.socket.evented.on(SubscribeEvent.ERROR, this.mapEvent, this)
  }

  createBroadcast() {
    this.socket.createBroadcast()
    this.socket.evented.on(BroadcastEvent.OPEN, this.mapEvent, this)
    this.socket.evented.on(BroadcastEvent.MESSAGE, this.mapEvent, this)
    this.socket.evented.on(BroadcastEvent.CLOSE, this.mapEvent, this)
    this.socket.evented.on(BroadcastEvent.ERROR, this.mapEvent, this)
  }

  mapEvent(event) {
    this.fire(event.eventType || event.type, event)
  }

  broadcast(data) {
    if (!this.socket) {
      return
    }
    this.socket.broadcast(data)
  }

  closeSubscribe() {
    this.socket.closeSubscribe()
    this.socket.evented.off(SubscribeEvent.OPEN, this.mapEvent, this)
    this.socket.evented.off(SubscribeEvent.MESSAGE, this.mapEvent, this)
    this.socket.evented.off(SubscribeEvent.CLOSE, this.mapEvent, this)
    this.socket.evented.off(SubscribeEvent.ERROR, this.mapEvent, this)
  }

  closeBroadcast() {
    this.socket.closeBroadcast()
    this.socket.evented.off(BroadcastEvent.OPEN, this.mapEvent)
    this.socket.evented.off(BroadcastEvent.MESSAGE, this.mapEvent)
    this.socket.evented.off(BroadcastEvent.CLOSE, this.mapEvent)
    this.socket.evented.off(BroadcastEvent.ERROR, this.mapEvent)
  }
}

export var socketService = function (url, options) {
  return new SocketService(url, options)
}

mapboxgl.zondy.SocketService = socketService