SpringBoot 创建webSocket服务端

我们已经有了 HTTP 协议，为什么还需要webSocket？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
如果想持续从服务的获取消息，则只能使用轮询或建立长连接的方法来实现，但是这样或浪费很多不必要的资源。
而webSocket则解决了这个问题，通信可由双方发起，只需要建立一次连接，服务的端就可以持续从服务端获得消息。主要用来做消息通知，消息推送等模块

使用springBoot创建webSocket,首先要注入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。要注意，如果使用独立的servlet容器，而不是直接使用springboot的内置容器，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。

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

}

接着是具体实现

//用法相当于Controller localhost:8080/wensocket
@ServerEndpoint(value = "/websocket")
@Component
public class WebSocket {
     //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
      private static int onlineCount = 0;

      //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
      private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();

      //与某个客户端的连接会话，需要通过它来给客户端发送数据
      private Session session;

      /**
       * 连接建立成功调用的方法
       * 连接时会自动调用
       */
      @OnOpen
      public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
        try {
          sendMessage("Hello world");
        } catch (IOException e) {
          System.out.println("IO异常");
        }
      }

      /**
       * 连接关闭调用的方法
       * 关闭时会自动调用
       */
      @OnClose
      public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
      }

      /**
       * 收到客户端消息后调用的方法
       *
       * @param message 客户端发送过来的消息
       * 客户端向服务端主动发送消息时调用
       */
      @OnMessage
      public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);

        //群发消息
        for (WebSocket item : webSocketSet) {
          try {
            item.sendMessage(message);
          } catch (IOException e) {
            e.printStackTrace();
          }
        }
      }

      /**
       * 发生错误时调用
       */
      @OnError
      public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
      }

      //向客户端推送消息
      public void sendMessage(String message) throws IOException {
        this.session.getAsyncRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
      }


      /**
       * 群发自定义消息
       * 可以在controller中调用该方法来实时推送消息
       */
      public static void sendInfo(String message) throws IOException {
        for (WebSocket item : webSocketSet) {
          try {
            item.sendMessage(message);
          } catch (IOException e) {
            continue;
          }
        }
      }

      public static synchronized int getOnlineCount() {
        return onlineCount;
      }

      public static synchronized void addOnlineCount() {
        WebSocket.onlineCount++;
      }

      public static synchronized void subOnlineCount() {
        WebSocket.onlineCount--;
      }
}

现在，webSocket已经创建完毕，那我们什么时候使用呢？
可以在客户端调用某个接口时，向客户端发送某些消息，

@RestController
@RequestMapping("/hello")
public class HelloController {
    //每次调用该接口，都会发送消息
    @RequestMapping("/test1")
    public String test() throws IOException{
        //调用webSocket发送消息
        WebSocket.sendInfo("nihao");
        return "test";
    }
}

接下来，我们如何在前端使用呢？
我这里使用的是微信小程序，如果是HTML等，api略有不同

var ws = wx.connectSocket({
      url: 'ws://192.168.0.105:8080/websocket'
    });
    console.log(wx)
    wx.onSocketOpen(function (res) {
      console.log('WebSocket连接已打开！')
    })
    wx.onSocketMessage(function (res) {
      console.log('收到服务器内容：' + res.data)
      //！！！即使跳转到其他页面，还是可以接收到服务器的信息
      //当信息服务某个条件是，触发相应事件，这个就需要自己设定了
      if (res.data == '2'){
        wx.showLoading({
          title: 'emmm',
        })
      }
    })