uniapp和vue连接socket
app.vue全局获取数据并存储在vuex<script>// 解压数据import pako from './hybrid/html/pako.js';export default {onLaunch: function() {uni.removeStorageSync('showUp')uni.removeStorageSync('rate')uni.removeStorageSy
·
app.vue全局获取数据并存储在vuex
app.vue
<script>
// 解压数据
import pako from './hybrid/html/pako.js';
export default {
onLaunch: function() {
uni.removeStorageSync('showUp')
uni.removeStorageSync('rate')
uni.removeStorageSync('coin')
uni.removeStorageSync('asset')
uni.removeStorageSync('deep')
uni.removeStorageSync('detail')
this.$i18n.locale = uni.getStorageSync('lang')||'zh'
// console.log(2222222,uni.getStorageSync('detail'))
// console.log(2222222,this.$store.state)
this.getRate()
this.connect()
if (uni.getStorageSync('token')) {
this.$store.dispatch('getAsset')
}
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
methods: {
connect() {
let _this = this
uni.connectSocket({
url: 'ws://api.huobiasia.vip/ws',
success() {
console.log('连接成功1111111111');
_this.getCoin()
},
fail() {
uni.showToast({
title: '网络连接失败，即将重新连接',
icon: 'none'
})
_this.connect()
},
});
},
// 获取币对信息
getCoin() {
let _this = this
uni.onSocketOpen((res) => {
console.log(1111111111, 'WebSocket连接已打开');
_this.$http('/api/getInstruments').then(data => {
let coin;
let query1;
data.forEach((item, i) => {
coin = item.instrument_id.split('-').join('').toLowerCase()
_this.$set(item, 'coin', coin)
query1 = {
sub: "market." + coin + ".depth.step0",
id: "id1"
}
uni.sendSocketMessage({
data: JSON.stringify(query1),
success() {
uni.onSocketMessage((res) => {
let msg = JSON.parse(pako.ungzip(res.data, {
to: 'string'
}))
if (msg.ping) {
uni.sendSocketMessage({
data: JSON.stringify({
pang: msg.ping
}),
})
} else {
_this.$store.commit('detail', msg)
}
});
},
fail(err) {
uni.showToast({
title: '发送失败',
icon: 'none'
})
}
});
let query2 = {
sub: "market." + coin + ".detail",
id: "id1"
}
uni.sendSocketMessage({
data: JSON.stringify(query2),
success() {
uni.onSocketMessage((res) => {
let msg = JSON.parse(pako.ungzip(res.data, {
to: 'string'
}))
// console.log(msg);
if (msg.ping) {
uni.sendSocketMessage({
data: JSON.stringify({
pang: msg.ping
}),
})
} else {
_this.$store.commit('detail', msg)
}
});
}
});
});
_this.$store.commit('saveCoin', data)
})
})
uni.onSocketError((res) => {
console.log(444444, 'WebSocket连接打开失败，请检查！');
_this.connect()
});
uni.onSocketClose(function(res) {
console.log('WebSocket 已关闭！');
// this.$store.commit('cleardata')
_this.connect()
});
},
// 获取汇率
getRate() {
this.$http('/api/getExchange').then(data => {
this.$store.commit('saveRate', parseFloat(data.exchange))
})
},
}
}
</script>
<style>
@import './static/iconfont/iconfont.css';
</style>
<style lang="scss">
@font-face {
font-family: "DIN";
src: url("/common/DIN/DIN-Medium.otf")
}
.DIN {
font-family: 'DIN' !important;
}
uni-page-body {
color: $gray !important;
}
// 自定义头部，状态栏盒子样式
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #fff;
}
// tab切换选中加下边框
.active-bb {
&::after {
content: '';
position: absolute;
width: 90%;
height: 5rpx;
background-color: $blue;
left: 5%;
bottom: -25rpx;
}
}
// filed
.u-field {
padding: 26rpx 34rpx !important;
.u-label-text {
font-weight: 700 !important;
}
}
// 提交按钮
.u-btn--primary {
background-color: $blue !important;
}
.u-size-default {
width: 682rpx !important;
height: 88rpx !important;
font-weight: 700 !important;
}
// cell组件右边箭头对其文字
.u-cell_title {
font-weight: 700 !important;
color: #333 !important;
}
.u-cell__right-icon-wrap {
height: 55rpx !important;
}
/*每个页面公共css */
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
@import './common/common.scss';
</style>
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import {
http
} from "../common/http.js"
export const store = new Vuex.Store({
state: {
userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"),
token: localStorage.getItem("token") || "",
rate: localStorage.getItem("rate") || 1, //汇率
coin: JSON.parse(localStorage.getItem("coin") || "[]"), //币值对
asset:
localStorage.getItem("asset") == "undefined"
? JSON.parse("{}")
: JSON.parse(localStorage.getItem("asset")), //个人资产
lang: localStorage.getItem("lang") || "zh", //语言
deep: JSON.parse(localStorage.getItem("deep") || "{}"), //深度数据
detail: JSON.parse(localStorage.getItem("detail") || "{}"), //详情数据
trade: JSON.parse(localStorage.getItem("trade") || "{}") //实时成交价数据
},
mutations: {
// soket深度和详情数据
detail(state, msg) {
if (msg.ch) {
if (msg.ch.includes('step0')) {
state.deep[msg.ch.split('.')[1]] = msg.tick
// console.log('深度',state.deep);
uni.setStorageSync('deep', state.deep)
} else if (msg.ch.includes('detail')) {
state.detail[msg.ch.split('.')[1]] = msg.tick
// console.log('详情',state.detail);
uni.setStorageSync('detail', state.detail)
}
}
// 每次打开app，state中的数据不会清除
// 为了解决后台币种减少的bug，看币值对不包含的币，删除属性
let arr=[];
let key='';
state.coin.forEach(item=>{
arr.push(item.coin)
})
Object.keys(state.detail).forEach(item=>{
if(!arr.includes(item)){
key = item
}
})
delete state.detail[key]
},
getUserInfo(state, info) {
console.log();
state.userInfo = info
state.token = state.userInfo.token
uni.setStorageSync('userInfo', state.userInfo)
uni.setStorageSync('token', state.userInfo.token)
},
savePrint(state, print) {
state.print = print
uni.setStorageSync('print', print)
},
saveLang(state, lang) {
state.lang = lang
uni.setStorageSync('lang', lang)
},
saveRate(state, rate) {
state.rate = rate
uni.setStorageSync('rate', rate)
},
saveCoin(state, coin) {
state.coin = coin
uni.setStorageSync('coin', coin)
},
saveAsset(state, asset) {
state.asset = asset
uni.setStorageSync('asset', asset)
},
exitLogin(state) {
state.userInfo = {}
state.token = ''
uni.setStorageSync('userInfo', state.userInfo)
uni.setStorageSync('token', state.userInfo.token)
},
},
getters: {},
// this.$store.dispatch('updateUserInfo')
actions: {
updateUserInfo({
commit
}) {
http('/api/userInfo').then(data => {
commit('getUserInfo', data)
})
},
getAsset({
commit
}) {
if (uni.getStorageSync('token')) {
http('/api/funds').then(data => {
commit('saveAsset', data)
})
}
},
}
})
vue中若需要连接连个不同的socket地址，可以创建多个socket对象
socket.js
import http from "../js/axios";
import pako from "pako";
import store from "../../store/index";
import vue from "vue";
let ws1;
let ws2;
export const connect = () => {
connect1();
connect2();
};
let connect1 = () => {
ws1 = new WebSocket("ws://api.huobiasia.vip/ws");
send1();
};
let connect2 = () => {
ws2 = new WebSocket("ws://8.210.219.206:2340");
send2();
};
const send1 = () => {
ws1.onopen = function() {
// Web Socket 已连接上，使用 send() 方法发送数据
// console.log(111111111, "已连接");
http.get("/api/getInstruments").then(data => {
let coin;
// eslint-disable-next-line no-unused-vars
let query1;
let query3;
data.forEach(item => {
coin = item.instrument_id
.split("-")
.join("")
.toLowerCase();
vue.set(item, "coin", coin);
store.commit("saveCoin", data);
query1 = {
sub: "market." + coin + ".depth.step0",
id: "id1"
};
query3 = {
sub: "market." + coin + ".trade.detail",
id: "id1"
};
ws1.send(JSON.stringify(query1));
ws1.send(JSON.stringify(query3));
ws1.onmessage = res => {
// console.log("blob类型数据: " + res.data); //blob
let reader = new FileReader();
reader.readAsArrayBuffer(res.data, "utf-8");
reader.onload = () => {
// console.log("blob转ArrayBuffer数据类型", reader.result);
// 对数据进行解压
let msg = JSON.parse(
pako.ungzip(reader.result, {
to: "string"
})
);
// console.log("ArrayBuffer转字符串", msg);
if (msg.ping) {
ws1.send(JSON.stringify({ pang: msg.ping }));
} else {
store.commit("detail", msg);
}
};
};
});
});
};
ws1.onclose = function() {
// 关闭 websocket
console.log("连接已关闭...");
connect1();
};
};
const send2 = () => {
ws2.onopen = function() {
http.get("/api/getInstruments").then(data => {
let query2;
// let query3;
data.forEach(item => {
query2 = "market.subscribe,spot/candle86400s:" + item.instrument_id;
ws2.send(query2);
ws2.onmessage = data => {
if (data.data == "pong") {
// ws2.send("ping");
} else {
let msg = JSON.parse(data.data);
if (msg.market) {
store.commit("detail", msg);
}
}
};
});
});
};
ws2.onclose = function() {
// 关闭 websocket
console.log("连接已关闭...");
connect();
};
};
export const close = () => {
ws1.close();
ws2.close();
};
在main.js引入并调用connect()
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献27条内容
所有评论(0)