diff --git a/config/dev.js b/config/dev.js
index 4809d85..6b96c44 100644
--- a/config/dev.js
+++ b/config/dev.js
@@ -10,8 +10,8 @@ module.exports = {
h5: {
devServer: {
//host: '0.0.0.0',
- host: '192.168.110.53',
- // host: '192.168.3.104',
+ // host: '192.168.110.53',
+ host: '192.168.3.101',
port: 10086,
// 设置代理来解决 H5 请求的跨域问题
proxy: {
diff --git a/src/api/websocket.js b/src/api/websocket.js
index 0a97f53..fe6aeca 100644
--- a/src/api/websocket.js
+++ b/src/api/websocket.js
@@ -25,6 +25,7 @@ const websocket = {
msgListener: {}, // {op: func}
waitInitCalls: [],
reconnectInterval: -1,
+ pingInterval: -1,
closeConn() {
if (this.conn) {
const conn = this.conn;
@@ -100,6 +101,10 @@ const websocket = {
this.closeConn();
this.status = 3;
store.dispatch(disconnect());
+
+ clearInterval(this.reconnectInterval);
+ clearInterval(this.pingInterval);
+
console.log('ws connect failed.');
reject('ws connect failed!');
}
@@ -109,6 +114,8 @@ const websocket = {
store.dispatch(disconnect());
console.log('ws connection close.')
+ clearInterval(this.pingInterval);
+
if (this.conn === ws) {
this.reconnectPolicy();
// this.reconnectInterval = setInterval(() => {
@@ -124,13 +131,19 @@ const websocket = {
console.error('unknow res op:', wrap.op)
return
}
- const res = proto[opPath[0]][opPath[1]].decode(wrap.body)
+ const type = proto[opPath[0]][opPath[1]];
+ const res = type.decode(wrap.body)
// const res = api.ResIdentity.decode(wrap.body)
console.log('res msg:', res)
if (wrap.reqMs > 0) {
const ttl = Date.now() - wrap.reqMs;
store.dispatch(setTTL(ttl));
// console.log('ping:', ttl + "ms")
+
+ // 向后延迟10s -> ping
+ if (type !== api.Pong) {
+ this.runPingInterval();
+ }
}
if (wrap.seq !== 0) {
@@ -199,6 +212,20 @@ const websocket = {
}, 3000);
},
waitCall: {}, // 等待响应的 callback 列表
+ runPingInterval() {
+ clearInterval(this.pingInterval);
+ this.pingInterval = setInterval(async () => {
+ this.send(api.Ping.create({ms: Date.now()}),
+ pong => {
+ const ttl = Date.now() - pong.pingMs;
+ store.dispatch(setTTL(ttl));
+ },
+ err => {
+ console.log('ping error:', err)
+ }
+ );
+ }, 10000);
+ },
send(msg, resCall, errCall) {
window.msg = msg;
// 不是认证消息且连接未认证，将请求放到等待队列
diff --git a/src/app.js b/src/app.js
index 611f0f5..9a68df5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -85,10 +85,10 @@ class App extends Component {
} else {
// 尝试连接 websocket
Promise.all([fetchOpMap(), fetchRouteWs()])
- .then(([opMap, wsRes]) => {
- // console.log('token', token, opMap, wsRes)
- websocket.init(token, opMap.data, wsRes.data);
- window.websocket = websocket;
+ .then(async ([opMapRes, wsRes]) => {
+ const res = await websocket.init(opMapRes.data, wsRes.data);
+ console.log('ws identity success:', res)
+ // window.websocket = websocket;
setTimeout(() => redirectTo({url: '/pages/lobby/lobby'}), 500);
})
.catch(err => {
diff --git a/src/assets/icon/coin-3.svg b/src/assets/icon/coin-3.svg
new file mode 100644
index 0000000..893f042
--- /dev/null
+++ b/src/assets/icon/coin-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/style/title.scss b/src/components/style/title.scss
index dc99533..058723a 100644
--- a/src/components/style/title.scss
+++ b/src/components/style/title.scss
@@ -12,24 +12,96 @@
}
.page-title {
- padding: 0 32px;
+ padding: 0 14px;
height: 46px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
-
+ position: relative;
+ .title-left {
+ display: flex;
+ justify-content: flex-start;
+ }
.icon {
width: 34px;
height: 30px;
// font-size: 40px;
}
+ .net-wrap {
+ display: flex;
+ align-items: center;
+ margin-left: 12px;
+ }
+ .net-disconnect,.net-connecting,.net-connected {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background-color: #f40;
+ }
+ .net-disconnect {
+ background-color: #F64B4B;
+ }
+ .net-connecting {
+ background-color: #99ADCB;
+ }
+ .net-connected {
+ background-color: #1BCE7D;
+ }
+ .net-connected-high {
+ background-color: #EED87D;
+ }
+ .ttl {
+ margin-left: 4px;
+ font-weight: normal;
+ font-size: 12px;
+ }
- .title {
+ .title,.title1 {
font-size: 18px;
- color: #ffffff;
+ color: #000;
+ // align-self: center;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: -1;
+ text-align: center;
+ line-height: 46px;
+ }
+ .title-right {
+ display: flex;
+ }
+ .profile {
+ margin-right: 8px;
+ }
+ .username {
+ font-size: 12px;
+ text-align: right;
+ color: #3D3D3D;
+ font-weight: bold;
+ font-weight: normal;
+ margin-top: 0px;
+ line-height: 28px;
+ }
+ .balance-wrap {
+ font-weight: bold;
+ color: #EE914E;
+ font-size: 12px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ line-height: 14px;
+ }
+ .balance-icon {
+ height: 15px;
+ width: 15px;
+ }
+ .balance {
+ margin-left: 2px;
}
-
.title-avatar-wrap {
width: 48px;
height: 48px;
@@ -44,10 +116,6 @@
border-radius: 50%;
margin-top: 2px;
}
- .username {
- font-size: 12px;
- font-weight: normal;
- }
}
}
diff --git a/src/components/title.jsx b/src/components/title.jsx
index 95343dd..75c087d 100644
--- a/src/components/title.jsx
+++ b/src/components/title.jsx
@@ -1,30 +1,54 @@
-import React from 'react'
-import { View, Text, Image } from '@tarojs/components'
+import React from 'react';
+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 left from '@/assets/icon/left-1.svg'
-import './style/title.scss'
+import { navigateBack } from '@/utils/application';
+import left from '@/assets/icon/left-1.svg';
+import './style/title.scss';
-import { useSelector } from 'react-redux'
+import coinIcon from '@/assets/icon/coin-3.svg'
function Title(props) {
- const {username, nickname, avatar, defaultAvatar} = useSelector(state => state.user);
+ const {username, nickname, avatar, defaultAvatar, balance, status: netStatus, ttl} = useSelector(state => ({
+ ...state.user, ...state.conn
+ }));
const { leftSolt, leftIcon, onLeftClick, rightSolt } = props;
return (
{/* */}
- {leftSolt || }
+
+ {leftSolt || }
+ {/*1已断开,2连接中,3已连接*/}
+
+ 500,
+ })}>
+ {ttl + 'ms'}
+
+
- {username}
{props.title}
- {
- rightSolt ||
-
+
+
+ {username}
+
+
+ {balance}
+
- }
+ {
+ rightSolt ||
+
+
+ }
+
{props.topNull ? '' : }
diff --git a/src/pages/lobby/lobby.jsx b/src/pages/lobby/lobby.jsx
index 38e81cb..1cfe377 100644
--- a/src/pages/lobby/lobby.jsx
+++ b/src/pages/lobby/lobby.jsx
@@ -84,7 +84,7 @@ class Lobby extends Component {
return (
- {