小程序WebSocket通过F5无法转发问题解决

Posted 2023-04-18

参考技术A 本项目实现通过小程序实现语音通知功能，测试环境使用nginx转发一切正常。

业务架构：

公网请求到总行F5----转发到分行F5----分发到接入前置NGINX----分发到语音服务器

问题描述：

        1. Websocket通道建立成功

         2. 客户端不能WebSocket消息转发到服务器。

　　  3. 服务器能够WebSocket消息转发到客户端。

分析及解决过程

        问题出现首先就是查看日志，通道wss://xxx.com/voice/websocket可以正常建立，客户端发送消息到服务端进行绑定时发送失败。首先想到是nginx问题，检查nginx配置参数：

参数正常。

第一步：

过滤掉总F5，分行F5进行测试，一切正常。

问题原因总行F5 或者分行F5转发导致不能收发消息。

第二步：

过滤掉总行F5,程序直连分行F5转发到nginx接入前置测试，

问题重现，说明分行F5配置有问题。

初步分析引起问题的原因：

       Websocket 使用http协议来完成部分握手，这个http报文中有包含"Upgrade:websocket"，这是要告诉服务器"我要切换协议"。服务器接收后，回复一个http报文，告诉客户端"OK，我已经切换到websocket协议了"。到此一切正常，客户端发送商户标识到服务端进行绑定，服务端没有收到websocket消息，F5没有识别到websocket协议转发。

解决方案：

最后连接F5测试，一切OK

小程序wx.showActionSheet 调起转发分享

wx.showActionSheet() 方法中无法调取转发功能。
因为转发必须是 button 按钮 设置open-type="share"， 会调取page.onShareAppMessage()。

自定义action-sheet

<!-- 定义一个action-sheet， 通过hidden控制显示隐藏。 -->
<action-sheet hidden="{{state.actionSheetHidden}}" bindchange="actionSheetChange"> 

　　<!-- action-sheet-item 是每个 item -->
　　<action-sheet-item class="item" data-id="{{state.itemData.shop_id}}">
    　　<button open-type="share">{{state.actionSheetItems[0]}}        
    　　</button>
　　</action-sheet-item>

　　<action-sheet-item bindtap="showShareImageModal">{{state.actionSheetItems[1]}}</action-sheet-item>

　　<!-- action-sheet-cancel 是取消按钮。 -->
　　<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

 

或者通过map进行控制。

.xml

<!-- actionSheetItems: [{bindTap: ‘Menu1‘, text: "发给微信好友"}, {bindTap: ‘Menu2‘, text: "生成分享图片"}]; -->

<action-sheet hidden="{{state.actionSheetHidden}}" bindchange="actionSheetChange">
　　<!-- 自定义 转发按钮 -->
　　<action-sheet-item class="item">
　　　　<button open-type="share">{{state.actionSheetItems[0].text}}</button>
　　</action-sheet-item>

　　<!-- 剩下的item -->
　　<block wx:for-items="{{state.actionSheetItems}}">
　　　　<action-sheet-item bindtap="actionSheet{{item.bindTap}}" wx:if="{{index !== 0}}">{{item.text}}</action-sheet-item>
　　</block>

　　<!--取消按钮-->
　　<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

 

.js

// 右上角分享按钮， 点击弹出弹窗，选择发给微信好友 或 生成分享图片。
var shareModeData = [{bindTap: ‘Menu1‘, text: "发给微信好友"}, {bindTap: ‘Menu2‘, text: "生成分享图片"}];
constructor(props) {
　　super(props);
　　this.state = {
　　　　actionSheetHidden: true, // 控制分享弹窗modal
　　　　actionSheetItems: shareModeData, // 弹窗展示数据
　　}
}
onShareAppMessage() {
　　let share_url = ‘/pages/index/index‘
　　let imageUrl = ‘https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1650310964,3049609459&fm=173&app=25&f=JPEG?w=439&h=401&s=17B056855A6786CC443835B90300C001‘
　　return {
　　　　title: ‘我发现了一个不错的商品,快来看看吧!~~‘
　　　　path: share_url,
　　　　imageUrl: imageUrl,
　　　　success: (res) => {
　　　　　　// 转发成功
　　　　　　console.log("分享成功", res)
　　　　},
　　　　fail: (err) => {
　　　　　　// 转发失败
　　　　　　console.log("分享失败", err)
　　　　}
　　}
}
// 显示分享弹窗。
showShareModal(e) {
　　this.setState({
　　　　actionSheetHidden: !this.state.actionSheetHidden
　　});
}
// 改变 action-sheet状态。
actionSheetChange(e) {
　　this.setState({
　　　　actionSheetHidden: !this.state.actionSheetHidden
　　});
}
// 分享弹窗 中item bindTap对应的方法。
actionSheetMenu2() {
　　this.showShareImageModal();
}

 

使用的labrador 框架
所以js中用的不是this.setDate, 而是this.setState。
xml 中取page中的数据不是直接 {{variable}}, 而是{{state.variable}}。