直播模块重构记录

最近公司APP直播模块上线, 小程序需要与APP同步. 直播的接口、数据格式、UI 都变了, 故而重构.

Socket.IO

Socket.IO 是一个库，可以在浏览器和服务器之间实现实时、双向和基于事件的通信.

看了官方文档 socketio 会尝试建立WebSocket连接，失败回退到 HTTP 长轮询。

相比于 websocket 多了很多新特性:

• 可靠性 （如果无法建立 WebSocket 连接，则回退到 HTTP 长轮询）
• 自动重连
• 数据包缓冲
• 消息的确认(acknowledgement)
• 房间广播
• 多路复用(namespace)

不用过度关注socket的连接. 非常好用..

模块化中的每个模块其实就是单例的. 每个模块的代码只会被加载一遍，第二次或者第三次等等，就会从cache里面去查找，如果已经加载过，就直接使用了。

import WeappSocketIO from 'weapp.socket.io'

class SocketIO {
  url: string = ''
  options: any = null
  socket: any = null

  constructor(url: string, options?: any) {
    this.url = url
    this.options = options
    this.open()
  }

  open() {
    this.socket = WeappSocketIO(this.url, this.options)

    this.socket.on('connect', () => {
      console.log('socket -- 连接成功')
    })

    this.socket.on('connecting', (d: any) => {
      console.log('socket -- 正在连接', d)
    })

    this.socket.on('connect_error', (d: any) => {
      console.log('socket -- 连接失败', d)
    })

    this.socket.on('connect_timeout', (d: any) => {
      console.log('socket -- 连接超时', d)
    })

    this.socket.on('reconnect', (attemptNumber: any) => {
      console.log('socket -- 成功重连', attemptNumber)
    })

    this.socket.on('reconnect_failed', () => {
      console.log('socket -- 重连失败')
    })

    this.socket.on('reconnect_attempt', () => {
      console.log('socket -- 尝试重新重连')
    })

    // this.socket.on('ping', () => {
    //   console.log('socket -- ping')
    // })

    // this.socket.on('pong', (ms: any) => {
    //   console.log('socket -- pong', ms)
    // })

    this.socket.on('disconnect', (reason: any) => {
      console.log('socket -- 断开连接', reason)
    })
  }
  on(...data: any) {
    if (this.socket) {
      this.socket.on(...data)
    }
  }
  emit(...data: any) {
    if (this.socket) {
      this.socket.emit(...data)
    }
  }
  connect() {
    if (this.socket) {
      this.socket.connect()
    }
  }
  disconnect() {
    if (this.socket) {
      this.socket.disconnect()
      this.socket = null
    }
  }
}

export default new SocketIO(apiConfig.newLive.websocket.url, {
  path: '/socket.io',
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  randomizationFactor: 0.5,
  timeout: 20000,
  autoConnect: true,
  query: {}
})

protobuf

protobuf 数据结构之前也介绍过。

因为重构上线时间太急没有像上家公司一样, 维护shell脚本从git仓库同步proto文件并编译js对象使用.

仅模拟最终数据传输.

[
  "live_event_send", 
  "{"local_id":157449898,"type":6,"data":"{\"channel_id\":2003,\"plan_id\":4049}"}"
]

列一个 TODO 事项吧..

直播画面

现在直播推拉流、播放器端的解码和渲染基本都是第三方提供服务，我们只需要看着文档对接搬砖就可以了.

这次也从 RTMP 协议改为 HDL（HTTP-FLv）

RTMP 和 HDL 的相同点

• 两者都是针对 FLV 格式
• 两者延时都很低
• 两者都走的 HTTP 通道

RTMP 和 HDL 的不同点

HTTP-FLv:

• 直接发起长连接，下载对应的 FLV 文件
• 头部信息简单

RTMP:

• 握手协议过于复杂
• 分包，组包过程耗费精力大

直播互动游戏

互动游戏写的时候也没什么特殊的, 当直播间人数暴涨服务器崩溃时就会出现各种奇奇怪怪的bug…

后面加入了消息同步机制, 也算是解决了.

客户端主动请求服务器拉去互动结果, 即使服务器挂了消息未得到确认(acknowledgement) 还是存在于缓存(buffer)中, 隔一段时间就会重试.

直播礼物动画

这次设计师做了 svga 格式的动画文件，类似的库 lottie。

svgaplayer-weapp browserify 打包后再经过 Taro2 的编译后不能使用

试过Taro3 、原生微信都可以. 临时处理将 svga 转 svg 使用..