微信小步调中使用WebSocket通讯

一、在utils文件夹下新建websocket.js文件，用来封装websocket的连接以及生命周期非法：

1. const app = getApp()
2. // 域名地址(项目实地址)
3. const Host = 'wss://fczd.hkbtwx.com/websocket/ws/';
5. // Socket连接成功
6. var socketOpen = false;
7. // Socket关闭
8. var socketClose = false;
9. // 消息队列
10. var socketMsgQueue = [];
12. // 判断心跳变量
13. var heart = null;
14. // 心跳失败次数
15. var heartBeatFailCount = 0;
16. // 终止心跳
17. var heartBeatTimeout = null;
18. // 终止重连
19. var connectSocketTimeout = null;
21. var webSocket = {
22.   // 连接Socket
23.   connectSocket:function(options) {
24.     if (socketOpen) return
25.     // wx.showLoading({
26.     //   title: 'Socket连接中...',
27.     //   mask: true
28.     // });
29.     socketOpen = false;
30.     socketClose = false;
31.     socketMsgQueue = [];
32.     let url = Host + app.globalData.userInfo.code
33.     wx.connectSocket({
34.       url: url,
35.       header:{
36.         'content-type': 'application/json'
37.       },
38.       success:function(res) {
39.         console.log('链接成功')
40.         if (options) {
41.           options.success && options.success(res);
42.         }
43.       },
44.       fail:function(res) {
45.         if (options) {
46.           options.fail && options.fail(res);
47.         }
48.       }
49.     })
50.   },
51.   // 发送消息
52.   sendSocketMessage:function(options) {
53.     if (socketOpen) {
54.       wx.sendSocketMessage({
55.         data: options.msg,
56.         success: function(res) {
57.           if (options) {
58.             options.success && options.success(res);
59.           }
60.         },
61.         fail: function(res) {
62.           if (options) {
63.             options.fail && options.fail(res);
64.           }
65.         }
66.       })
67.     } else {
68.       socketMsgQueue.push(options.msg)
69.     }
70.   },
71.   // 关闭Socket
72.   closeSocket: function(options) {
73.     if (connectSocketTimeout) {
74.       clearTimeout(connectSocketTimeout);
75.       connectSocketTimeout = null;
76.     };
77.     socketClose = true;
78.     this.stopHeartBeat();
79.     wx.closeSocket({
80.       success: function(res) {
81.         if (options) {
82.           options.success && options.success(res);
83.         }
84.       },
85.       fail: function(res) {
86.         if (options) {
87.           options.fail && options.fail(res);
88.         }
89.       }
90.     })
91.   },
92.   // 收到消息
93.   onSocketMessageCallback: function(msg) {},
95.   // 开始心跳
96.   startHeartBeat: function() {
97.     heart = true;
98.     this.heartBeat();
99.   },
101.   // 正在心跳
102.   heartBeat: function() {
103.     var that = this;
104.     if (!heart) {
105.       return;
106.     };
107.     that.sendSocketMessage({
108.       msg: JSON.stringify({
109.         // 与后端约定，传点消息，保持链接
110.         'message': 'ping',
111.         'toUserId': app.globalData.userInfo.code
112.       }),
113.       success: function(res) {
114.         if (heart) {
115.           heartBeatTimeout = setTimeout(() => {
116.             that.heartBeat();
117.           }, 8000);
118.         }
119.       },
120.       fail: function(res) {
121.         if (heartBeatFailCount > 2) {
122.           that.connectSocket();
123.         };
124.         if (heart) {
125.           heartBeatTimeout = setTimeout(() => {
126.             that.heartBeat();
127.           }, 8000);
128.         };
129.         heartBeatFailCount++;
130.       }
131.     });
132.   },
134.   // 结束心跳
135.   stopHeartBeat: function() {
136.     heart = false;
137.     if (heartBeatTimeout) {
138.       clearTimeout(heartBeatTimeout);
139.       heartBeatTimeout = null;
140.     };
141.     if (connectSocketTimeout) {
142.       clearTimeout(connectSocketTimeout);
143.       connectSocketTimeout = null;
144.     }
145.   }
146. };
148. // 监听WebSocket打开连接
149. wx.onSocketOpen(function(res) {
150.   wx.hideLoading();
151.   // 如果已经关闭socket
152.   if (socketClose) {
153.     webSocket.closeSocket();
154.   } else {
155.     socketOpen = true
156.     for (var i = 0; i < socketMsgQueue.length; i++) {
157.       webSocket.sendSocketMessage(socketMsgQueue[i])
158.     };
159.     socketMsgQueue = []
160.     webSocket.startHeartBeat();
161.   }
162. });
164. // 监听WebSocket错误
165. wx.onSocketError(function(res) {
166.   console.log('WebSocket连接打开失败，请检查！', res);
167.   wx.hideLoading();
168.   // wx.showToast({
169.   //   title: 'Socket连接失败：' + JSON.stringify(res),
170.   //   icon: 'none',
171.   //   duration: 3000
172.   // })
173. });
175. // 监听WebSocket接受到服务器的消息
176. wx.onSocketMessage(function(res) {
177.   console.log(res.data)
178.   webSocket.onSocketMessageCallback(res.data);
179. });
181. // 监听WebSocket关闭连接后重连
182. wx.onSocketClose(function(res) {
183.   if (!socketClose) {
184.     clearTimeout(connectSocketTimeout);
185.     connectSocketTimeout = setTimeout(() => {
186.       webSocket.connectSocket();
187.     }, 10000);
188.   }
189. });
191. module.exports = webSocket;

复制代码

二、在须要吸收websocket消息的页面引入：

1. const app = getApp()
2. const $api = require("../../utils/api.js")
3. const myRequest = require('../../utils/request.js')
4. let navBarTitleText = ''
5. const WebSocket = require('../../utils/websocket.js')
6. Page({
7.   data: {
8.     isBindWx: false,
9.     showLoginPop: false,
10.     userInfo: {},
11.     statisticsData: {}, //统计数据
12.     avatarUrl: '',
13.     // 登录页面相关参数
14.     avHeight: '',
15.     navTop: '',
16.     navHeight: '',
17.     loading: false,
18.     isOut: false,
19.     isLogin: false,
20.     message: '',
21.     messageCode: ''
22.   },
24.   onLoad: function(options) {
25.     if (wx.getStorageSync('isOut')) {
26.       this.setData({
27.         isOut: true
28.       })
29.       wx.setStorageSync('isOut', '')
30.     }
31.   },
33.   onShow: function() {
34.     if (typeof this.getTabBar === 'function' && this.getTabBar()) {
35.       this.getTabBar().setData({
36.         selected: 0,
37.         show: app.globalData.isLogin
38.       })
39.     }
40.     // 打开调试
41.     wx.setEnableDebug({
42.       enableDebug: false
43.     })
44.     wx.setNavigationBarTitle({
45.       title: navBarTitleText
46.     })
47.     this.setData({
48.       isBindWx: app.globalData.isBindWx,
49.       userInfo: app.globalData.userInfo,
50.       avatarUrl: app.globalData.avatarUrl,
51.       navHeight: app.globalData.navHeight,
52.       navTop: app.globalData.navTop,
53.       loading: false,
54.       isLogin: app.globalData.isLogin,
55.       navBarTitleText: app.globalData.isLogin ? '首页' : '登录'
56.     })
57.     if (app.globalData.isLogin) {
58.       this.getStatistics()
59.     }
60.     // 设置接收消息回调
61.     WebSocket.onSocketMessageCallback = this.onSocketMessageCallback
62.   },
64.   // 用户信息
65.   onUserInfo() {
66.     let that = this
67.     if (app.globalData.avatarUrl) {
68.       wx.navigateTo({
69.         url: '/pages/userInfo/index'
70.       })
71.       return
72.     }
73.     wx.getUserProfile({
74.       desc: '用于展示用户信息',
75.       success: (res) => {
76.         that.setData({
77.           avatarUrl: res.userInfo.avatarUrl
78.         })
79.         app.globalData.avatarUrl = res.userInfo.avatarUrl
80.         wx.navigateTo({
81.           url: '/pages/userInfo/index'
82.         })
83.         console.log('---------------' + res.userInfo.nickName)
84.         that.uploadPhoto(that.data.avatarUrl, res.userInfo.nickName)
85.       }
86.     })
87.   },
89.   // 上传微信头像
90.   uploadPhoto(url, nickName) {
91.     myRequest.request({
92.       url: $api.baseUrl + $api.uploadPhoto,
93.       method: 'POST',
94.       data: {
95.         photo: url,
96.         wxName: nickName,
97.         way: '1'
98.       },
99.       success: res => {
100.         if (res.data.code != '0') {
101.           wx.showToast({
102.             title: res.data.msg,
103.             duration: 3000,
104.             icon: 'none'
105.           })
106.         }
107.       }
108.     })
109.   },
111.   // 订阅消息
112.   onSubscribeMessage() {
113.     wx.requestSubscribeMessage({
114.       tmplIds: ['hkKPWSfweqkac20HAD2rlvweeV6vsuNysxKqibtECl8', 'eJ5j3aLYIO_rRax1dcKPrIaXAz99kmdxurSYX29CDbY'],
115.       complete: messageData => {
116.         app.globalData.isFirstOperation = false
117.         wx.showToast({
118.           title: '消息订阅成功',
119.           duration: 2000,
120.           icon: 'success'
121.         })
122.       }
123.     })
124.   },
126.   // 拒绝绑定微信
127.   onRefuse() {
128.     this.setData({
129.       showLoginPop: false
130.     })
131.   },
133.   // 同意绑定微信
134.   onAgree() {
135.     let that = this
136.     wx.login({
137.       success(res) {
138.         if (res.code) {
139.           // todo 发送 res.code 到后台换取 openId, sessionKey, unionId
140.           app.globalData.isBindWx = true
141.           that.setData({
142.             showLoginPop: false,
143.             isBindWx: true
144.           })
145.         } else {
146.           wx.showToast({
147.             title: '登录失败！' + res.errMsg,
148.             duration: 3000,
149.             icon: 'none'
150.           })
151.         }
152.       }
153.     })
154.   },
156.   /**
157.    * 登录相关
158.    */
159.   loginSucccess(e) {
160.     this.getTabBar().setData({
161.       show: true
162.     })
163.     // 创建WebSocket连接
164.     WebSocket.connectSocket()
165.     if (this.data.isOut) {
166.       wx.switchTab({
167.         url: '/pages/news/index'
168.       })
169.       this.setData({
170.         isOut: false
171.       })
172.     } else {
173.       this.setData({
174.         loading: false,
175.         isLogin: true,
176.         userInfo: e.detail,
177.         navBarTitleText: '首页'
178.       })
179.       // 获取数据
180.       // sthis.getStatistics()
181.       wx.setNavigationBarTitle({
182.         title: '首页'
183.       })
184.     }
185.   },
187.   // Socket收到的信息
188.   onSocketMessageCallback: function(res) {
189.     let message = JSON.parse(res)
190.     if (message.message == '连接成功' || message.message == 'ping') return
191.     this.setData({
192.       message: message.message,
193.       messageCode: message.code
194.     })
195.     setTimeout(() => {
196.       this.setData({
197.         message: '',
198.         messageCode: ''
199.       })
200.     }, 10000)
201.   },
203.   // 页面销毁时关闭连接
204.   onUnload: function(options) {
205.     WebSocket.closeSocket();
206.   }
207. })

复制代码

三、以上便是微信小步调中WebSocket的封装和使用；下面再先容单Activity多Fragment的Android项目中使用WebSocket举行通讯：
3.1 编写WebSocket工具类：

1. public class MyWsManager {
3.     private static final String URL = SystemConst.WS_URL + "?appKey=" + CommonUtils.getDeviceNumber();
4.     private static MyWsManager myWsManager;
5.     private static WsManager wsManager;
6.     protected Logger logger = Logger.getLogger(MyWsManager.class);
7.     private Handler.Callback wsConnectCallBack;
8.     private static final int WS_OPEN_STATUS = 1;
9.     private static final int WS_MESSAGE_STATUS = 2;
10.     private static final int WS_MESSAGE_2_STATUS = 3;
11.     private static final int WS_RECONNECT_STATUS = 4;
12.     private static final int WS_CLOSING_STATUS = 5;
13.     private static final int WS_CLOSED_STATUS = 6;
14.     private static final int WS_FAILURE_STATUS = 7;
16.     public static MyWsManager getInstance() {
17.         if (myWsManager == null) {
18.             synchronized (MyWsManager.class) {
19.                 if (myWsManager == null) {
20.                     myWsManager = new MyWsManager();
21.                 }
22.             }
23.         }
24.         return myWsManager;
25.     }
27.     public void setWsConnectCallBack(Handler.Callback wsCallBack){
28.         if (wsCallBack != null){
29.             wsConnectCallBack = wsCallBack;
30.         }
31.     }
33.     private void onCallBack(Message message){
34.         if (wsConnectCallBack != null){
35.             wsConnectCallBack.handleMessage(message);
36.         }
37.     }
39.     public void initWS(Context context) {
40.         try {
41.             wsManager = new WsManager.Builder(context).client(
42.                 new OkHttpClient().newBuilder()
43.                     .pingInterval(15, TimeUnit.SECONDS)
44. //                        .retryOnConnectionFailure(true)
45.                     .build())
46.                     .needReconnect(true)
47.                     .wsUrl(URL)
48.                     .build();
49.             wsManager.setWsStatusListener(wsStatusListener);
50.             wsManager.startConnect();
51.         } catch (Exception e) {
52.             logger.error("WebSocket连接异常：" + e.getMessage());
53.         }
54.     }
56.     //状态监听
57.     private WsStatusListener wsStatusListener = new WsStatusListener() {
59.         Message message = new Message();
60.         @Override
61.         public void onOpen(Response response) {
62.             logger.info("WebSocket服务器连接成功");
63.             EventBus.getDefault().postSticky("connect");
64.             message.what = WS_OPEN_STATUS;
65.             onCallBack(message);
66.         }
68.         @Override
69.         public void onMessage(String text) {
70.             message.what = WS_MESSAGE_STATUS;
71.             message.obj = text;
72.             onCallBack(message);
73.         }
75.         @Override
76.         public void onMessage(ByteString bytes) {
77.             message.what = WS_MESSAGE_2_STATUS;
78.             message.obj = bytes.toString();
79.             onCallBack(message);
80.         }
82.         @Override
83.         public void onReconnect() {
84. //            logger.debug("WebSocket服务器重连接中...");
85.             message.what = WS_RECONNECT_STATUS;
86.             onCallBack(message);
87.         }
89.         @Override
90.         public void onClosing(int code, String reason) {
91. //            logger.debug("WebSocket服务器连接关闭中：" + reason);
92.             message.what = WS_CLOSING_STATUS;
93.             onCallBack(message);
94.             //上面提及了设备会出现断开后无法连接的情况,那这种无法连接的情
95.             //况我发现有可能会卡在这个关闭过程中,因为如果是确实断开后会确实的启动重连机制
96.             //这里主要的目的就死让他跳出这个关闭中的状态,确实的关闭了ws
97.             if (wsManager != null) {
98.                 wsManager.stopConnect();
99.                 wsManager.startConnect();
100.             }
101.         }
103.         @Override
104.         public void onClosed(int code, String reason) {
105.             logger.debug("WebSocket服务器连接已关闭：" + reason);
106.             message.what = WS_CLOSED_STATUS;
107.             onCallBack(message);
108.         }
110.         @Override
111.         public void onFailure(Throwable t, Response response) {
112.             logger.error("WebSocket服务器连接失败：" +  t.getMessage());
113.             message.what = WS_FAILURE_STATUS;
114.             onCallBack(message);
115.         }
116.     };
118.     //发送ws数据
119.     public void sendData(String content) {
120.         if (wsManager != null && wsManager.isWsConnected()) {
121.             boolean isSend = wsManager.sendMessage(content);
122.             if (isSend) {
123.                 logger.info("WebSocket发送数据成功");
124.             } else {
125.                 logger.error("WebSocket发送数据失败");
126.             }
127.         } else {
128.             ToastUtils.showToast("WebSocket连接已断开");
129.         }
130.     }
132.     //断开ws
133.     public void disConnect() {
134.         if (wsManager != null)
135.             wsManager.stopConnect();
136.     }
138.     //判断WS是否断开了
139.     public boolean wsIsConnect(){
140.         if (wsManager == null) {
141.             return false;
142.         }
143.         return wsManager.isWsConnected();
144.     }
145. }

复制代码

3.2 在activity中初始化WebSocket的连接、吸收WebSocket消息，处理后分发给对应的fragment：
在processLogic中初始化WebSocket的连接

1. private void initWebSocket() {
2.     MyWsManager.getInstance().initWS(this);
3.     time = new TimeCount(2000, 1000);
4.     //WS状态监听
5.     MyWsManager.getInstance().setWsConnectCallBack(new Handler.Callback() {
6.         @Override
7.         public boolean handleMessage(@NonNull Message message) {
8.             switch (message.what) {
9.                 case 1: //连接成功
10.                     timerCount = 1;
11.                     time.cancel();
12.                     homeModel.websocketStatus.set(1);
13.                     break;
14.                 case 2: //接收string类型数据
15.                     String data = (String) message.obj;
16.                     if (!data.equals("连接建立成功")){
17.                         showWebSocketData(data);
18.                     }
19.                     break;
20.                 case 3: //接收ByteString类型数据
21.                     String data2 = (String) message.obj;
22.                     break;
23.                 case 4: //websocket连接中
24.                     break;
25.                 case 5: //连接关闭中
26.                     break;
27.                 case 6: //连接已关闭
28.                 case 7: //连接失败
29.                     if (time != null){
30.                         time.cancel();
31.                         time.start();
32.                     }
33.                     homeModel.websocketStatus.set(0);
34.                     break;
35.             }
36.             return false;
37.         }
38.     });
39. }

复制代码

1. // 重连机制
2. public class TimeCount extends CountDownTimer {
4.     public TimeCount(long millisInFuture, long countDownInterval) {
5.         super(millisInFuture, countDownInterval);
6.     }
8.     @Override
9.     public void onTick(long millisUntilFinished) {  // 计时过程
10.     }
12.     @Override
13.     public void onFinish() {// 计时完毕
14.         isTimer = false;
15.         //判断WebSocket是否断开
16.         if (!MyWsManager.getInstance().wsIsConnect()) {
17.             MyWsManager.getInstance().disConnect();  //断开socket
18.             MyWsManager.getInstance().initWS(MyApplication.getContext());
19.         }
20.     }
21. }

复制代码

3.2 处理WebSocket消息，分发给对应的fragment：

1. private WebsocketPushBean data = null;
2. private void showWebSocketData(String pushData) {
3.     try {
4.         data = JSON.parseObject(pushData, WebsocketPushBean.class);
5.     } catch (Exception e){
6.         logger.error("WebSocket推送数据解析失败");
7.     }
8.     if (data != null){
9.         if (data.getType() == 6 || data.getType() == 8){ //6-主扫支付
10.             fragment.setWebSocketData(data);
11.         }else if (data.getType() == 7) { //主扫跳主动支付
12.             websocketPushBeans.add(data);
13.             fragment.setWebSocketData(data);
14.             payPopupView();
15.         } else if (data.getType() == 2){ //主动支付
16.             websocketPushBeans.add(data);
17.             fragment.setWebSocketData(data);
18.             payPopupView();
19.         } else if (data.getType() == 1){ //网约车支付
20.             websocketAutoPayBeans.add(data);
21.             autoPayPopupView();
22.         } else if (data.getType() == 9){ //车牌支付
23.             fragment.setWebSocketData(data);
24.         } else if (data.getType() == 10) { //流水绑定
25.             fragment.setWebSocketData(data);
26.         } else { //换购、赠品提示
27.             websocketPushBeans.add(data);
28.             payPopupView();
29.         }
30.     }
31. }

复制代码

3.3 activity销毁时断开WebSocket连接

1. @Override
2. protected void onDestroy() {
3.     super.onDestroy();
4.     EventBus.getDefault().unregister(this);
5.     MyWsManager.getInstance().disConnect();
6.     if (time != null){
7.         time.cancel();
8.         time = null;
9.     }
10. }

复制代码

3.4 项目中那么多fagmen，上面的fagmen指哪个?因为所有的fagmenl都继续BaseFragment，所有上面的fagmen是BaseFragment，至于如何确认是哪个详细的fagment，背面会说明。
3.5 创建一个IBusinessInterface接口，用来把当前表现的fragment设置给activity，内容如下：

1. public interface IBusinessInterface {
2.     void setSelectedFragment(BaseFragment fragment);
3. }

复制代码

3.6 Activity实现此接口，并把通报过来的fragment设置给BaseFragment：

1. @Override
2. public void setSelectedFragment(BaseFragment fragment) {
3.     this.fragment = fragment;
4. }

复制代码

3.7 fragment表现到前台时，把当前fragment设置给activity：

1. IBusinessInterface backInterface = (IBusinessInterface)getActivity();
2. backInterface.setSelectedFragment(this); // 将fragment传递到Activity中

复制代码

至此，activity中的fragment便确认了。
3.8 fragment中重写吸收WebSocket消息的方法setWebSocketData：

1. /**
2. * 接收Websocket返回的数据
3. */
4. public void setWebSocketData(WebsocketPushBean data){
5.     if (data.getType() == 6 || data.getType() == 7){ //支付成功
6.         if (customPopupView != null){
7.             customPopupView.dismiss();
8.         }
9.         vm.getOrderInfoByFlowNo(data.getFlowNo());
10.     } else if (data.getType() == 2){ //主动支付
11.         if (beScanPopupView != null){
12.             beScanPopupView.dismiss();
13.         }
14.         if (customPopupView != null){
15.             customPopupView.dismiss();
16.         }
17.     } else if (data.getType() == 8){ //扫码开票、扫码兑换关闭弹框
18.         if (customPopupView != null && customPopupView.isShow()){
19.             customPopupView.dismiss();
20.         }
21.         currentPage = 1;
22.         oilGunPage = 1;
23.         lastPage = false;
24.         oilWaterData.clear();
25.         //获取当前选中的油枪信息
26.         vm.getOrderInfoCountPos(model.deptCode.get(), model.selectGunList.get(), "1");
27.         //获取油品流水信息
28.         vm.getOrderInfoAndPayFlagPos(model.deptCode.get(), model.selectGunList.get(), 1);
29.     } else if (data.getType() == 9){ //车牌支付
30.         if (customPopupView != null){
31.             customPopupView.dismiss();
32.         }
33.         model.flowNo.set(data.getFlowNo());
34.         vm.getOrderInfoByFlowNo(data.getFlowNo());
35.     }
36. }

复制代码

至此，activity吸收WebSocket消息、分发给对应的fragment、fragment处理对应的业务整个链路已经通了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。