uniapp和vue连接socket

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