websoket的扫码登陆简单用法

import { parseString } from 'xml2js';  //  json与xml相互转化的工具
export default class ConnnectIm {
    constructor() {
        const ip = process.env.imUri;
        const host = "ws://" + ip + ":7070/ws/";
        const connection = new WebSocket(host, 'xmpp')
        this.connection = connection
        this.ip = ip
        this.id = null
        let firstIn = true
        connection.onopen = () => { //建立连接
            connection.send(`<open to='${ip}' xmlns='urn:ietf:params:xml:ns:xmpp-framing' xml:lang='zh' version='1.0'/>`)

            connection.send(`<auth xmlns='urn:ietf:params:xml:ns:xmpp-sasl' mechanism='ANONYMOUS'>=</auth>`)
            connection.onmessage = (res) => { //接受数据
                parseString(res.data, (err, json) => {
                    if (json.open) {
                        this.id = json.open.$.id;
                        connection.send(`<iq type='set' id='${json.open.$.id}'><bind xmlns='urn:ietf:params:xml:ns:xmpp-bind'/></iq>`)
                    }
                    if (json.iq) {
                        connection.send(`<presence id="${this.id}"><status>Online</status><priority>1</priority></presence>`)
                        if(json.iq.bind[0].jid){
                            this.sendJid && this.sendJid(json.iq.bind[0].jid[0])
                        }
                        
                    }
                    if (json.message && json.message.body) {
                        const body = JSON.parse(json.message.body[0])
                        switch (body.ext && body.ext.type) {
                            case "userCenterinfo":
                                this.receive && this.receive(body);
                                break;
                            default:
                                return
                        }
                    }
                })
            }
            connection.onclose = ()=>{ 
                // 关闭 websocket
                console.log("连接已关闭..."); 
             };
        }
    }

    on(action, event) {
        this[action] = event.bind(this)
    }


}

    getQR(){  // 创建img标签将接受后端的二进制流转化为url
        const imconnect = new ImConnet();
        this.setState({
            imconnect
        })
        let that = this;
        const { imgNode } = this.state; //document.createElement('img')
        imconnect.on('sendJid',function(e){
          Ajax.get('getQr',{imJid: e}, (res)=>{   
            const myBlob = new window.Blob([res], {type: 'image/jpeg'})
            const qrUrl = window.URL.createObjectURL(myBlob);  // 生成的带有当前域名的标准blob:链接形式（blob:http://authorization.hqjy.com/4dc453be-bd07-4351-8484-6469f6112b23）
            imgNode.src = qrUrl;
            imgNode.onload = ()=> {
              window.URL.revokeObjectURL(qrUrl); // 当图片加载完成后释放对象URL.
            }
            that.qrImgBox.appendChild(imgNode); // 将img插入到div容器中
          })
        })
        imconnect.on('receive',function(e){
          console.log(e,'receive')
          const token = e.content; 
          that.setState({
            isOverDue: false,
            isSweeped: true
          })

// 超过十分钟断开连接,记得释放内存
        setTimeout(()=>{
          imconnect.connection.close();
          this.setState({
            isOverDue: true,
            isSweeped: false
          })
        },1000*60*10)

参考链接

https://www.cnblogs.com/liulangmao/p/4262565.html