websocket在springboot+vue中的使用教程

1、websocket在springboot中的一种实现

　　在java后台中，websocket是作为一种服务端配置，其配置如下

@Configuration
public class WebSocketConfig {
　　
  @Bean(name="serverEndpointExporter")
  public ServerEndpointExporter getServerEndpointExporterBean(){
    return new ServerEndpointExporter();
  }
}

　　加入上面的配置之后就可以编辑自己的websocket实现类了，如下

@Component
@ServerEndpoint(value = "/messageSocket/{userId}")
public class MessageWebSocket {
  private static final Logger logger = LoggerFactory.getLogger(MessageWebSocket.class);
  
  private static int onlineCount = 0;
  
  private static ConcurrentHashMap> userSessionMap = new ConcurrentHashMap<>();
  
  private static ConcurrentHashMap websocketMap = new ConcurrentHashMap<>();
  
  private static ConcurrentHashMap sessionUserMap = new ConcurrentHashMap<>();
  
  private Session session;
  
  @onOpen
  public void onOpen(Session session, @PathParam("userId") Integer userId) {
    System.out.println(applicationContext);
    try {
      this.session = session;
      String sessionId = session.getId();
      //建立userId和sessionId的关系
      if(userSessionMap.containsKey(userId)) {
 userSessionMap.get(userId).add(sessionId);
      }else{
 ConcurrentlinkedQueue queue = new ConcurrentlinkedQueue<>();
 queue.add(sessionId);
 userSessionMap.put(userId, queue);
      }
      sessionUserMap.put(sessionId, userId);
      //建立sessionId和websocket引用的关系
      if(!websocketMap.containsKey(sessionId)){
 websocketMap.put(sessionId, this);
 addonlineCount();      //在线数加1
      }
    }catch (Exception e){
      logger.error("连接失败");
      String es = ExceptionUtils.getFullStackTrace(e);
      logger.error(es);
    }
  }
  
  @onClose
  public void onClose() {
    String sessionId = this.session.getId();
    //移除userId和sessionId的关系
    Integer userId = 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
    }
  }
  
  @onMessage
  public void onMessage(String messageStr, Session session, @PathParam("userId") Integer userId) throws IOException {
  }
  
  @onError
  public void onError(Session session, Throwable error) {
    String es = ExceptionUtils.getFullStackTrace(error);
    logger.error(es);
  }
  
  public void sendMessage(String message, Integer toUserId) throws IOException {
    if(toUserId != null && !StringUtil.isEmpty(message.trim())){
      ConcurrentlinkedQueue sessionIds = userSessionMap.get(toUserId);
      if(sessionIds != null) {
 for (String sessionId : sessionIds) {
   MessageWebSocket socket = websocketMap.get(sessionId);
   socket.session.getBasicRemote().sendText(message);
 }
      }
    }else{
      logger.error("未找到接收用户连接，该用户未连接或已断开");
    }
  }
  public void sendMessage(String message, Session session) throws IOException {
    session.getBasicRemote().sendText(message);
  }
   
  public static synchronized int getonlineCount() {
    return onlineCount;
  }
   
  public static synchronized void addonlineCount() {
    MessageWebSocket.onlineCount++;
  }
  
  public static synchronized void subonlineCount() {
    MessageWebSocket.onlineCount--;
  }
}

到此后台服务端的工作已经做好了，前端如何作为客户端进行连接呢，请继续往下看。。

为了实现断开自动重连，我们使用的reconnecting-websocket.js组件

//websocket连接实例
let websocket = null;
//初始话websocket实例
function initWebSocket(userId) {
  // ws地址 -->这里是你的请求路径
  let host = urlConfig.wsUrl + 'messageSocket/' + userId;
  if ('WebSocket' in window) {
    websocket = new ReconnectingWebSocket(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连接
function closeWebSocket() {
  websocket.close();
}
//发送消息
function sendMessage(message){
  websocket.send(message);
}

至此一个简易的完整的websocket已经完成了，具体功能可以依此为基本进行扩展。

总结

以上所述是小编给大家介绍的websocket在springboot+vue中的使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给大家留言，小编会及时回复大家的！