因业务需要,与后端进行websocket长连接通信。经过研究,决定使用sockjs-client和stompjs库,进行了二次封装。package.json版本:“sockjs-client”:“^1.5.1”,“stompjs”:“^2.3.3”,socketManager.js:从“sockjs-client”导入SockJS;从“stompjs”导入Stomp;导入来自'lodash'的lodash;functionsubscribeCallBack(data,subscribes){if(data){lettopic=data.headers.destination;让funces=subscribes.get(topic);funces.forEach((func)=>{func(数据);});}}letclientManager={client:null,connecting:false,//正在连接subscribes:newMap(),//订阅列表subscribe(topic,onMessage){if(this.client!=null&&this.client.connected==true){//连接状态console.log('添加订阅连接状态');如果(!this.subscribes.has(topic)){this.client.subscribe(topic,(data)=>subscribeCallBack(data,this.subscribes));this.subscribes.set(topic,[onMessage]);}else{让funces=this.subscribes.get(主题);funces.push(onMessage);}}else{//未连接状态console.log('添加订阅未连接状态');如果(!this.subscribes.has(topic)){this.subscribes.set(topic,[onMessage]);}else{letfunces=this.subscribes.get(topic);funces.push(onMessage);}}},subscribesAll(){console.log('订阅全部');如果(lodash.isEmpty(this.client)||this.client.connected!=true){返回;}让subscribes=this.subscribes;for(lettopicofsubscribes.keys()){this.client.subscribe(topic,(data)=>subscribeCallBack(data,subscribes));}},disconnect(){console.log('断连接');如果(lodash.isEmpty(this.client)||this.client.connected!=true){返回;}this.client.disconnect();this.subscribes=newMap();},connect(onSuccess,onDisconnect){尝试{if(this.connecting==true){console.log('connecting');返回;}this.connecting=true;if(lodash.isEmpty(this.client)||this.client.connected!=true){//未连接状态letsocket=newSockJS('/bond/notification',null,{timeout:6000});让stompClient=Stomp.over(socket);踩客户。调试=空;console.log('开始连接');stompClient.connect({},()=>{this.client=stompClient;console.log('连接成功');this.subscribesAll();//连接成功后开始订阅所有内容if(onSuccess!=null&&onSuccess!=undefined){onSuccess();};},(error)=>this.errorCallBack(error,onSuccess,onDisconnect));}elseif(this.client!=null&&this.client.connected==true){//连接状态直接调用回调onSuccess();}}catch(err){console.log('连接异常',err);}最后{this.connecting=false;}},errorCallBack(error,onSuccess,onDisconnect){console.log('连接失败');if(onDisconnect!=null&&onDisconnect!=undefined){onDisconnect();}setTimeout(()=>{//自动重连console.log('reconnecting');this.connect(onSuccess,onDisconnect);},10000);},};导出默认的clientManager;连接方式:useEffect(()=>{socketmanager.connect();return()=>{socketmanager.disconnect();};})订阅方式:useEffect(()=>{lettopic=`/topic/notification`;socketmanager.subscribe(topic,(data)=>{if(data){//dosomething}})},[])如果发现程序启动的时候报这个错误:可能是后台的时候contentType不对return,导致stream写入异常,修改后台即可解决
