确实有这个问题。除非知道用户什么时候切换网络,否则一旦变更网络,websocket就会断开。
小程序客户端触发onClose方法后,服务端完全接受不到目前我们小程序开发中有遇到一个比较严重的关于 websocket 的问题。 当我们客户端在使用 websocket 的时候,遇到一个比较大的问题:当客户端收到 onClose 方法的时候,服务端并没有收到我们的 onClose 消息。下面是我们的示例代码。 [代码]function[代码] [代码]connectWebsocket(self,type) {[代码][代码] [代码][代码]let token = wx.getStorageSync([代码][代码]'token'[代码][代码]);[代码][代码] [代码][代码]let socketUrl = `${URL.WEBSOCKET_HOST}/vfour/echo_once/?params=${token}`;[代码][代码] [代码][代码]var[代码] [代码]gameSocket = wx.connectSocket({ url: socketUrl });[代码][代码] [代码][代码]socketFlow(type);[代码] [代码] [代码][代码]//整个websocket流程[代码][代码] [代码][代码]function[代码] [代码]socketFlow(type) {[代码][代码] [代码][代码]gameSocket.onOpen([代码][代码]function[代码][代码]() {[代码][代码] [代码][代码]console.log([代码][代码]'-------Websocket onSocketOpen---------'[代码][代码]);[代码][代码] [代码][代码]})[代码] [代码] [代码][代码]gameSocket.onMessage([代码][代码]function[代码][代码](res) {[代码][代码] [代码][代码]console.log(res);[代码][代码] [代码][代码]console.log([代码][代码]'-------Websocket onSocketMessage---------'[代码][代码]);[代码][代码] [代码][代码]})[代码][代码] [代码][代码]gameSocket.onClose([代码][代码]function[代码][代码](res) {[代码][代码] [代码][代码]gameSocket = [代码][代码]null[代码][代码];[代码][代码] [代码][代码]console.log([代码][代码]'-------Websocket onSocketClose---------'[代码][代码]);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]console.log(self.$store.state.connectSocketNum,[代码][代码]'-------------------'[代码][代码],res);[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码]}[代码] 现在就导致比如客户端关闭 wifi, 然后服务端就不知道这个客户端已经断开了。 这个问题比较严重,希望可以协助解决。
2018-07-25这个问题的核心是fill与clip之间的矛盾。 并非fillRect之后clip失效了,只是在fill的范围内clip失效了。 我没有探究fill与clip之间更底层的逻辑,而是采用了一种折中的方法(毕竟我使用fill仅仅是填充背景色),使用drawImage来填充背景色,这样clip的表现就正常了。 供参考
绘图中的clip()方法失效反馈一个 Bug ,fillRect之后clip失效 [代码]const ctx = wx.createCanvasContext([代码][代码]'myCanvas'[代码][代码])[代码][代码] [代码][代码]wx.downloadFile({[代码][代码] [代码][代码]url: [代码][代码]'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg'[代码][代码],[代码][代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]ctx.fillRect(10, 10, 150, 75)[代码][代码] [代码][代码]ctx.draw()[代码][代码] [代码] [代码] [代码][代码]ctx.save()[代码][代码] [代码][代码]ctx.beginPath()[代码][代码] [代码][代码]ctx.arc(50, 50, 25, 0, 2 * Math.PI)[代码][代码] [代码][代码]ctx.clip()[代码][代码] [代码][代码]ctx.drawImage(res.tempFilePath, 25, 25)[代码][代码] [代码][代码]ctx.restore()[代码][代码] [代码][代码]ctx.draw([代码][代码]true[代码][代码])[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][图片] [代码]const ctx = wx.createCanvasContext([代码][代码]'myCanvas'[代码][代码])[代码][代码] [代码][代码]wx.downloadFile({[代码][代码] [代码][代码]url: [代码][代码]'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg'[代码][代码],[代码][代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]// ctx.fillRect(10, 10, 150, 75)[代码][代码] [代码][代码]// ctx.draw()[代码] [代码] [代码][代码]ctx.save()[代码][代码] [代码][代码]ctx.beginPath()[代码][代码] [代码][代码]ctx.arc(50, 50, 25, 0, 2 * Math.PI)[代码][代码] [代码][代码]ctx.clip()[代码][代码] [代码][代码]ctx.drawImage(res.tempFilePath, 25, 25)[代码][代码] [代码][代码]ctx.restore()[代码][代码] [代码][代码]ctx.draw([代码][代码]true[代码][代码])[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][图片]
2018-07-18