SpringBoot整合WebSocket

maven依赖

<dependency>  
     <groupId>org.springframework.boot</groupId>  
     <artifactId>spring-boot-starter-websocket</artifactId>  
</dependency> 

WebSocketServer

因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个

ws协议的Controller直接@ServerEndpoint("/websocket")、: 请求路径websocket

@Component启用即可
然后在里面实现@OnOpen,@onClose,@onMessage等方法

配置类

应该不需要该注解 @EnableWebSocket

@Configuration
public class WebSocketConfig {  
 /**
  * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }  
} 

服务端

1链接成功

2接收到服务端信息

3点击发送按钮给服务器发送消息

4.浏览器向服务端发送消息会调用

5.点击关闭按钮

6.点击关闭会调用

@ServerEndpoint("/websocket/{id}")
@Component
@Slf4j
public class EvaluationServer {

    /**
     *  静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     * @date 2019/7/3 9:25
    */
    private static int onlineCount = 0;
    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     * @date 2019/7/3 9:26
    */
    private Session session;
    /**
     * 使用map对象，便于根据id来获取对应的WebSocket
     * @date 2019/7/3 9:26
    */
    private static ConcurrentHashMap<String,EvaluationServer> websocketList = new ConcurrentHashMap<>();
    /**
     *  接收id
     * @date 2019/7/3 9:27
    */
    private String id="";
    
    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session,@PathParam("id") String id) throws IOException {
        this.session = session;
        if(StringUtils.isEmpty(id)){
            log.error("请输入窗口号！！！！！！！！！！！！！！！！");
            return;
        }else{
            try {
                if(websocketList.get(id) == null){
                    this.id= id;
                    websocketList.put(id,this);
                    addOnlineCount();           //在线数加1
                    log.info("有新窗口开始监听:{},当前窗口数为{}",id,getOnlineCount());
                }else{
                    session.getBasicRemote().sendText("已有相同窗口，请重新输入不同窗口号");
                    CloseReason closeReason = new CloseReason(CloseReason.CloseCodes.NORMAL_CLOSURE,"相同窗口");
                    session.close(closeReason);
                }
            }catch (IOException e){
                e.printStackTrace();
            }
        }
        if(session.isOpen()){
            String jo = JSON.toJSONString(ApiReturnUtil.success());
            session.getBasicRemote().sendText(jo);
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if(websocketList.get(this.id)!=null){
            websocketList.remove(this.id);
            subOnlineCount();           //在线数减1
            log.info("有一连接关闭！当前在线窗口为：{}",getOnlineCount());
        }
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到来自窗口{}的信息:{},会话ID:",id,message,session.getId());
        if(StringUtils.isNotBlank(message)){
            //解析发送的报文
            Map<String,Object> map = JSON.parseObject(message, Map.class);
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 服务器指定推送至某个客户端
     * @param message
    
     * @return void
    */
    private void sendMessage(String message) throws IOException {
       //服务器向客户端发送消息
        this.session.getBasicRemote().sendText(message);
    }


    /**
     * 发送给指定 浏览器
     * @ param message
     * @param id
     * @return void
    */
    public static void sendInfo(String message,@PathParam("id") String id) throws IOException {
        if(websocketList.get(id) == null){
            log.error("没有窗口号！！！！！！！！！");
            return;
        }
        websocketList.forEach((k,v)->{
            try {
                //这里可以设定只推送给这个id的，为null则全部推送
                if(id==null) {
                    v.sendMessage(message);
                }else if(k.equals(id)){
                    log.info("推送消息到窗口:{}，推送内容: {}",id,message);
                    v.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
                log.info("找不到指定的 WebSocket 客户端：{}",id);
            }
        });
    }

    private synchronized int getOnlineCount() {
        return onlineCount;
    }

    private synchronized void addOnlineCount() {
        onlineCount++;
    }

    private synchronized void subOnlineCount() {
        onlineCount--;
    }

    public static synchronized ConcurrentHashMap<String,EvaluationServer> getWebSocketList(){
        return websocketList;
    }
}

前端页面

在页面用js代码调用socket，当然，太古老的浏览器是不行的，一般新的浏览器或者谷歌浏览器是没问题的。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
    
      <script type="text/javascript">
         function WebSocketTest() {
         //判断浏览器支不支持WebSocket
              if ("WebSocket" in window){
               alert("您的浏览器支持 WebSocket!");
               // 打开一个 web socket,建立链接
               var ws = new WebSocket("ws://127.0.0.1:8080/websocket/1");
                
               ws.onopen = function(){
                  // Web Socket 已连接上，触发此方法,使用 send() 方法发送数据
                  ws.send("发送到服务端数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt)  { 
                  var received_msg = evt.data;
                  alert(received_msg)
                  alert("数据已接收到服务短发送来的消息...");
               };
                
               ws.onclose = function(){ 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };


            }else{
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
       ws.close();
    }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>