header优化

config/dev.js

@@ -10,8 +10,8 @@ module.exports = {
   h5: {
     devServer: {
       //host: '0.0.0.0',
-      // host: '192.168.110.53',
+      host: '192.168.110.53',
-      host: '192.168.3.101',
+      // host: '192.168.3.101',
       port: 10086,
       // 设置代理来解决 H5 请求的跨域问题
       proxy: {

src/api/proto.js

@@ -6028,6 +6028,8 @@ export const api = $root.api = (() => {
          * @interface IBetRole
          * @property {number|null} [betMin] BetRole betMin
          * @property {number|null} [betMax] BetRole betMax
+         * @property {number|Long|null} [betTimeLimit] BetRole betTimeLimit
+         * @property {number|null} [betSecondLimit] BetRole betSecondLimit
          * @property {Array.<number>|null} [betOpts] BetRole betOpts
          */
 
@@ -6063,6 +6065,22 @@ export const api = $root.api = (() => {
          */
         BetRole.prototype.betMax = 0;
 
+        /**
+         * BetRole betTimeLimit.
+         * @member {number|Long} betTimeLimit
+         * @memberof api.BetRole
+         * @instance
+         */
+        BetRole.prototype.betTimeLimit = $util.Long ? $util.Long.fromBits(0,0,false) : 0;
+
+        /**
+         * BetRole betSecondLimit.
+         * @member {number} betSecondLimit
+         * @memberof api.BetRole
+         * @instance
+         */
+        BetRole.prototype.betSecondLimit = 0;
+
         /**
          * BetRole betOpts.
          * @member {Array.<number>} betOpts
@@ -6099,6 +6117,10 @@ export const api = $root.api = (() => {
                 writer.uint32(/* id 1, wireType 0 =*/8).int32(message.betMin);
             if (message.betMax != null && Object.hasOwnProperty.call(message, "betMax"))
                 writer.uint32(/* id 2, wireType 0 =*/16).int32(message.betMax);
+            if (message.betTimeLimit != null && Object.hasOwnProperty.call(message, "betTimeLimit"))
+                writer.uint32(/* id 9, wireType 0 =*/72).int64(message.betTimeLimit);
+            if (message.betSecondLimit != null && Object.hasOwnProperty.call(message, "betSecondLimit"))
+                writer.uint32(/* id 10, wireType 0 =*/80).int32(message.betSecondLimit);
             if (message.betOpts != null && message.betOpts.length) {
                 writer.uint32(/* id 13, wireType 2 =*/106).fork();
                 for (let i = 0; i < message.betOpts.length; ++i)
@@ -6147,6 +6169,14 @@ export const api = $root.api = (() => {
                         message.betMax = reader.int32();
                         break;
                     }
+                case 9: {
+                        message.betTimeLimit = reader.int64();
+                        break;
+                    }
+                case 10: {
+                        message.betSecondLimit = reader.int32();
+                        break;
+                    }
                 case 13: {
                         if (!(message.betOpts && message.betOpts.length))
                             message.betOpts = [];
@@ -6199,6 +6229,12 @@ export const api = $root.api = (() => {
             if (message.betMax != null && message.hasOwnProperty("betMax"))
                 if (!$util.isInteger(message.betMax))
                     return "betMax: integer expected";
+            if (message.betTimeLimit != null && message.hasOwnProperty("betTimeLimit"))
+                if (!$util.isInteger(message.betTimeLimit) && !(message.betTimeLimit && $util.isInteger(message.betTimeLimit.low) && $util.isInteger(message.betTimeLimit.high)))
+                    return "betTimeLimit: integer|Long expected";
+            if (message.betSecondLimit != null && message.hasOwnProperty("betSecondLimit"))
+                if (!$util.isInteger(message.betSecondLimit))
+                    return "betSecondLimit: integer expected";
             if (message.betOpts != null && message.hasOwnProperty("betOpts")) {
                 if (!Array.isArray(message.betOpts))
                     return "betOpts: array expected";
@@ -6225,6 +6261,17 @@ export const api = $root.api = (() => {
                 message.betMin = object.betMin | 0;
             if (object.betMax != null)
                 message.betMax = object.betMax | 0;
+            if (object.betTimeLimit != null)
+                if ($util.Long)
+                    (message.betTimeLimit = $util.Long.fromValue(object.betTimeLimit)).unsigned = false;
+                else if (typeof object.betTimeLimit === "string")
+                    message.betTimeLimit = parseInt(object.betTimeLimit, 10);
+                else if (typeof object.betTimeLimit === "number")
+                    message.betTimeLimit = object.betTimeLimit;
+                else if (typeof object.betTimeLimit === "object")
+                    message.betTimeLimit = new $util.LongBits(object.betTimeLimit.low >>> 0, object.betTimeLimit.high >>> 0).toNumber();
+            if (object.betSecondLimit != null)
+                message.betSecondLimit = object.betSecondLimit | 0;
             if (object.betOpts) {
                 if (!Array.isArray(object.betOpts))
                     throw TypeError(".api.BetRole.betOpts: array expected");
@@ -6253,11 +6300,24 @@ export const api = $root.api = (() => {
             if (options.defaults) {
                 object.betMin = 0;
                 object.betMax = 0;
+                if ($util.Long) {
+                    let long = new $util.Long(0, 0, false);
+                    object.betTimeLimit = options.longs === String ? long.toString() : options.longs === Number ? long.toNumber() : long;
+                } else
+                    object.betTimeLimit = options.longs === String ? "0" : 0;
+                object.betSecondLimit = 0;
             }
             if (message.betMin != null && message.hasOwnProperty("betMin"))
                 object.betMin = message.betMin;
             if (message.betMax != null && message.hasOwnProperty("betMax"))
                 object.betMax = message.betMax;
+            if (message.betTimeLimit != null && message.hasOwnProperty("betTimeLimit"))
+                if (typeof message.betTimeLimit === "number")
+                    object.betTimeLimit = options.longs === String ? String(message.betTimeLimit) : message.betTimeLimit;
+                else
+                    object.betTimeLimit = options.longs === String ? $util.Long.prototype.toString.call(message.betTimeLimit) : options.longs === Number ? new $util.LongBits(message.betTimeLimit.low >>> 0, message.betTimeLimit.high >>> 0).toNumber() : message.betTimeLimit;
+            if (message.betSecondLimit != null && message.hasOwnProperty("betSecondLimit"))
+                object.betSecondLimit = message.betSecondLimit;
             if (message.betOpts && message.betOpts.length) {
                 object.betOpts = [];
                 for (let j = 0; j < message.betOpts.length; ++j)

src/api/websocket.js

@@ -12,7 +12,7 @@ const { api } = proto
 
 const websocket = {
   conn: null,
-  status: 0, // 0未初始,1打开,2已认证,3关闭,4连接中 TODO 未连接
+  status: 0, // 0未初始,1打开,2已认证,3关闭,4连接中,5等待重连
   token: '',
   seq: 1, // 消息序号,递增
   offset: 0,
@@ -33,7 +33,7 @@ const websocket = {
       conn.close();
     }
   },
-  init: async function({ offset, opFail, opSuccess, opPathMap, nameOpMap }, { wsAddr }) { // callback 连接失败不一定调用
+  init: async function({ offset, opFail, opSuccess, opPathMap, nameOpMap }, { wsAddr }) {
     // this.status = 0;
     this.offset = offset || 0;
     this.opFail = opFail;
@@ -70,7 +70,6 @@ const websocket = {
           store.dispatch(connected());
           store.dispatch(setUserInfo(res.toJSON()));
           // console.log('identity success:', res)
-          try { callback(null) } catch(e) { console.error('error:', e); }
 
           // 依次发送等待连接的消息队列
           for (let i = 0; i < this.waitInitCalls.length; i++) {
@@ -92,34 +91,32 @@ const websocket = {
           showToast({title: err});
           console.error('连接认证失败:', err);
           reject('连接认证失败:' + err);
-
-          // try { callback(err) } catch(e) { console.error('ws identity callback error: ', e); }
         })
       }
 
       ws.onerror = e => {
         this.closeConn();
+        if (this.status !== 5) {
           this.status = 3;
-        store.dispatch(disconnect());
-
           clearInterval(this.reconnectInterval);
+        }
         clearInterval(this.pingInterval);
 
+        store.dispatch(disconnect());
         console.log('ws connect failed.');
         reject('ws connect failed!');
       }
 
       ws.onclose = e => {
-        this.status = 3;
+        clearInterval(this.pingInterval);
         store.dispatch(disconnect());
         console.log('ws connection close.')
 
-        clearInterval(this.pingInterval);
+        if (this.status !== 5) {
-
+          this.status = 3;
           if (this.conn === ws) {
             this.reconnectPolicy();
-          // this.reconnectInterval = setInterval(() => {
+          }
-          // }, Math.random() * 3 + 4);
         }
       }
 
@@ -188,28 +185,54 @@ const websocket = {
   },
   // 重新连接，
   reconnectPolicy() {
-    if (this.reconnectInterval < 0 && this.status === 4) {
+    if (this.status !== 3) {
+      if (isIn(this.status, 4, 5)) {
+        store.dispatch(connecting());
+      }
       return;
     }
-    this.reconnectInterval = setInterval(async () => {
+    this.status = 5;
+    store.dispatch(connecting());
+    const reconnect = async () => {
       console.log('ws reconnecting...');
       const token = getStorage('_t');
       if (!token) {
+        this.status = 3
         clearInterval(this.reconnectInterval);
         this.reconnectInterval = -1;
         // 无token跳转到login
         setTimeout(() => redirectTo({url: '/pages/login/login'}), 500);
         return;
       }
-      try {
+
       const res = await this.connect();
       console.log('reconnect success:', res);
+      // this.status = 3
       clearInterval(this.reconnectInterval);
       this.reconnectInterval = -1;
+
+      // try {
+      // }catch(err) {
+      //   console.log('reconnect error:', err);
+      // }
+    }
+    setTimeout(async () => {
+      try {
+        await reconnect();
       }catch(err) {
-        console.log('reconnect error:', err);
+        console.log('first reconnect failed try 3s later.', err);
+
+        // 后每3s重连下
+        this.reconnectInterval = setInterval(async () => {
+          try {
+            await reconnect();
+          }catch(err) {
+            console.log('reconnect failed.', err);
+          }
+        }, 10000);
       }
-    }, 3000);
+      // 首次重连随机时长 2-6s
+    }, (parseInt(Math.random() * 5) + 2) * 1000);
   },
   waitCall: {}, // 等待响应的 callback 列表
   runPingInterval() {
@@ -221,7 +244,7 @@ const websocket = {
           store.dispatch(setTTL(ttl));
         },
         err => {
-          console.log('ping error:', err)
+          console.error('ping error:', err);
         }
       );
     }, 10000);

src/components/title.jsx

@@ -3,7 +3,8 @@ import cnames from 'classnames';
 import { useSelector } from 'react-redux';
 import { View, Text, Image } from '@tarojs/components';
 import { Menu, MenuItem } from '@nutui/nutui-react-taro';
-import { navigateBack } from '@/utils/application';
+import { navigateBack, showToast } from '@/utils/application';
+import websocket from '@/api/websocket'
 import left from '@/assets/icon/left-1.svg';
 import './style/title.scss';
 
@@ -14,6 +15,14 @@ function Title(props) {
     ...state.user, ...state.conn
   }));
   const { leftSolt, leftIcon, onLeftClick, rightSolt } = props;
+
+  function reconnectNet(netStatus) {
+    if (netStatus === 1) {
+      console.log('reconnect net.')
+      websocket.reconnectPolicy();
+    }
+  }
+
   return (
     <View>
       <View className={props.bgColor ? "page-top bgc" : "page-top"}>
@@ -22,14 +31,18 @@ function Title(props) {
           <View className="title-left">
             {leftSolt || <Image className="icon" src={leftIcon || left} onClick={onLeftClick || navigateBack} />}
             {/*1已断开,2连接中,3已连接*/}
-            <View className="net-wrap">
+            <View className="net-wrap" onClick={reconnectNet.bind(null, netStatus)}>
               <View className={cnames('', {
                 'net-disconnect': netStatus === 1,
                 'net-connecting': netStatus === 2,
                 'net-connected': netStatus === 3,
                 'net-connected-high': netStatus === 3 && ttl > 500,
               })}></View>
-              <View className="ttl">{ttl + 'ms'}</View>
+              <View className="ttl">{
+                netStatus === 3 ? ttl + 'ms'
+                : netStatus === 2 ? "连接中..."
+                : netStatus === 1 ? "离线(点击重连)" : "未知状态"
+              }</View>
             </View>
           </View>
           <View className={props.colorStyle ? "title" : "title1"}>

src/pages/new_table/new_table.jsx

@@ -56,7 +56,7 @@ function NewTable() {
 
   return (
     <View className="nt">
-      <Title title={"Create New Table"} bgColor={true} />
+      <Title title={""} bgColor={true} />
       <View className="game-props">
         <View className="prop-wrap">
           <View className="prop-k"><Text>牌局类型：</Text></View>

src/store/conn.js

@@ -14,7 +14,7 @@ const connSlice = createSlice({
       state.status = 3;
     },
     disconnect: state => {
-      state.status = 4;
+      state.status = 1;
     },
     setTTL: (state, action) => {
       state.ttl = action.payload;