websocket的使用

封装的wsCommonMethods.js

/* ======== websocket 方法 ======== */
/* websocket 五大方法
1.websocket.onopen
2.websocket.onmessage
3.websocket.onclose
4.websocket.onerror
5.websocket.send
*/
let context = null
// websocket 错误处理拦截 暂时不需要暴露到外面
function InterceptorError (err) {
    context.$toast('请重启websocket服务')
    console.log('err',err)
}
// websocket 关闭处理拦截 暂时不需要暴露到外面
function InterceptorClose (e) {
    console.log(e)
}
// websocket 发送数据拦截的函数
function InterceptorSend (websocket, req, status) {
    if (status) {
        websocket.send(req)
    } else {
        console.log('连接失败')
    }
}

const WscommonMethods = {
    websocket: null,
    initwebsocket (url, vue) {
        context = vue
        if ('WebSocket' in window) {
            this.websocket = new WebSocket(url)
            // open
            this.websocket.onopen = e => {
                let str = this.open.toString()
                if (!(str.substring(str.indexOf('{'), str.indexOf('}') + 1) === '{}')) {
                    this.open()
                }           
            }
            // 错误处理函数
            this.websocket.onerror = err => {
                InterceptorError(err)
            }
            // 关闭websocket的 处理
            this.websocket.onclose = e => {
                InterceptorClose(e)
            }
            // 对onmessage 的错误处理
            this.websocket.onmessage = e => {
                let params = e.data.includes('{') ? JSON.parse(e.data) : e.data
                if (Number.parseInt(params.result) === 0) {
                    this.message(params)
                } else {
                    context.$toast(JSON.parse(event.data).result)
                }
            }
        } else {
            context.$toast('当前浏览器 Not support websocket')
            console.log('当前浏览器 Not support websocket')
        }
    },
    // 关闭websocket type=1 调用 断开链接的接口  type==2 调用 websocet.clsoe
    closeWebsocket (type, devID) {
        if (type === 1) {
            this.DisConnect(devID)
        } else if (type === 2) {
            this.websocket.close()
        }
    },
    // websocket.onmessage 拦截处理(以后备用)
    InterceptorMessage () {
        return true
    },
    // 监测websocket是不是已经连接成功
    isConnect () {
        if (!this.websocket || this.websocket.readyState === 3) {
            return false
        }
        return true
    },
    // message 的错误处理
    message (e) {
    },
    // open
    open () {
    },
    // 获取设备列表
    getDevList () {
        this.EnumDev()
    },
    // 请求接口
    request () {
    },
    /* ===========1.设备管理============ */
    // 枚举设备列表
    EnumDev () {
        const req = `{"function":"EnumDev"}`
        this.websocket.send(req)
    },
    // 断开设备连接 需要传一个参数设备id devID
    DisConnect (devID) {
        const req = `{"function":"DisConnect","devID":"${devID}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    /* ===========2.访问控制============ */
    // 验证PIN 需要传两个参数 1.devID 设备id 2.userType 2为管理员 其他为默认用户
    VerifyPIN (devID, userType) {
        // const req = JSON.stringify({"function":"VerifyPIN","devID": devID, "userType": userType})
        const req = `{"function":"VerifyPIN","devID":"${devID}","userType":${userType}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 修改用户PIN扩展 需要传两个参数 1.devID 设备id 2.userType 2为管理员 其他为默认用户
    ChangePINEX (devID, userType) {
        const req = `{"function":"ChangePINEX","devID":"${devID}","userType":${userType}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 密钥导入管理 KEY格式化 需要传两个参数 1.devID 设备id flag:1当应用或容器存在时，先删除再创建；0，当应用或容器存在时，不允许删除。
    KeyFormat (devID, flag) {
        const req = `{"function":"KeyFormat","devID":"${devID}","flag":${flag}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 生成签名密钥对 GenECCKeyPair 需要传1个参数 1.devID
    GenECCKeyPair (devID) {
        const req = `{"function":"GenECCKeyPair","devID":"${devID}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 导入用户加密密钥对 需要传三个参数 1.devID 设备id , 2.encEnvelopedKey base64编码的用户加密密钥对, 3.encEnvelopedKeyLen 可省略
    ImportECCKeyPair (devID, encEnvelopedKey, encEnvelopedKeyLen) {
        const req = `{"function":"ImportECCKeyPair","devID":"${devID}","encEnvelopedKey":"${encEnvelopedKey}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 导入数字证书 需要传入四个参数 1.devID 设备id 2.certType  证书类型，1是签名，2是加密 3. cert //base64编码的用户加密密钥对
    ImportECCCert (devID, certType, cert, certLen) {
        const req = `{"function":"ImportECCCert","devID":"${devID}","certType":${certType},"cert":"${cert}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    /* ===========3.文件管理============ */
    // 枚举文件 需要传入一个参数 1.devID 设备id
    EnumFiles (devID) {
        const req = `{"function":"EnumFiles","devID":"${devID}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 读文件 需要传入两个参数 1.devID 设备id 2. fileName 文件名称
    ReadFile (devID, fileName) {
        const req = `{"function":"ReadFile","devID":"${devID}","fileName":"${fileName}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 写文件 需要传入三个参数 1.devID 设备id 2. fileName 文件名称 3.fileData (文件数据是可见字符或者base64编码数据)
    WriteFile (devID, fileName, fileData) {
        const req = `{"function": "WriteFile","devID":"${devID}","fileName":"${fileName}","fileData":"${fileData}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    /* ===========4.产生随机数============ */
    // 产生随机数 需要传入三个参数 1.devID 设备id 2.randLen 随机数长度，无编码
    GenRandom (devID, randLen) {
        const req = `{"function":"GenRandom","devID":"${devID}","randLen":${randLen}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 数据摘要 需要传入两个参数 1.inData,2.inDataLen 最大长度20480
    SM3Digest (inData, inDataLen) {
        const req = `{"function":"SM3Digest","inData":"${inData}","inDataLen":${inDataLen}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 导出公钥 ExportPubKey 需要传入两个参数 1.devID 设备id 2.pubkeyType /1是签名，2是加密
    ExportPubKey (devID, pubkeyType) {
        const req = `{"function":"ExportPubKey","devID":"${devID}","pubkeyType":${pubkeyType}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 数字签名 需要传入两个参数 1.devID 设备id 2.inData//签名数据，函数内部做SM3摘要
    ECCSign (devID, inData) {
        const req = `{"function":"ECCSign","inData":"${inData}","devID":"${devID}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 验证签名 ECCVerify 需要传4个参数
    // 1.devID 设备id 2."publicKey": base64编码外来公钥 3."inData": 待验证签名数据，函数内部做摘要处理,4.signedData":base64编码的待验证的签名值
    ECCVerify (devID, publicKey, inData, signedData) {
        const req = `{"function":"ECCVerify","devID":"${devID}","publicKey":"${publicKey}","inData":"${inData}","signedData":"${signedData}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 私钥解密扩展 ECCDecryptEX
    // 需要传四个参数 1.devID 设备id ,2.encryptedData base64编码的密文数据, 3.encryptedDataLen,4.flag 111为修改设备认证码为服务器返回的值，其他保持不变
    ECCDecryptEX (devID, encryptedData, encryptedDataLen, flag) {
        const req = `{"function":"ECCDecryptEX"，"devID":"${devID}", "encryptedData":"${encryptedData}", "encryptedDataLen":${encryptedDataLen}, flag:${flag}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    /* ===========5.证书接口============ */
    // 导出数字证书 需要传两个参数  1."devID":设备id，2."certType" 1是签名，2是加密
    ExportCert (devID, certType) {
        const req = `{"function":"ExportCert","certType":${certType},"devID":"${devID}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 取证书公钥  从证书数据中读取 需要传一个参数 1."cert": base64编码的证书
    GetCertPubKey (cert) {
        const req = `{"function":"GetCertPubKey"，"cert":"${cert}"}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 取证书序列号  从KEY中读取 需要传两个参数  1.devID 设备id 2. certType：1是签名，2是加密
    GetCertSNEX (devID, certType) {
        const req = `{"function":"GetCertSNEX","devID":"${devID}","certType":${certType}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    // 取证书主题  从KEY读取 需要传两个参数  1.devID 设备id 2. certType：1是签名，2是加密
    GetCertSubjectEX (devID, certType) {
        const req = `{"function":"GetCertSubjectEX","devID":"${devID}","certType":${certType}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    },
    /* ===========6.其他============ */
    // 重置用户PIN码 需要传 1."devID":设备id,2."resetData" 3."resetDataLen" 4."flag":valueint//111为修改设备认证码为服务器返回的值，985修改为出厂值，其他保持不变
    ECCResetUserPIN (devID, resetData, resetDataLen, flag) {
        const req = `{"function":"ECCResetUserPIN","devID":"${devID}","resetData":"${resetData}","resetDataLen":${resetDataLen},"flag":${flag}}`
        InterceptorSend(this.websocket, req, this.isConnect())
    }
}
export default WscommonMethods

在main.js里引入：

import ws from './wsCommonMethods.js'
Vue.prototype.$ws = ws
let url = window.location.href
if (!Vue.prototype.$ws.isConnect() && url.indexOf('/Login') <= -1) { // 登录页刷新不连接，其他页面刷新需要重新链接
    Vue.prototype.$ws.initwebsocket('ws://127.0.0.1:10522', vue)
}

使用login.vue

 let wsParam = {}
                        this.$ws.initwebsocket('ws://127.0.0.1:10522', this)
                        this.$ws.open = () =>{
                            this.$ws.getDevList()
                        }
                        this.$ws.message = data => {
                            if (data.function === 'EnumDev') {
                                var devList = data.devList
                                if (devList.length <= 0) {
                                    this.isVisible = true
                                    this.message = '请插入USBKey'
                                    return
                                } else if (devList.length > 1) {
                                    this.isVisible = true
                                    this.message = '请插入一个USBKey'
                                    return
                                }
                                wsParam.devID = devList[0].devID
                                sessionStorage.setItem('devID', wsParam.devID)
                                this.$ws.VerifyPIN(wsParam.devID, 2)
                            }
                            if (data.function === 'VerifyPIN') {
                                this.$ws.GetCertSNEX(wsParam.devID, 1)
                            }
                            if (data.function === 'GetCertSNEX') {
                                wsParam.userId = data.certSN // 证书序列号
                                this.$ws.GenRandom(wsParam.devID, 1)
                            }
                            if (data.function === 'GenRandom') {
                                wsParam.rClent = data.randData
                                wsParam.plain =  `${wsParam.rClent}|${wsParam.userId}|${wsParam.devID}|${this.timeStamp}`// 参数排序进行ukey签名
                                // this.$ws.ECCSign(wsParam.devID, wsParam.plain)
                                wsParam.userId = wsParam.plain
                                this.$ws.request(wsParam)
                            }
                            /*if (data.function === 'ECCSign') { // 签名数据
                                wsParam.clientSign = data.signedData
                                this.$ws.request(wsParam)
                            }*/
                        }
                        this.$ws.request = (wsParam) => {
                            _that.http.post(_that.ports.USBKey.query, {
                                rClent: wsParam.rClent,
                                userId: wsParam.userId,
                                deviceID: wsParam.devID,
                                clientSign: wsParam.clientSign,
                            }, res => {
                                if (res.code === '0') {
                                    _that.$router.push({path: '/home'})
                                } else {
                                    this.$toast(res.errorMsg)
                                    // _that.isVisible = true
                                    // _that.message = res.errorMsg
                                }
                            })
                        }

在ie上弹出pin码框有6次限制，chrome上200次左右。
在ie上websocket的close事件会走向error，谷歌和火狐不会