[网络协议]VUE刷新后websocket/walletconnect事件失效

原因就是页面刷新后页面数据都会重建导致的，数据重建那么你的对象都是一个全新的对象，如果此时websocket服务器或walletconnect钱包断开链接，回调会调用之前那个对象的事件。从而导致页面中的事件失效

以walletconnect为例子：

import Web3 from "web3"
import WalletConnectProvider from "@walletconnect/web3-provider"
import * as api from '@/api/auth.js';
import * as userAPI from '@/api/user.js';

import {
	SetItem,
	RemoveItem
} from '@/utils/auth';
const InfuraId = "774b1e4252de48c3997d66ac5f5078d8";
export default {
	provider: null,
	web3: null,
	//显示二维码
	async showQrcode() {
		if (typeof WalletConnectProvider === 'undefined') {
			return;
		}
		this.provider = new WalletConnectProvider({
			infuraId: InfuraId,
		});
		//获取钱包链接
		this.connect(this.provider);
	},
	async connect(provider){
		this.provider = provider;
		let that = this;
		await provider.enable().then(res => {
			//封装web3对象
			that.web3 = new Web3(provider);
			//初始化事件
			that.init(provider)
			//登录
			that.login(res[0]);
		}).catch(err => {
			console.log(err)
		})
	},
	async login(walletAddress) {
		api.walletLogin({
			"walletAddress": walletAddress
		}).then(res => {
			//获取token
			SetItem("V-Token", res.data);
			//获取用户信息
			userAPI.info().then(res => {
				SetItem("loginUser", res.data);
			})
		});
	},
	/**
	 * 链接建立成功
	 */
	async init(provider) {
		console.log("初始化")
		provider.on("accountsChanged", (accounts) => {
			console.log("accounts", accounts)
			provider.close() //关闭二维码
		})
		provider.on("chainChanged", (chainId) => {
			console.log("chainId", chainId)
		})
		provider.on("networkChanged", (networkId) => {
			console.log("networkId", networkId)
		})
		provider.on("disconnect", (code, reason) => {
			console.log("disconnect", code, reason)
			RemoveItem("V-Token");
			RemoveItem("loginUser");
		})
	},
	async getAccounts() {
		//  Get Accounts 获取帐户
		return await this.web3.eth.getAccounts()
		// console.log(accounts)
		// //  Get Chain Id 获取链 ID
		// const chainId = await web3.eth.getChainId()
		// console.log(chainId)
		// //  Get Network Id 获取网络 ID
		// const networkId = await web3.eth.net.getId()
		// console.log(networkId)
		// // Send Transaction 发送交易
		// const txHash = await web3.eth.sendTransaction()
		// console.log(txHash)
		// // Sign Transaction 签署交易
		// const signedTx = await web3.eth.signTransaction()
		// console.log(signedTx)
		// // Sign Message 签名留言
		// const signedMessage = await web3.eth.sign()
		// console.log(signedMessage)
		// // Sign Typed Data 签署类型的数据
		// const signedTypedData = await web3.eth.signTypedData()
		// console.log(signedTypedData)
		// // Send JSON RPC requests 发送JSON RPC请求
		// const result = await provider.request()
		// console.log(result)
	}

}

上述代码通过一个showQrcode创建与walletconnect的链接并监听此链接的状态，websocket类似。

页面刷新后如果钱包端断开链接，事件就会不执行。websocket类似。

那么只需要在app.vue重建链接即可，websocket类似。

<template>
	<div id="app">
		<div id="nav">
			<router-view />
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {}
		},
		created() {
			console.log("页面刷新")
			//如果缓存中链接存在 就每次刷新页面重新建立链接
			if(this.$GetItem("walletconnect")){
				this.$web3.showQrcode();
			}
		}
	}
</script>

就可以解决，虽然解决很简单，重要的是思路，小改变解决大麻烦