因业务须要，与后端进行websocket长连贯通信，通过钻研，决定应用sockjs-client和stompjs库，并进行了二次封装。
package.json版本:
"sockjs-client": "^1.5.1","stompjs": "^2.3.3",socketManager.js:
import SockJS from 'sockjs-client';import Stomp from 'stompjs';import lodash from 'lodash';function subscribeCallBack(data, subscribes) { if (data) { let topic = data.headers.destination; let funces = subscribes.get(topic); funces.forEach((func) => { func(data); }); }}let clientManager = { client: null, connecting: false,//是否正在连接 subscribes: new Map(),//订阅列表 subscribe(topic, onMessage) { if (this.client != null && this.client.connected == true) { //已连贯状态 console.log('减少订阅 已连贯状态'); if (!this.subscribes.has(topic)) { this.client.subscribe(topic, (data) => subscribeCallBack(data, this.subscribes)); this.subscribes.set(topic, [onMessage]); } else { let funces = this.subscribes.get(topic); funces.push(onMessage); } } else { //未连贯状态 console.log('减少订阅 未连贯状态'); if (!this.subscribes.has(topic)) { this.subscribes.set(topic, [onMessage]); } else { let funces = this.subscribes.get(topic); funces.push(onMessage); } } }, subscribesAll() { console.log('订阅全副'); if (lodash.isEmpty(this.client) || this.client.connected != true) { return; } let subscribes = this.subscribes; for (let topic of subscribes.keys()) { this.client.subscribe(topic, (data) => subscribeCallBack(data, subscribes)); } }, disconnect() { console.log('断开连接'); if (lodash.isEmpty(this.client) || this.client.connected != true) { return; } this.client.disconnect(); this.subscribes = new Map(); }, connect(onSuccess, onDisconnect) { try { if (this.connecting == true) { console.log('正在连接中'); return; } this.connecting = true; if (lodash.isEmpty(this.client) || this.client.connected != true) {//未连贯状态 let socket = new SockJS('/bond/notification', null, { timeout: 6000 }); let stompClient = Stomp.over(socket); stompClient.debug = null; console.log('开始连贯'); stompClient.connect ({}, () => { this.client = stompClient; console.log('连贯胜利'); this.subscribesAll();//连贯胜利后开始订阅所有内容 if (onSuccess != null && onSuccess != undefined) { onSuccess(); }; }, (error) => this.errorCallBack(error, onSuccess, onDisconnect) ); } else if (this.client != null && this.client.connected == true) {//已连贯状态间接调用回调 onSuccess(); } } catch (err) { console.log('连贯异样', err); } finally { this.connecting = false; } }, errorCallBack(error, onSuccess, onDisconnect) { console.log('连贯失败'); if (onDisconnect != null && onDisconnect != undefined) { onDisconnect(); } setTimeout(() => {//主动重连 console.log('从新连贯中'); this.connect(onSuccess, onDisconnect); }, 10000); },};export default clientManager;连贯形式:
useEffect(()=>{ socketmanager.connect(); return () => { socketmanager.disconnect(); };})订阅形式:
useEffect(() => { let topic = `/topic/notification`; socketmanager.subscribe(topic, (data) => { if (data) { //do something } }) }, [])如果有发现程序启动的时候报这个谬误:
须要批改下connect中央,在申请胜利后再进行connect，以确保connect在程序启动实现之后再被调用，如果还是不行，把曾经关上过的程序页面关掉，清空浏览器缓存再试试。具体起因临时未知，有大佬晓得的通知一下，哈哈~
作者：点墨
版权：本文版权归作者所有
转载：欢送转载，但未经作者批准，必须保留此段申明；必须在文章中给出原文连贯；否则必究法律责任