websocket 中间件 API 介绍

从 0.12 版本开始，SDK 集成了新实现的 socket 中间件功能，这个实现几乎可以取代原有项目中老式的 Socket.on(...) 接口，也做了一些微弱的改进。

sdk.socketProxy

method: on()

对于 80% 的场景而言，业务同学都可以使用 sdk.socketProxy.on(event, callback) 来尝试解决问题，值得注意的是，该方法会返回一个 cancelToken，用于在页面移除的取消监听行为。而与原先不同的是，新的 socketProxy 支持以下语法:

sdk.socketProxy.on(':change:(task|event)', callback)
sdk.socketProxy.on(':new:task/(\\w+)', callback)

一个简单的示例:

export class View extends React.PureComponent {

  componentDidMount() {
    this.cancelToken =
      sdk.socketProxy.on(`:change:task/${this.props.taskId}`, this.updateTask)
  }

  componentWillUnmount() {
    if (this.cancelToken) {
      this.cancelToken()
    }
  }

  updateTask = (patch) => {
    const task = this.state.task
    this.setState({ ...task, ...patch })
  }

  render() {
     return <Task { ...this.state.task } />
  }

}

method: publish()

结合 rxjs 强大能力，新的 socketProxy 还能提供流式的接口，并且对于多个一样的 pattern, 我们会提供流的复用。

const task$ = sdk.socketProxy.publish(':change:task')
const subs = task$.subscribe((change) => console.log(change))

method: fromRefresh()

由于业务中时常出现的特殊场景, 我们对于某些有额外需求 refresh 事件给出了单独的封装。

class View extends React.PureComponent {
  componentDidMount() {
    this.subs = sdk.socketProxy.fromRefresh('tasks', 'smartgroup')
      .subscribe(() => /* do side effects */)
  }

  componentWillUnmount() {
    this.subs.unsubscribe()
    // 值得注意的是由于请求缓存的存在，我们可能需要持续监听 `refresh` 消息，
    // 即使视图已然摧毁，但监听流仍然会被切换至后台持续运作。
    // 也因此我们希望此类的响应中只应该放置一些纯粹数据同步的处理，而不要牵涉到视图更新。
  }

  render() {
    return // ...
  }
}

Advanced Function

Interceptors

TBD

Sequence

TBD