websocket在springboot+vue中的使用教程
1、websocket在springboot中的一种实现
在java后台中,websocket是作为一种服务端配置,其配置如下
@Configuration publicclassWebSocketConfig{ @Bean(name="serverEndpointExporter") publicServerEndpointExportergetServerEndpointExporterBean(){ returnnewServerEndpointExporter(); } }
加入上面的配置之后就可以编辑自己的websocket实现类了,如下
@Component @ServerEndpoint(value="/messageSocket/{userId}") publicclassMessageWebSocket{ privatestaticfinalLoggerlogger=LoggerFactory.getLogger(MessageWebSocket.class); /** *静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。 */ privatestaticintonlineCount=0; /** *key:userIdvalue:sessionIds */ privatestaticConcurrentHashMap>userSessionMap=newConcurrentHashMap<>(); /** *concurrent包的线程安全Map,用来存放每个客户端对应的MyWebSocket对象。 */ privatestaticConcurrentHashMap websocketMap=newConcurrentHashMap<>(); /** *key:sessionIdvalue:userId */ privatestaticConcurrentHashMap sessionUserMap=newConcurrentHashMap<>(); /** *当前连接会话,需要通过它来给客户端发送数据 */ privateSessionsession; /** *连接建立成功调用的方法 **/ @OnOpen publicvoidonOpen(Sessionsession,@PathParam("userId")IntegeruserId){ System.out.println(applicationContext); try{ this.session=session; StringsessionId=session.getId(); //建立userId和sessionId的关系 if(userSessionMap.containsKey(userId)){ userSessionMap.get(userId).add(sessionId); }else{ ConcurrentLinkedQueue queue=newConcurrentLinkedQueue<>(); queue.add(sessionId); userSessionMap.put(userId,queue); } sessionUserMap.put(sessionId,userId); //建立sessionId和websocket引用的关系 if(!websocketMap.containsKey(sessionId)){ websocketMap.put(sessionId,this); addOnlineCount();//在线数加1 } }catch(Exceptione){ logger.error("连接失败"); Stringes=ExceptionUtils.getFullStackTrace(e); logger.error(es); } } /** *连接关闭调用的方法 */ @OnClose publicvoidonClose(){ StringsessionId=this.session.getId(); //移除userId和sessionId的关系 IntegeruserId=sessionUserMap.get(sessionId); sessionUserMap.remove(sessionId); if(userId!=null){ ConcurrentLinkedQueue sessionIds=userSessionMap.get(userId); if(sessionIds!=null){ sessionIds.remove(sessionId); if(sessionIds.size()==0){ userSessionMap.remove(userId); } } } //移除sessionId和websocket的关系 if(websocketMap.containsKey(sessionId)){ websocketMap.remove(sessionId); subOnlineCount();//在线数减1 } } /** *收到客户端消息后调用的方法 * *@parammessageStr客户端发送过来的消息 **/ @OnMessage publicvoidonMessage(StringmessageStr,Sessionsession,@PathParam("userId")IntegeruserId)throwsIOException{ } /** * *@paramsession *@paramerror当连接发生错误时的回调 */ @OnError publicvoidonError(Sessionsession,Throwableerror){ Stringes=ExceptionUtils.getFullStackTrace(error); logger.error(es); } /** *实现服务器主动推送 */ publicvoidsendMessage(Stringmessage,IntegertoUserId)throwsIOException{ if(toUserId!=null&&!StringUtil.isEmpty(message.trim())){ ConcurrentLinkedQueue sessionIds=userSessionMap.get(toUserId); if(sessionIds!=null){ for(StringsessionId:sessionIds){ MessageWebSocketsocket=websocketMap.get(sessionId); socket.session.getBasicRemote().sendText(message); } } }else{ logger.error("未找到接收用户连接,该用户未连接或已断开"); } } publicvoidsendMessage(Stringmessage,Sessionsession)throwsIOException{ session.getBasicRemote().sendText(message); } /** *获取在线人数 */ publicstaticsynchronizedintgetOnlineCount(){ returnonlineCount; } /** *在线人数加一 */ publicstaticsynchronizedvoidaddOnlineCount(){ MessageWebSocket.onlineCount++; } /** *在线人数减一 */ publicstaticsynchronizedvoidsubOnlineCount(){ MessageWebSocket.onlineCount--; } }
到此后台服务端的工作已经做好了,前端如何作为客户端进行连接呢,请继续往下看。。
为了实现断开自动重连,我们使用的reconnecting-websocket.js组件
//websocket连接实例 letwebsocket=null; //初始话websocket实例 functioninitWebSocket(userId){ //ws地址-->这里是你的请求路径 lethost=urlConfig.wsUrl+'messageSocket/'+userId; if('WebSocket'inwindow){ websocket=newReconnectingWebSocket(host); //连接错误 websocket.onerror=function(){ } //连接成功 websocket.onopen=function(){ } //收到消息的回调,e.data为收到的信息 websocket.onmessage=function(e){ } //连接关闭的回调 websocket.onclose=function(){ } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload=function(){ closeWebSocket(); } }else{ alert('当前浏览器不支持websocket') return; } } //关闭WebSocket连接 functioncloseWebSocket(){ websocket.close(); } //发送消息 functionsendMessage(message){ websocket.send(message); }
至此一个简易的完整的websocket已经完成了,具体功能可以依此为基本进行扩展。
总结
以上所述是小编给大家介绍的websocket在springboot+vue中的使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给大家留言,小编会及时回复大家的!