【技术征文】在网页与快应用间构造可靠通信的通道

kongkongye

信息

快应用版本: 1020

背景

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

• 运行'npm run watch'时会提示web组件不支持message事件,但实际上是支持的(只是提示上的小问题)
• 快应用发信息到网页,与网页发信息到快应用,用的方法名都是postMessage,但数据格式并不一致,使用起来不方便
• 消息会丢失(比如网页端消息处理函数还没执行到就给网页发信息等情况)
• 网页给快应用发信息时,快应用发送给网页的信息才会带回

特点

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

• 消息有序发送
• 消息不会丢失,保证到达
• 消息不会接收多次(去重)
• 消息分类型,类似事件的监听机制,更加方便

快应用端代码

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

2. /**
3. * 通道,用来与html进行可靠的通信
4. *
5. * 1. 有序
6. * 2. 回传与ack机制,保证到达
7. * 3. id验证机制,去重
8. *
9. * @param thisObj {Object} this对象
10. * @param webId {String} web的id
11. * @param timeout {Number} 超时时间,超时后会重试,单位ms,默认1000
12. */
13. var Channel = function (thisObj, webId, timeout) {
14. timeout = timeout || 1000
16. var that = this
18. var debug = (...msgs) => console.debug.apply(null, ['[通道]', ...msgs])
19. var log = (...msgs) => console.log.apply(null, ['[通道]', ...msgs])
20. var error = (...msgs) => console.error.apply(null, ['[通道]', ...msgs])
22. //消息id生成器
23. that.idGenerator = 0
24. //消息发送队列
25. that.sendQueue = [
26. // {
27. // data: {},
28. // resolve: Object,
29. // },
30. ]
31. //***列表
32. that.listeners = {
33. // type: [listener1, listener2],
34. }
36. //当前接收的消息id
37. that.receivedId = 0
39. /**
40. * @param type {String} 消息类型
41. * @param data {Object} 消息内容
42. * @return {Promise}
43. */
44. that.sendMsg = function (type, data) {
45. var resolve;
46. var promise = new Promise(resolve_ => resolve = resolve_)
47. that.sendQueue.push({
48. data: {
49. pType: 'msg',
50. id: ++that.idGenerator,
51. type: type,
52. data: data,
53. },
54. resolve
55. })
56. return promise
57. }
59. /**
60. * 监听
61. * @param type 消息类型
62. * @param callback 回调
63. */
64. that.on = function (type, callback) {
65. var typeListeners = that.listeners[type] || []
66. that.listeners[type] = typeListeners
67. typeListeners.push(callback)
68. }
70. /**
71. * 收到消息时调用(设置web组件的message事件的处理函数)
72. */
73. that.onMsg = function ({message, url}) {
74. debug('[收到消息]', message, '('+url+')')
75. var {pType, id, type, data} = JSON.parse(message)
77. if (pType === 'ack') {//ack包
78. if (id === that.idGenerator) {//是当前的ack,有效,删除元素
79. var nowPackets = that.sendQueue.splice(0, 1);
80. that.valid_(nowPackets.length === 1)
81. nowPackets[0].resolve()
82. }
83. }else if (pType === 'msg') {//正常消息
84. if (id === that.receivedId+1) {//是下个准备接收的包,有效
85. //更新缓存值
86. that.receivedId++
87. //处理
88. var typeListeners = that.listeners[type] || []
89. log('[处理消息]', '类型: '+type, '处理器数量: '+typeListeners.length)
90. for (var i=0;i<typeListeners.length;i++) {
91. try {
92. typeListeners[i](data)
93. } catch (e) {
94. error('[处理器错误]', e)
95. }
96. }
97. //响应ack
98. that.send_({
99. pType: 'ack',
100. id,
101. })
102. }
103. }else {//没有pType,当作ping包处理,忽略
104. return
105. }
106. }
108. /**
109. * 发包
110. */
111. that.send_ = function (packet) {
112. var str = JSON.stringify(packet)
113. thisObj.$element(webId).postMessage({
114. message: str
115. })
116. debug('[发送消息]', str)
117. }
119. /**
120. * 下个包
121. */
122. that.next_ = function() {
123. if (that.sendQueue.length > 0) {
124. that.send_(that.sendQueue[0].data)
125. }
126. }
128. /**
129. * 验证
130. */
131. that.valid_ = function(bool, errMsg) {
132. if (!bool) {
133. throw new Error(errMsg || 'Valid Fail!')
134. }
135. }
137. //计时器: 不断重试发送包
138. var timerId = setInterval(function () {
139. if (thisObj.$valid) {//仍然有效
140. that.next_()
141. }else {//取消计时器
142. log('已经失效,取消计时器')
143. clearInterval(timerId)
144. }
145. }, timeout)
146. }
148. module.exports = Channel

复制代码

快应用端使用方式(参考):

2. <template>
3. <web id="web" src="xxx" @message="{{onMessage}}"></web>
4. </template>
6. <script>
7. import Channel from './channel'
9. export default {
10. channel: null,
11. onInit() {
12. this.channel = new Channel(this, 'web')
14. //通道监听
15. this.channel.on('type1', function (data) {
16. //处理收到的数据
17. })
19. //发送信息
20. this.channel.sendMsg('type2', {
21. //数据
22. })
23. },
24. onMessage(param) {
25. this.channel.onMsg(param)
26. },
27. }
28. </script>

复制代码

网页端代码

网页端js(可以新建一个js或复制到script脚本里):

2. /**
3. * (在html端,实际上一个页面只能new一个通道)
4. *
5. * 通道,用来与html进行可靠的通信
6. *
7. * 1. 有序
8. * 2. 回传与ack机制,保证到达
9. * 3. id验证机制,去重
10. *
11. * @param logger {Function} 日志记录器,可为null
12. * @param timeout {Number} 超时时间,超时后会重试,单位ms,默认1000
13. */
14. var Channel = function (logger, timeout) {
15. timeout = timeout || 1000
17. if (!logger) logger = () => {}
19. var that = this
21. //消息id生成器
22. that.idGenerator = 0
23. //消息发送队列
24. that.sendQueue = [
25. // {
26. // data: {},
27. // resolve: Object,
28. // },
29. ]
30. //***列表
31. that.listeners = {
32. // type: [listener1, listener2],
33. }
35. //当前接收的消息id
36. that.receivedId = 0
38. /**
39. * @param type {String} 消息类型
40. * @param data {Object} 消息内容
41. * @return {Promise}
42. */
43. that.sendMsg = function (type, data) {
44. var resolve;
45. var promise = new Promise(resolve_ => resolve = resolve_)
46. that.sendQueue.push({
47. data: {
48. pType: 'msg',
49. id: ++that.idGenerator,
50. type: type,
51. data: data,
52. },
53. resolve
54. })
55. return promise
56. }
58. /**
59. * 监听
60. * @param type 消息类型
61. * @param callback 回调
62. */
63. that.on = function (type, callback) {
64. var typeListeners = that.listeners[type] || []
65. that.listeners[type] = typeListeners
66. typeListeners.push(callback)
67. }
69. /**
70. * 收到消息时调用(设置为onmessage的处理函数)
71. */
72. that.onMsg = function (message) {
73. logger('[收到消息]' + message)
74. var {pType, id, type, data} = JSON.parse(message)
76. if (pType === 'ack') {//ack
77. if (id === that.idGenerator) {//是当前的ack,有效,删除元素
78. var nowPackets = that.sendQueue.splice(0, 1);
79. that.valid_(nowPackets.length === 1)
80. nowPackets[0].resolve()
81. }
82. } else if (pType === 'msg') {//正常消息
83. if (id === that.receivedId + 1) {//是下个准备接收的包,有效
84. //更新缓存值
85. that.receivedId++
86. //处理
87. var typeListeners = that.listeners[type] || []
88. logger('[处理消息]类型: ' + type + ' 处理器数量: ' + typeListeners.length)
89. for (var i = 0; i < typeListeners.length; i++) {
90. try {
91. typeListeners[i](data)
92. } catch (e) {
93. logger('[处理异常]'+JSON.stringify(e))
94. }
95. }
96. //响应ack
97. that.send_({
98. pType: 'ack',
99. id,
100. })
101. }
102. } else {//没有pType,忽略
103. return
104. }
105. }
107. /**
108. * 发包
109. */
110. that.send_ = function (packet) {
111. var str = JSON.stringify(packet)
112. system.postMessage(str)
113. logger('[发送消息]' + str)
114. }
116. /**
117. * 下个包
118. */
119. that.next_ = function () {
120. if (that.sendQueue.length > 0) {
121. that.send_(that.sendQueue[0].data)
122. }
123. }
125. /**
126. * 验证
127. */
128. that.valid_ = function (bool, errMsg) {
129. if (!bool) {
130. throw new Error(errMsg || 'Valid Fail!')
131. }
132. }
134. //计时器: 不断重试发送包
135. setInterval(function () {
136. that.next_()
137. }, timeout)
139. //计时器: ping
140. //(必须不断地ping,因此html不发请求到app,那么app发送给html的消息就不会过来,蛋疼)
141. setInterval(function () {
142. that.send_({})
143. }, 200)
145. //对接
146. system.onmessage = that.onMsg
147. }

复制代码

网页端使用方法(参考):

2. var channel = new Channel()
4. //通道监听
5. channel.on('type1', function (data) {
6. //处理收到的数据
7. })
9. //发送信息
10. channel.sendMsg('type2', {
11. //数据
12. })

复制代码

PS

• 快应用发信息到网页,官方文档写的信息格式是messageString,但这个东西文档里并没说格式是怎样的,也搜不到,最后在官方的demo里,注释的代码里发现格式是{message: 'xxx'},非常坑爹
• 网页端的日志不好显示

管理员

感谢楼主分享 已经收录啦~~

这叫什么事啊

感谢楼主分享，只不过这个你的这个构造函数，看得我头疼，希望楼主规范下代码。

kongkongye

这叫什么事啊 发表于 2018-11-1 22:36 感谢楼主分享，只不过这个你的这个构造函数，看得我头疼，希望楼主规范下代码。 ...

不是很精通前端,望指出代码里不规范的地方

大橙子

不错