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对象。
*/
privatestaticConcurrentHashMapwebsocketMap=newConcurrentHashMap<>();
/**
*key:sessionIdvalue:userId
*/
privatestaticConcurrentHashMapsessionUserMap=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{
ConcurrentLinkedQueuequeue=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){
ConcurrentLinkedQueuesessionIds=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())){
ConcurrentLinkedQueuesessionIds=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中的使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给大家留言，小编会及时回复大家的！