在前后端分離的項目中，使用websocket，為了區(qū)分調(diào)用后臺的那個窗口，需要前后臺協(xié)定傳參約定，用一個參數(shù)來識別端口名稱。在本次的項目中，使用interface作為接口的識別參數(shù)。在websocket接收數(shù)據(jù)時，根據(jù)協(xié)商的接口識別名稱進行判斷，保存請求回傳的數(shù)據(jù)。

1. websocket服務(wù)端地址配置

websocket服務(wù)端配置地址寫在index.html入口文件中。

<script>
    window.config = {
        Host: {
            production: 'http://10.20.5.200:8088',
            development: 'http://192.168.1.105:8088',
            // websocket 配置地址
            websocket: 'ws://192.168.1.105:8088/websocket',
            test: 'http://10.20.5.20:8085'
        }
    }
</script>

2. Socket類的定義

class Socket {
    constructor() {
        this.initWebSocket()
    }
    // 初始化weosocket
    initWebSocket() {
        // ws地址
        const wsuri = window.config.Host.websocket
        if ('WebSocket' in window) {
            this.websock = new WebSocket(wsuri)
            console.log(this.websock)
        } else {
            alert('Not support websocket')
        }
        window.websocketUserInfo = {
            XM: null
        }
        this.websock.onmessage = this.webSocketOnMessage
        this.websock.onclose = this.sendMessage
        this.websock.onerror = this.webSocketError
    }
    // 接收數(shù)據(jù)
    webSocketOnMessage(e) {
        // 打印接收到的數(shù)據(jù) 用于調(diào)試
        if (e.data.connector === 'getFileInfo') {
            console.log('---------> file info')
        } else {
            console.log(e.data)
        }
        const res = JSON.parse(e.data)
        if (res.connector === 'userLogin') {
            // 用戶登陸后保存的用戶信息
            window.websocketUserInfo = res.result
            // type 用于檢測是否是第一次登陸 是就跳轉(zhuǎn)頁面
            window.websocketUserInfo.type = 1
            console.log('window.websocketUserInfo', window.websocketUserInfo)
        } else if (res.connector === 'getUserLogin') {
            // 獲取登陸二維碼數(shù)據(jù) 用于生成二維碼
            window.websockQRCode = res
            console.log('window.websockQRCode', window.websockQRCode)
        } else if (res.connector === 'printerLogin') {
            // 終端打印機注冊
            window.websockClientInfo = res
            console.log('window.websockClientInfo', window.websockClientInfo)
        } else if (res.connector === 'getFileInfo') {
            // 獲取文件模板列表信息
            window.websockFileList = res
            console.log('window.websockFileList', window.websockFileList)
        } else if (res.connector === 'alipayMoney') {
            // 獲取支付寶二維碼
            window.AliPayCode = res
            console.log('獲取支付寶二維碼', window.AliPayCode)
        } else if (res.connector === 'getAdInfo') {
            // 獲取輪播圖列表
            window.shufflingList = res
            console.log('獲取輪播圖列表', window.shufflingList)
        } else if (res.connector === 'alipayMoneyBack') {
            // 獲取支付回調(diào)
            window.alipayMoneyBack = res
            console.log('獲取支付回調(diào)', window.alipayMoneyBack)
        } else if (res.connector === 'printTemplate') {
            // 獲取文件預覽數(shù)據(jù)
            window.printTemplateList = res
            console.log('文件預覽數(shù)據(jù)', window.printTemplateList)
        }
    }
    // 發(fā)送數(shù)據(jù) 項目主要使用
    sendMessage(messageBady) { // 實際調(diào)用的方法
        window.websockMessageBady = messageBady
        // 若是ws開啟狀態(tài)
        if (this.websock.readyState === this.websock.OPEN) {
            this.websock.send(JSON.stringify(messageBady))
        } else if (this.websock.readyState === this.websock.CONNECTING) {
            // 若是 正在開啟狀態(tài)，則等待300毫秒
            // 保存當前對象this
            let that = this
            setTimeout(() => {
                that.websock.send(JSON.stringify(messageBady))
            }, 300)
        } else {
            // 若未開啟 ，則等待500毫秒
            this.initWebSocket()
            let that = this
            // 保存當前對象this
            setTimeout(() => {
                // that.initWebSocket()
                that.websock.send(JSON.stringify(messageBady))
            }, 500)
        }
    }
    // 關(guān)閉websocket
    webSocketClose(e) {
        const that = this
        let errorTimer = setInterval(() => {
            that.initWebSocket()
            that.websock.send(JSON.stringify(window.websockMessageBady))
            if (that.websock.readyState === that.websock.CONNECTING) {
                window.clearInterval(errorTimer)
            }
        }, 500)
        console.log('connection closed (' + e.code + ')')
    }
    webSocketError(e) {
        console.log('connection error', e)
    }
}

export default new Socket()

3. 引入和掛載Socket類

import Socket from './websocket.js'
Vue.prototype.socket = Socket

4. 使用

在請求的參數(shù)中，加入?yún)?shù)interface，寫入調(diào)用接口名稱，其他參數(shù)為接口請求參數(shù)。

// 獲取常用文件模板
getFileList() {
    console.log('get filelist is called')
    let fileData = {
        'interface': 'getFileInfo',
        'pageNum': this.pageNum,
        'pageSize': this.pagesize,
        'type': 2 // 2為常用表格
    }
    this.socket.sendMessage(fileData)
},