在网页与快应用之间如何构造可靠通信通道？

最新推荐文章于 2023-12-05 10:37:42 发布

快应用官方博客

最新推荐文章于 2023-12-05 10:37:42 发布

阅读量2.2k

点赞数

分类专栏：快应用技术分享快应用技术分享

本文链接：https://blog.csdn.net/quickapp/article/details/92759972

版权

本文介绍了一种解决快应用与网页通信中消息丢失、格式不一致问题的方法，通过创建辅助库实现有序发送、确保消息到达且不重复。快应用端和网页端的代码示例分别展示如何使用此通信机制。

摘要由CSDN通过智能技术生成

本文作者：空空叶

背景

快应用版本: 1020

在使用web组件进行快应用与网页间的通信的时候，有这几个发现:

1、运行'npm run watch'时会提示web组件不支持message事件，但实际上是支持的(只是提示上的小问题)

2、快应用发信息到网页，与网页发信息到快应用，用的方法名都是postMessage，但数据格式并不一致，使用起来不方便

3、消息会丢失(比如网页端消息处理函数还没执行到就给网页发信息等情况)

4、网页给快应用发信息时，快应用发送给网页的信息才会带回

特点

因此，这里花了点力气，做了个辅助的库，特点:

1、消息有序发送

2、消息不会丢失，保证到达

3、消息不会接收多次(去重)

4、消息分类型，类似事件的监听机制,更加方便

快应用端代码

快应用里，新建一个channel.js文件，内容:

/**	
 * 通道,用来与html进行可靠的通信	
 *	
 * 1. 有序	
 * 2. 回传与ack机制,保证到达	
 * 3. id验证机制,去重	
 *	
 * @param thisObj {Object} this对象	
 * @param webId {String} web的id	
 * @param timeout {Number} 超时时间,超时后会重试,单位ms,默认1000	
 */	
var Channel = function (thisObj, webId, timeout) {	
    timeout = timeout || 1000	
	
    var that = this	
	
    var debug = (...msgs) => console.debug.apply(null, ['[通道]', ...msgs])	
    var log = (...msgs) => console.log.apply(null, ['[通道]', ...msgs])	
    var error = (...msgs) => console.error.apply(null, ['[通道]', ...msgs])	
	
    //消息id生成器	
    that.idGenerator = 0	
    //消息发送队列	
    that.sendQueue = [	
        // {	
        //     data: {},	
        //     resolve: Object,	
        // },	
    ]	
    //***列表	
    that.listeners = {	
        // type: [listener1, listener2],	
    }	
    //当前接收的消息id	
    that.receivedId = 0	
    /**	
     * @param type {String} 消息类型	
     * @param data {Object} 消息内容	
     * @return {Promise}	
     */	
    that.sendMsg = function (type, data) {	
        var resolve;	
        var promise = new Promise(resolve_ => resolve = resolve_)	
        that.sendQueue.push({	
            data: {	
                pType: 'msg',	
                id: ++that.idGenerator,	
                type: type,	
                data: data,	
            },	
            resolve	
        })	
        return promise	
    }	
    /**	
     * 监听	
     * @param type 消息类型