liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化合约部分

master
vee 3 years ago
parent
3f2215968e
commit
685619c8a6
7 changed files with 816 additions and 422 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      main.js
  2. BIN
      pages/markets/.DS_Store
  3. 402
      pages/markets/index.vue
  4. 3
      pages/markets/kLine.vue
  5. 624
      pages/markets/trade.vue
  6. 15
      utils/axios.js
  7. 184
      utils/websocket.js

10
main.js
View File

@ -12,16 +12,22 @@ import ZH from './utils/language/zh_TW.js'
import VI from './utils/language/vi_VN.js' import VI from './utils/language/vi_VN.js'
import api from './utils/api.js' import api from './utils/api.js'
import constant from './utils/constant.js'
import websocket from './utils/websocket.js'
Vue.prototype.$api = api Vue.prototype.$api = api
Vue.prototype.$constant = constant
Vue.prototype.$websocket = websocket
// 自定义底部导航栏 // 自定义底部导航栏
import tabBar from 'components/tabBar/tabBar.vue' import tabBar from 'components/tabBar/tabBar.vue'
Vue.component('tab-bar', tabBar) Vue.component('tab-bar', tabBar)
window.wx = {}
Vue.use(uView); Vue.use(uView);
uni.$u.config.unit = 'rpx' uni.$u.config.unit = 'rpx'
Vue.use(VueI18n); Vue.use(VueI18n);
// #ifdef H5
window.wx = {}
// #endif
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: store.state.language, // 默认选择的语言 locale: store.state.language, // 默认选择的语言
// locale: 'en_US', // 默认选择的语言 // locale: 'en_US', // 默认选择的语言

BIN
pages/markets/.DS_Store
View File

Binary file not shown.

402
pages/markets/index.vue
View File

@ -1,167 +1,237 @@
<template> <template>
<view class="main"> <view class="main">
<!-- nav --> <!-- nav -->
<view class="nav-head"> <view class="nav-head">
<view class="left">{{ i18n.TrandingPair }}</view> <view class="left">{{ i18n.TrandingPair }}</view>
<view class="middle">{{ i18n.LatestPrice }}</view> <view class="middle">{{ i18n.LatestPrice }}</view>
<view class="right">{{ i18n.RiseAndfall }}</view> <view class="right">{{ i18n.RiseAndfall }}</view>
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<view class="coinList"> <view class="coinList">
<view class="coin" v-for="(item, index) in 20" :key="index" @click="goto(item)"> <view class="coin" v-for="(item, index) in symbolList" :key="index" @click="goto(item)">
<view class="icon"> <view class="icon">
<u-icon name="../../static/maskets/bye.png" size="40rpx" width="40rpx"></u-icon> <u-icon :name="BASE_URL+item.coinSymbol+'.png'" size="40rpx" width="40rpx"></u-icon>
</view> </view>
<view class="name">BTC/USDT</view> <view class="name">{{item.pair}}</view>
<view class="price">{{ 5145 * index * index * index }}</view> <view class="price">{{ item.price}}</view>
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> <view class="priceChange" :class="{ 'down': item.percent< 0 }">
</view> {{item.percent>=0?'+'+item.percent:item.percent}}%
</view> </view>
<!-- tabBar --> </view>
<tab-bar :selectActive="2"></tab-bar> </view>
</view> <!-- tabBar -->
</template> <tab-bar :selectActive="2"></tab-bar>
</view>
<script> </template>
export default {
name: 'markets', <script>
data() { export default {
return { name: 'markets',
data() {
} return {
}, BASE_URL: '',
onLoad() { symbolList: [],
websock: null,
}, websockId: null
onShow() { }
},
}, onLoad() {
onHide() { this.BASE_URL = this.$constant.BASE_URL + '/coins/';
}, this.getSymbolGroup();
computed: { this.initWebSocket()
i18n() { },
return this.$t('markets') onShow() {
}
}, },
methods: { onHide() {
/** this.unsubWebSocket();
* 跳转 },
*/ onUnload() {
goto(data) { this.unsubWebSocket();
uni.navigateTo({ },
url: '/pages/markets/trade', computed: {
}); i18n() {
}, return this.$t('markets')
} }
} },
methods: {
</script> getSymbolGroup() {
const symbolGroup = this.$api.symbolGroup({
<style lang="scss" scoped> "model": "contract"
.main { });
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 symbolGroup.then(res => {
this.symbolList = res.USDT
.nav-head {
overflow: hidden; })
position: fixed; .catch(e => {
top: 0rpx; console.log(e)
height: 112rpx; uni.showToast({
font-size: 24rpx; title: e,
color: #fff; icon: 'none',
display: flex; duration: 2500
justify-content: space-around; })
align-items: center; })
width: 750rpx;
z-index: 8;
background-color: #15141F;
border-bottom: 4rpx solid #323045; },
padding-top: 88rpx; subWebSocket() {
const data = {
} event: 'sub',
type: 'pairsgroup',
.coinList { id: this.websockId,
margin: 212rpx 32rpx 0; channel: ["market.pairsgroup"]
overflow: hidden; };
.coin { this.websock.webSocketSendMsg(data)
overflow: hidden; console.log("websocket发送", data);
position: relative; },
height: 64rpx; unsubWebSocket() {
padding: 12rpx 0; const data = {
event: 'un_sub',
type: 'pairsgroup',
.icon { id: this.websockId,
vertical-align: top; channel: ["market.pairsgroup"]
overflow: hidden; };
display: inline-block; this.websock.webSocketSendMsg(data)
box-sizing: border-box;
width: 64rpx; },
height: 64rpx; initWebSocket() {
background: #211F32;
border-radius: 20rpx;
padding: 12rpx; this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
}
.name { var that = this
display: inline-block; this.websock.getWebSocketMsg(data => {
width: 180rpx; console.log(data, 1111)
height: 100%; if (data.channel === 'conn') {
line-height: 64rpx; that.websockId = data.data
font-size: 28rpx; that.subWebSocket();
margin-left: 16rpx; } else if (data.channel === 'market.pairsgroup') {
} that.symbolList = data.data.USDT;
}
.price { });
display: inline-block; },
width: 180rpx;
height: 100%; /**
line-height: 64rpx; * 跳转
font-size: 28rpx; */
color: #A1A0A8; goto(data) {
} uni.setStorageSync('symbol', data);
uni.navigateTo({
.priceChange { url: '/pages/markets/trade',
position: absolute; });
right: 0; },
display: inline-block; }
width: 164rpx; }
height: 64rpx; </script>
border-radius: 20rpx;
line-height: 64rpx; <style lang="scss" scoped>
background-color: $mainColor; .main {
font-size: 24rpx; padding-bottom: 198rpx; // 避免底部TabBar盖住内容
text-align: right;
padding-right: 16rpx; .nav-head {
box-sizing: border-box; overflow: hidden;
position: fixed;
top: 0rpx;
&::before { height: 112rpx;
display: block; font-size: 24rpx;
position: absolute; color: #fff;
content: ''; display: flex;
background-image: url(../../static/maskets/ic_arrow_up.png); justify-content: space-around;
background-repeat: no-repeat; align-items: center;
background-size: contain; width: 750rpx;
width: 28rpx; z-index: 8;
height: 28rpx; background-color: #15141F;
top: 18rpx; border-bottom: 4rpx solid #323045;
left: 16rpx; padding-top: 88rpx;
}
}
&.down { .coinList {
background-color: $assistRed; margin: 212rpx 32rpx 0;
overflow: hidden;
&::before {
background-image: url(../../static/maskets/ic_arrow_down.png); .coin {
} overflow: hidden;
} position: relative;
} height: 64rpx;
} padding: 12rpx 0;
}
.icon {
vertical-align: top;
overflow: hidden;
} display: inline-block;
box-sizing: border-box;
width: 64rpx;
height: 64rpx;
background: #211F32;
border-radius: 20rpx;
padding: 12rpx;
}
.name {
display: inline-block;
width: 180rpx;
height: 100%;
line-height: 64rpx;
font-size: 28rpx;
margin-left: 16rpx;
}
.price {
display: inline-block;
width: 180rpx;
height: 100%;
line-height: 64rpx;
font-size: 28rpx;
color: #A1A0A8;
}
.priceChange {
position: absolute;
right: 0;
display: inline-block;
width: 164rpx;
height: 64rpx;
border-radius: 20rpx;
line-height: 64rpx;
background-color: $mainColor;
font-size: 24rpx;
text-align: right;
padding-right: 16rpx;
box-sizing: border-box;
&::before {
display: block;
position: absolute;
content: '';
background-image: url(../../static/maskets/ic_arrow_up.png);
background-repeat: no-repeat;
background-size: contain;
width: 28rpx;
height: 28rpx;
top: 18rpx;
left: 16rpx;
}
&.down {
background-color: $assistRed;
&::before {
background-image: url(../../static/maskets/ic_arrow_down.png);
}
}
}
}
}
}
</style> </style>

3
pages/markets/kLine.vue
View File

@ -342,7 +342,8 @@
top: '8%', top: '8%',
left: '50rpx', left: '50rpx',
right: '10rpx', right: '10rpx',
height: '60%', height: '60%',
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },
{ {

624
pages/markets/trade.vue
View File

@ -1,245 +1,381 @@
<template> <template>
<view class="main"> <view class="main">
<!-- nav --> <!-- nav -->
<navigation :showBack="false"> <navigation :showBack="false">
<view class="leftMenuBtn" @click="popupShow = true">{{ 'BTC/USDT' }}</view> <view class="leftMenuBtn" @click="popupShow = true">{{symbol.pair}}</view>
<view slot="right" class="right" @click="goto('kLine')"></view> <view slot="right" class="right" @click="goto('kLine')"></view>
</navigation> </navigation>
<view class="content"> <view class="content">
<view class="transactionSide"> <view class="transactionSide">
<transaction></transaction> <transaction></transaction>
</view> </view>
<view class="positionSide"> <view class="positionSide">
<positionList v-on:depthChange="depthChange"></positionList> <positionList v-on:depthChange="depthChange"></positionList>
</view> </view>
</view> </view>
<view class="orderList"> <view class="orderList">
<entrustOrderList></entrustOrderList> <entrustOrderList></entrustOrderList>
</view> </view>
<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true" <u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true"
bgColor="#15141F"> bgColor="#15141F">
<view class="popupContent"> <view class="popupContent">
<!-- nav --> <!-- nav -->
<view class="head"> <view class="head">
<text class="item">{{ i18n.TrandingPair }}</text> <text class="item">{{ i18n.TrandingPair }}</text>
<text class="center">{{ i18n.LatestPrice }}</text> <text class="center">{{ i18n.LatestPrice }}</text>
<text class="item">{{ i18n.RiseAndfall }}</text> <text class="item">{{ i18n.RiseAndfall }}</text>
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<view class="coinList"> <view class="coinList">
<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true" <scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true"
@touchmove.stop.prevent=""> @touchmove.stop.prevent="">
<view class="coin" v-for="(item, index) in 20" :key="index" @click="switchTo(item)"> <view class="coin" v-for="(item, index) in symbolList" :key="index" @click="switchTo(item)">
<view class="name">BTC/USDT</view> <view class="name">{{item.pair}}</view>
<view class="price">{{ 5145 * index * index * index }}</view> <view class="price">{{ item.price}}</view>
<view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view> <view class="priceChange" :class="{ 'down': item.percent< 0 }">
</view> {{item.percent>=0?'+'+item.percent:item.percent}}%
</scroll-view> </view>
</view>
</view> </scroll-view>
</view>
</u-popup> </view>
<!-- tabBar --> </view>
<tab-bar :selectActive="2" :isTarde="true"></tab-bar> </u-popup>
</view> <!-- tabBar -->
</template> <tab-bar :selectActive="2" :isTarde="true"></tab-bar>
</view>
<script> </template>
export default {
name: "trade", <script>
data() { export default {
return { name: "trade",
popupShow: false, data() {
}; return {
}, popupShow: false,
computed: { symbolList: [],
i18n() { symbol: null,
return this.$t("markets"); marketDetail:null,
}, bboList:[],
}, tradeList:[]
onLoad() { };
}, },
onShow() { }, computed: {
methods: { i18n() {
depthChange(e) { return this.$t("markets");
console.log(e); },
}, },
goto(page) { onLoad() {
let url = ''; this.symbol=uni.getStorageSync('symbol');
switch (page) { if(this.symbol!=null){
case 'kLine': this.getMarketDetail(this.symbol.symbol)
url = '/pages/markets/kLine' this.getBboList(this.symbol.symbol);
break; this.getTradeList(this.symbol.symbol);
default: }
break; this.getSymbolGroup();
} this.initWebSocket();
uni.navigateTo({ },
url, onShow() {
}); console.log(11111, uni.getStorageSync('symbol'));
}, },
/** methods: {
* 切换当前交易货币对 getTradeList(symbol){
*/ const tradeList = this.$api.tradeList({
switchTo(item) { "symbol": symbol
this.popupShow = false; });
} tradeList.then(res => {
this.tradeList = res
},
} })
</script> .catch(e => {
console.log(e)
<style lang="scss" scoped> uni.showToast({
.main { title: e,
padding-bottom: 198rpx; // 避免底部TabBar盖住内容 icon: 'none',
duration: 2500
.leftMenuBtn { })
width: 48rpx; })
height: 48rpx; },
position: absolute; getBboList(symbol){
left: 32rpx; const bboList = this.$api.bboList({
font-size: 24rpx; "symbol": symbol
background-image: url(../../static/maskets/menu.png); });
background-repeat: no-repeat; bboList.then(res => {
background-size: 48rpx; this.bboList = res
padding-left: 54rpx;
font-size: 34rpx; })
font-weight: normal; .catch(e => {
} console.log(e)
uni.showToast({
.right { title: e,
width: 48rpx; icon: 'none',
height: 48rpx; duration: 2500
position: absolute; })
right: 32rpx; })
font-size: 24rpx; },
background-image: url(../../static/home/ic_increase.png); getMarketDetail(symbol){
background-repeat: no-repeat; const marketDetail = this.$api.marketDetail({
background-size: 48rpx; "symbol": symbol
color: #FFBC1F; });
} marketDetail.then(res => {
this.marketDetail = res
.content { })
margin-top: 200rpx; .catch(e => {
padding-top: 20rpx; console.log(e)
padding-bottom: 40rpx; uni.showToast({
margin-bottom: 32rpx; title: e,
background: #211F32; icon: 'none',
display: flex; duration: 2500
})
.transactionSide { })
width: 444rpx; },
margin-left: 28rpx; getSymbolGroup() {
} const symbolGroup = this.$api.symbolGroup({
"model": "contract"
.positionSide { });
width: 242rpx; symbolGroup.then(res => {
margin-left: 36rpx; this.symbolList = res.USDT
} if(this.symbol==null){
this.symbol=this.symbolList[0]
}
}
})
.orderList {} .catch(e => {
console.log(e)
.popup { uni.showToast({
.popupContent { title: e,
width: 586rpx; icon: 'none',
font-size: 24rpx; duration: 2500
})
.head { })
margin-top: 108rpx;
color: #818197;
margin-left: 16rpx;
display: flex; },
initWebSocket() {
.center {
width: 190rpx;
padding-left: 30rpx; this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
font-size: 24rpx;
}
var that = this
.item { this.websock.getWebSocketMsg(data => {
font-size: 24rpx;
} if (data.channel === 'conn') {
} that.websockId = data.data
that.subpairsgroup();
.coinList { } else if (data.channel === 'market.pairsgroup') {
margin: 0rpx 32rpx 0; that.symbolList = data.data.USDT;
overflow: hidden; }else if (data.channel === 'market.pairsgroup') {
that.symbolList = data.data.USDT;
.coin { }
overflow: hidden; });
position: relative; },
height: 64rpx; //订阅交易对
padding: 12rpx 0; subpairsgroup(){
font-size: 24rpx; this.subWebSocket('pairsgroup',['market.pairsgroup'])
},
.name { subWebSocket(type,channel) {
display: inline-block; const data = {
width: 180rpx; event: 'sub',
height: 100%; type: type,
line-height: 64rpx; id: this.websockId,
font-size: 24rpx; channel: channel
} };
.price { this.websock.webSocketSendMsg(data)
display: inline-block; console.log("websocket发送", data);
width: 180rpx; },
height: 100%; unsubWebSocket(type,channel) {
line-height: 64rpx; const data = {
font-size: 24rpx; event: 'un_sub',
// text-align: center; type: type,
} id: this.websockId,
channel: channel
.priceChange { };
position: absolute; this.websock.webSocketSendMsg(data)
right: 0;
display: inline-block; },
width: 164rpx; depthChange(e) {
height: 64rpx; console.log(e);
border-radius: 20rpx; },
line-height: 64rpx; goto(page) {
background-color: $mainColor; let url = '';
font-size: 24rpx; switch (page) {
text-align: right; case 'kLine':
padding-right: 16rpx; url = '/pages/markets/kLine'
box-sizing: border-box; break;
default:
break;
&::before { }
display: block; uni.navigateTo({
position: absolute; url,
content: ''; });
background-image: url(../../static/maskets/ic_arrow_up.png); },
background-repeat: no-repeat; /**
background-size: contain; * 切换当前交易货币对
width: 28rpx; */
height: 28rpx; switchTo(item) {
top: 18rpx; this.popupShow = false;
left: 16rpx; this.symbol=item;
} }
},
&.down { }
background-color: $assistRed; </script>
&::before { <style lang="scss" scoped>
background-image: url(../../static/maskets/ic_arrow_down.png); .main {
} padding-bottom: 198rpx; // 避免底部TabBar盖住内容
}
} .leftMenuBtn {
} width: 48rpx;
} height: 48rpx;
} position: absolute;
left: 32rpx;
font-size: 24rpx;
background-image: url(../../static/maskets/menu.png);
} background-repeat: no-repeat;
background-size: 48rpx;
padding-left: 54rpx;
font-size: 34rpx;
font-weight: normal;
} }
.right {
width: 48rpx;
height: 48rpx;
position: absolute;
right: 32rpx;
font-size: 24rpx;
background-image: url(../../static/home/ic_increase.png);
background-repeat: no-repeat;
background-size: 48rpx;
color: #FFBC1F;
}
.content {
margin-top: 200rpx;
padding-top: 20rpx;
padding-bottom: 40rpx;
margin-bottom: 32rpx;
background: #211F32;
display: flex;
.transactionSide {
width: 444rpx;
margin-left: 28rpx;
}
.positionSide {
width: 242rpx;
margin-left: 36rpx;
}
}
.orderList {}
.popup {
.popupContent {
width: 586rpx;
font-size: 24rpx;
.head {
margin-top: 108rpx;
color: #818197;
margin-left: 16rpx;
display: flex;
.center {
width: 190rpx;
padding-left: 30rpx;
font-size: 24rpx;
}
.item {
font-size: 24rpx;
}
}
.coinList {
margin: 0rpx 32rpx 0;
overflow: hidden;
.coin {
overflow: hidden;
position: relative;
height: 64rpx;
padding: 12rpx 0;
font-size: 24rpx;
.name {
display: inline-block;
width: 180rpx;
height: 100%;
line-height: 64rpx;
font-size: 24rpx;
}
.price {
display: inline-block;
width: 180rpx;
height: 100%;
line-height: 64rpx;
font-size: 24rpx;
// text-align: center;
}
.priceChange {
position: absolute;
right: 0;
display: inline-block;
width: 164rpx;
height: 64rpx;
border-radius: 20rpx;
line-height: 64rpx;
background-color: $mainColor;
font-size: 24rpx;
text-align: right;
padding-right: 16rpx;
box-sizing: border-box;
&::before {
display: block;
position: absolute;
content: '';
background-image: url(../../static/maskets/ic_arrow_up.png);
background-repeat: no-repeat;
background-size: contain;
width: 28rpx;
height: 28rpx;
top: 18rpx;
left: 16rpx;
}
&.down {
background-color: $assistRed;
&::before {
background-image: url(../../static/maskets/ic_arrow_down.png);
}
}
}
}
}
}
}
}
</style> </style>

15
utils/axios.js
View File

@ -28,10 +28,11 @@ service.interceptors.request.use(
title: 'loading', title: 'loading',
mask: true mask: true
}) })
} }
if (config.url.indexOf('market') > -1) { if (config.url.indexOf('market') > -1) {
// #ifdef H5 // #ifdef H5
baseURL = constant.H5_MARKET_URL; config.baseURL = constant.H5_MARKET_URL;
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
config.baseURL = Vue.prototype.MARKET_URL; config.baseURL = Vue.prototype.MARKET_URL;
@ -138,19 +139,16 @@ service.interceptors.response.use(res => {
// console.log(res) // console.log(res)
// console.log(res.data) // console.log(res.data)
// console.log(res.data.data[0].nameAlias) // console.log(res.data.data[0].nameAlias)
if (res.success || res.errCode === 'USER.0017') { if (res.code===0||res.success) {
return res.data; return res.data;
} }
if(res.errMsg=='No customer service is online'&&res.errCode=='SYS.0012'){
return res;
}
else {
uni.showToast({ uni.showToast({
title: res.errMsg, title: res.errMsg,
icon: 'none', icon: 'none',
duration: 1500 duration: 1500
}) })
if (res.errCode === 'USER.0010') { if (res.errCode === 'SYS.0006') {
uni.setStorageSync('ticket',null); uni.setStorageSync('ticket',null);
uni.removeStorage({ uni.removeStorage({
key: 'logInfo', key: 'logInfo',
@ -178,7 +176,6 @@ service.interceptors.response.use(res => {
} }
uni.$emit('refreshQrCode') uni.$emit('refreshQrCode')
return Promise.reject(res.errMsg); return Promise.reject(res.errMsg);
}
}, error => { }, error => {
uni.hideLoading(); uni.hideLoading();
return Promise.reject(error) return Promise.reject(error)

184
utils/websocket.js
View File

@ -0,0 +1,184 @@
class WebSocketClass {
constructor(url) {
this.lockReconnect = false; // 是否开始重连
this.wsUrl = ""; // ws 地址
this.globalCallback = null; // 回调方法
this.userClose = false; // 是否主动关闭
this.createWebSocket(url);
}
createWebSocket(url) {
// #ifdef H5
if (typeof(WebSocket) === 'undefined') {
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
return false
}
// #endif
// #ifdef APP-PLUS
if (typeof(uni.connectSocket) === 'undefined') {
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
return false
}
// #endif
this.wsUrl = url;
try {
// 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】
// #ifdef H5
this.ws = new WebSocket(this.wsUrl);
this.initEventHandle();
// #endif
// #ifdef APP-PLUS
let that = this
this.ws = uni.connectSocket({
url: this.wsUrl,
success(data) {
console.log("websocket连接成功");
that.initEventHandle();
},
});
// #endif
} catch (e) {
this.reconnect(url);
}
}
// 初始化
initEventHandle() {
/**
* 监听WebSocket连接打开成功
*/
// #ifdef H5
this.ws.onopen = (event) => {
console.log("WebSocket连接打开");
};
// #endif
// #ifdef APP-PLUS
this.ws.onOpen(res => {
console.log('WebSocket连接打开');
});
// #endif
/**
* 连接关闭后的回调函数
*/
// #ifdef H5
this.ws.onclose = (event) => {
if (!this.userClose) {
this.reconnect(this.wsUrl); //重连
}
};
// #endif
// #ifdef APP-PLUS
this.ws.onClose(() => {
if (!this.userClose) {
this.reconnect(this.wsUrl); //重连
}
});
// #endif
/**
* 报错时的回调函数
*/
// #ifdef H5
this.ws.onerror = (event) => {
if (!this.userClose) {
this.reconnect(this.wsUrl); //重连
}
};
// #endif
// #ifdef APP-PLUS
this.ws.onError(() => {
if (!this.userClose) {
this.reconnect(this.wsUrl); //重连
}
});
// #endif
/**
* 收到服务器数据后的回调函数
*/
// #ifdef H5
this.ws.onmessage = (event) => {
this.globalCallback(JSON.parse(event.data))
};
// #endif
// #ifdef APP-PLUS
this.ws.onMessage(event => {
this.globalCallback(JSON.parse(event.data))
});
// #endif
}
// 关闭ws连接回调
reconnect(url) {
if (this.lockReconnect) return;
this.ws.close();
this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多
setTimeout(() => {
this.createWebSocket(url);
this.lockReconnect = false;
}, 1000);
}
// 发送信息方法
webSocketSendMsg(msg) {
// #ifdef H5
this.ws && this.ws.send(JSON.stringify(msg));
// #endif
// #ifdef APP-PLUS
this.ws && this.ws.send({
data: JSON.stringify(msg),
success() {
console.log("消息发送成功");
},
fail(err) {
console.log("关闭失败", err)
}
});
// #endif
}
// 获取ws返回的数据方法
getWebSocketMsg(callback) {
this.globalCallback = callback
}
// 关闭ws方法
closeSocket() {
if (this.ws) {
this.userClose = true;
this.ws.close({
success(res) {
console.log("关闭成功", res)
},
fail(err) {
console.log("关闭失败", err)
}
});
}
}
writeToScreen(massage) {
console.log(massage);
}
}
export default WebSocketClass;
Write Preview
Loading…
Cancel
Save