成都创新互联网站制作重庆分公司

springboot+vue如何实现websocket配置

这篇文章主要讲解了springboot+vue如何实现websocket配置,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

按需定制网站可以根据自己的需求进行定制,成都网站设计、成都网站制作构思过程中功能建设理应排到主要部位公司成都网站设计、成都网站制作的运用实际效果公司网站制作网站建立与制做的实际意义

1.引入依赖


   org.springframework.boot
   spring-boot-starter-websocket
   1.3.5.RELEASE

2.配置ServerEndpointExporter

@Configuration
public class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter() {
    return new ServerEndpointExporter();
  }

}

这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。

3.创建websocket的ServerEndpoint端点

@Component
@ServerEndpoint("/socket")
public class WebSocketServer {
  /**
   * 全部在线会话 
   */
  private static Map onlineSessions = new ConcurrentHashMap<>();


  /**
   * 当客户端打开连接:1.添加会话对象 2.更新在线人数
   */
  @OnOpen
  public void onOpen(Session session) {
    onlineSessions.put(session.getId(), session);
    
  }

  /**
   * 当客户端发送消息:1.获取它的用户名和消息 2.发送消息给所有人
   * 

* PS: 这里约定传递的消息为JSON字符串 方便传递更多参数! */ @OnMessage public void onMessage(Session session, String jsonStr) { } /** * 当关闭连接:1.移除会话对象 2.更新在线人数 */ @OnClose public void onClose(Session session) { onlineSessions.remove(session.getId()); } /** * 当通信发生异常:打印错误日志 */ @OnError public void onError(Session session, Throwable error) { error.printStackTrace(); } /** * 公共方法:发送信息给所有人 */ public void sendMessageToAll(String jsonMsg) { onlineSessions.forEach((id, session) -> { try { session.getBasicRemote().sendText(jsonMsg); } catch (IOException e) { e.printStackTrace(); } }); } }

4.前端配置连接与接收消息