jssip wrapper, use for emicnet callcenter
localstorage & fetch 都是浏览器方法,因此我们没有在 package.json设置 main 字段而是设置 browser 字段。
webpack 和 gulp(4.0) 方式,webpack 通过 npm script 执行;
npm run bundle ; gulp 打包直接在命令行执行 gulp bundle
libraryTarget: 'umd' 确保包可以被别的项目 require/import ; gulp 没有设置umd,只适合导打包UI的代码。
gulp.series & gulp.parallel (vinyl-source-stream 要升级到 2.0),网上很多文章还是用 3.0(看他们定义 task 的依赖关系可判断),所以我们使用 4.0 带有一定学习目的。
.bablerc设置增加了"transform-runtime"插件,它的几个设置含义还没仔细研究,但可以注意到如果 target 不设置 IE,打包出来的代码是一样的。
Default: process.env.BABEL_ENV || process.env.NODE_ENV || "development"
BABEL_ENV 而不是 NODE_ENV 让意图更明确,同时确实不设置 development 减少跨平台的代码
@babel/preset-env webpack打包会出错。
webpack-command
devtool: 'source-map' 造成在 vscode 里断点停不下来。
.bablerc 设置好 target 确保不必要的转码。
let that = this (之前代码有这个问题)
let that = this 并在函数体里用that , 这样代码很难维护。
Phone.init(params,callbackMap)
Uncaught TypeError: self.postMessage is not a function at sendMsg (webpack:///(:9000/webpack)-dev-server/client?:61:10)'
this inside a callback?
localstorage & fetch 都是浏览器方法,所以我们测试代码需要浏览器执行
key 比如 http://127.0.0.1:9999/?grep=web只跑相关用例
script type="module"必须写全路径,借助 webpack 把所有 import 的文件打包成一个文件是最简单的方法,参见
browserify-css 参见
webpack entry css 这三个关键字时候偶然发现答案。其实当时是在调查如何让 HtmlWebPackPlugin 不要对 index.html 加 css,保证 webpack 和 gulp 打包的东西都能正确显示。
entry:{
index: [
'./src/ui/index.js',
'./resources/css/phone.scss'
]
},
output:{
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
`
$3
阿里字体图标库有多种格式下载,因为我们已经限定了浏览器的版本 ,选用 woff 对我们最合适。
TTF, OTF, WOFF, EOT, SVG 字体文件对浏览器的支持
1. EOT 仅支持 IE8-11
2. OTF/TTF 支持 [ IE9-11, Edge12-14, Firefox 40-45, Chrome 43-49, Safari 8-9, Opera 32-35, iOS Sarfari 8.4-9.1, Android 4.4-44, Chrome for Android 46 ]
3. WOFF 支持[ IE9-11, Edge12-14, Firefox 40-45, Chrome 43-49, Safari 8-9, Opera 32-35, iOS Sarfari 8.4-9.1, Android 4.4-44, Chrome for Android 46 ]
4. WOFF2 支持[ Firefox 40-45, Chrome 43-49, Opera 32-35, Chrome for Android 46 ]
5. SVG 支持 [ Safari 8-9, iOS Sarfari 8.4-9.1 ]
关于 font-face 介绍,还可以参考 1,2
$3
格式化工具Beautify 和 Prettier, 经过比较选择 Prettier Prettier 只能格式化 js 文件,其他文件用 vscode 自带 format document
通过 Prettier 统一文件 tab 设置,4 个空格;js 代码都用单引号,利用 Prettier 对 js 的ASI,注意前置括号会因此被加一个分号。
安装 Prettier 的 vscode 插件,设置 vscode format on save true 以及 Ignore Trim Whitespace false
以后合代码再发生此类问题一定查到原因。关于 Prettier 的其他叙述参见 文件格式修改.md
$3
开发人员需要标配以下几个工具:
1. vscode 2018 的版本,并安装vscode-chrome-debug , 建议使用 todo 插件
2. Prettier
3. Katalon 自动化 UI 测试 ,Katalon 有单独文件详细描述。最新版本5.7.1
4. Markdown 编辑器
---
$3
`javascript
//首先创建一个实例
//具体配置信息和字段和 jssip 一样,除了 socekts 不需要配置
var ua = new JsSIPWrap(config)
`
创建完成后,需要登录
#### 登录
ua.login();
登录成功后就可以监听各类事件.目前定义有如下:
`
// 注册登录相关
connecting
connected
disconnected
registered
unregistered
registrationFailed
//会话相关
newRTCSession
// 收到新的消息
newMessage
由于消息都是 xml ,且 PBX 的消息种类比较多,后面需要对每个不同的消息分别定义不同事件,外层使用不用关心 PBX 消息类型
`
#### 拨打电话
`
ua.call(target, type)
// target 的是呼叫号码 ,type 是呼叫的类型 1:外线直接呼叫 2:回拨 3:内线互拨
`
#### 挂断
ua.stop()
#### 发送 xml 消息
`
ua.sendMessage(target, text)
//target 消息接受人,需要加企业和分机号拼接
// 如果发给 PBX 的事件,需要单独函数处理,上层不需要关系各种 PBX 事件
`
#### 注意
- 不管是发出 invite 或者收到 invite 消息,session 相关的事件都通过原生 RTCSession 来监听
#### 后续
- 需要把 ring 相关的封装写进来
- 发出的 PBX 消息事件接口完善
- 收到的 PBX 消息事件接口完善
注,对 jssip 使用参考tryit
#### http 对外接口封装使用说明
可参见单元测试代码
`
- 获取初始化数据接口 getLoginData(un, pwd, switchNumber, callintype)
该接口会获取登录所需的所有参数
- 调用示例
getLoginData('1006','1006','02566699734',2)
- 参数说明
参数名 | 说明 |类型
un | 分机号 | string
pwd | 密码 |string
switchNumber | 总机号 |string
callintype | 呼叫模式 | number
`
`
- web 接口统一调用接口 webApiHandler(functionName, webParam)
- 参数说明
参数名 | 说明 |类型
functionName | 请求方法名 |string
webParam | 请求参数体 | object
`
#### webApiHandler 对外 function 的参数定义
注:目前webApiHandler 封装是对接老架构时候客户端直接调用es-web的接口,eid是必填输入参数,通过上一步 getInfo 获得。
对接新架构客户端不直接调用es-web,而是调用新架构后台对应接口,ccgeid是必填输入参数。对接新架构 webApiHandler实现需要重写,用来封装新架构接口
`
getEpProfile 获取企业属性
- 调用示例
webApiHandler("getEpProfile",{un:'1006','pwd:1006',eid:65656})
* 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
`
`
getMemberInfo 获取用户信息
- 调用示例
webApiHandler("getMemberInfo",{un:'1006','pwd:1006',eid:65656})
- 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
`
`
getGroups 获取所有技能组
- 调用示例
webApiHandler("getGroups",{un:'1006','pwd:1006',eid:65656,needMembers:1})
- 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
needMembers | 不传或传空则不返回属于组的用户信息,传 1 返回 mids| number
`
`
updateInfo 更新用户呼叫模式
- 调用示例
webApiHandler("updateInfo",{un:'1006','pwd:1006',eid:65656,jsonStr:{ "data": { "callintype": 2 } }}})
- 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
jsonStr| 用户新的信息 json 内容[或者 post 一个 json 文件]|object
`
`
searchEpMembers 获取技能组包含坐席
- 调用示例
webApiHandler("searchEpMembers",{un:'1006','pwd:1006',eid:65656,searchGid:'2050',searchServiceControl:1})
- 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
start | 起始记录数 默认 0 |string
length | 获取记录数,默认 10 |number
searchGid | 组 id (筛选未分组时传-1) | string
searchServiceControl |状态筛选 0-离线 1-空闲 2-暂离 3-消息请求 4-呼叫请求 5-通话中 6-话后处理| string
`
`
getMemberCallStates 获取坐席状态
- 调用示例
webApiHandler("getMemberCallStates",{un:'1006','pwd:1006',eid:65656,uid:'234'})
- 参数说明
un | 分机号 | string
pwd | 密码 |string
eid | 企业 id |string
uid | 用户 id |string
``