Call-service NPM

call-service

Call-Service 是一个基于 xstate 的通话状态机.

安装

yarn add call-service

状态机

call state flow:https://stately.ai/viz/ef5ef1d2-f8ab-4e94-883f-e1348edf246c

用法

Context

Context 在 xState 中的定位为 extended states, 即和状态相关的拓展字段。在这个状态机中，存在这样几个字段，用于记录通话的信息

interface CallContext {
  chatId: string;
  customerInfo: string;
}

chatId: 当前通话的 id,触发 onCall 必须传入，创建通话 id 建议使用 nanoid
customerInfo：当前通话的客户信息，可以在通话 onCall 来传入，也可以使用 onDataUpdate 来更新，但是 onDataUpdate 只会在状态为 ringing 和 calling 的时候才会生效，在 idle 状态时传入的 onDataUpdate 会被忽略。在 onCall 触发的时候，也会先清空 customerInfo

const first = callService.send({
  type: 'onCall',
  chatId: nanoid(8),
  customerInfo: customerInfo1,
});
const state = callService.send({
  type: 'onDataUpdate',
  customerInfo: customerInfo2,
});

如何获取当前的 state 或 context

import { CallState } from 'call-service/lib/callStateMachine';
// 获取当前的state值
callService.state.value;
// 获取当前context的值
callService.state.context;
// 判断当前的状态是否匹配某个状态
callService.state.matches(CallState.Calling);

发送 call event

import { nanoid } from 'nanoid';
import { CallState, CallTalkBeginMode, defaultCallContext } from 'call-service/lib/callStateMachine';
import createCallService from 'call-service';

const callService = createCallService().onTransition((state, event) => {
  if (state.changed) {
  }
});
callService.start();

const first = callService.send({
  type: 'onCall',
  chatId: nanoid(8),
  customerInfo: customerInfo1,
});

const second = callService.send({
  type: 'onTalkBegin',
});

const third = callService.send({
  type: 'onClosed',
});

callMonitor

callMonitor 用于生成通话记录，每一通电话都会通过 onCallFinished 返回，用法如下

const callService = createCallService();
const handleCallFinished = (callInstance: CallInstance) => {
  console.log({
    startTime: formatTime(callInstance.startTime),
    // 可以通过判断talkBeginTime是否为0，确定通话是否被接通
    talkBeginTime: formatTime(callInstance.talkBeginTime),
    endTime: formatTime(callInstance.endTime),
    chatId: callInstance.chatId,
    customerInfo: callInstance.customerInfo,
  });
  mark();
};
// 注册回调
const callMonitor = createCallMonitor(callService).onCallFinished(handleCallFinished);
callService.start();
const first = callService.send({
  type: 'onCall',
  chatId: nanoid(8),
  customerInfo: customerInfo1,
});

const second = callService.send({
  type: 'onTalkBegin',
});

const third = callService.send({
  type: 'onClosed',
});
// 移除回调
callMonitor.off(handleCallFinished);

回调

onTransition 当事件被 service 接收时触发，同时在 service 初始化的时候，会触发一个 xstate.init 事件，一样会触发 onTransition 回调。即使事件被接收后，状态并未发生改变，也同样会被触发。但可以通过 state.changed 来判断本次 transition，状态有没有被改变，如下例：

const callService = createCallService().onTransition((state, event) => {
  if (state.changed) {
    if (event.type === 'onCall') {
      handleTransition(event.type, event.customerInfo);
    } else {
      handleTransition(event.type);
    }
  }
});