open
/
texas-poker-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

header优化

master
tangmingyou 3 years ago
parent
5a56315b76
commit
7ebadf7070
6 changed files with 128 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      config/dev.js
  2. 60
      src/api/proto.js
  3. 73
      src/api/websocket.js
  4. 19
      src/components/title.jsx
  5. 2
      src/pages/new_table/new_table.jsx
  6. 2
      src/store/conn.js

4
config/dev.js
Unescape View File

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

60
src/api/proto.js
Unescape View File

@ -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)

73
src/api/websocket.js
Unescape View File

@ -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();
this.status = 3;
store.dispatch(disconnect());
clearInterval(this.reconnectInterval);
if (this.status !== 5) {
this.status = 3;
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.conn === ws) {
this.reconnectPolicy();
// this.reconnectInterval = setInterval(() => {
// }, Math.random() * 3 + 4);
if (this.status !== 5) {
this.status = 3;
if (this.conn === ws) {
this.reconnectPolicy();
}
}
}
@ -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;
}
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 {
const res = await this.connect();
console.log('reconnect success:', res);
clearInterval(this.reconnectInterval);
this.reconnectInterval = -1;
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);

19
src/components/title.jsx
Unescape View File

@ -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"}>

2
src/pages/new_table/new_table.jsx
Unescape View File

@ -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>

2
src/store/conn.js
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save