一文搞懂四种 WebSocket 使用方式，建议收藏！！！

• Github
  https://github.com/rookie-ricardo/spring-boot-learning-demo
• Gitee
  https://gitee.com/he-erduo/spring-boot-learning-demo
  

WS简介

1. 使用的资源更少：因为它的头更小。
2. 实时性更强：服务端可以通过连接主动向客户端推送消息。
3. 有状态：开启链接之后可以不用每次都携带状态信息。

1. 文本消息
2. 二进制消息
3. 分片消息（分片消息代表此消息是一个某个消息中的一部分，想想大文件分片）
4. 连接关闭消息
5. PING 消息
6. PONG 消息（PING的回复就是PONG）

J2EE方式

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

@Retention(RetentionPolicy.RUNTIME)
@Target({ElementType.TYPE})
public @interface ServerEndpoint {
    String value();

    String[] subprotocols() default {};

    Class<? extends Decoder>[] decoders() default {};

    Class<? extends Encoder>[] encoders() default {};

    Class<? extends Configurator> configurator() default Configurator.class;
}

@Component
@ServerEndpoint("/j2ee-ws/{msg}")
public class WebSocketServer {

    //建立连接成功调用
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "msg") String msg){
        System.out.println("WebSocketServer 收到连接: " + session.getId() + ", 当前消息：" + msg);
    }

    //收到客户端信息
    @OnMessage
    public void onMessage(Session session, String message) throws IOException {
        message = "WebSocketServer 收到连接：" + session.getId() +  "，已收到消息：" + message;
        System.out.println(message);
        session.getBasicRemote().sendText(message);
    }

    //连接关闭
    @OnClose
    public void onclose(Session session){
        System.out.println("连接关闭");
    }

}

1. @ServerEndpoint ：这里就像 RequestMapping 一样，放入一个 WS 服务器监听的 URL。
2. @OnOpen ：这个注解修饰的方法会在 WS 连接开始时执行。
3. @OnClose ：这个注解修饰的方法则会在 WS 关闭时执行。
4. @OnMessage ：这个注解则是修饰消息接受的方法，并且由于消息有文本和二进制两种方式，所以此方法参数上可以使用 String 或者二进制数组的方式，就像下面这样：

 @OnMessage
 public void onMessage(Session session, String message) throws IOException {

 }

 @OnMessage
 public void onMessage(Session session, byte[] message) throws IOException {

 }

@Configuration
public class WebSocketConfig {

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

Spring方式

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

@Component
public class SpringSocketHandle implements WebSocketHandler {

 @Override
 public void afterConnectionEstablished(WebSocketSession session) throws Exception {
     System.out.println("SpringSocketHandle, 收到新的连接: " + session.getId());
 }

 @Override
 public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
     String msg = "SpringSocketHandle, 连接：" + session.getId() +  "，已收到消息。";
     System.out.println(msg);
     session.sendMessage(new TextMessage(msg));
 }

 @Override
 public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
     System.out.println("WS 连接发生错误");
 }

 @Override
 public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
     System.out.println("WS 关闭连接");
 }

 // 支持分片消息
 @Override
 public boolean supportsPartialMessages() {
     return false;
 }
}

上面这个例子很好的展示了 WebSocketHandler 接口中的五个函数，通过名字我们就应该知道它具有什么功能了：

1. afterConnectionEstablished：连接成功后调用。
2. handleMessage：处理发送来的消息。
3. handleTransportError：WS 连接出错时调用。
4. afterConnectionClosed：连接关闭后调用。
5. supportsPartialMessages：是否支持分片消息。

1. BinaryMessage：二进制消息体
2. TextMessage：文本消息体
3. PingMessage：Ping 消息体
4. PongMessage：Pong 消息体

    
   public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        if (message instanceof TextMessage) {
            this.handleTextMessage(session, (TextMessage)message);
        } else if (message instanceof BinaryMessage) {
            this.handleBinaryMessage(session, (BinaryMessage)message);
        }
    }

    
            protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    }

    protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) throws Exception {
    }

    protected void handlePongMessage(WebSocketSession session, PongMessage message) throws Exception {
    }

@Configuration
@EnableWebSocket
public class SpringSocketConfig implements WebSocketConfigurer {

    @Autowired
    private SpringSocketHandle springSocketHandle;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(springSocketHandle, "/spring-ws").setAllowedOrigins("*");
    }
}

SocoketlO方式

        
        <dependency>
            <groupId>com.corundumstudio.socketio</groupId>
            <artifactId>netty-socketio</artifactId>
            <version>1.7.19</version>
        </dependency>

@Configuration
public class SocketIoConfig {

    @Bean
    public SocketIOServer socketIOServer() {
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();

        config.setHostname("127.0.0.1");
        config.setPort(8001);
        config.setContext("/socketio-ws");
        SocketIOServer server = new SocketIOServer(config);
        server.start();
        return server;
    }

    @Bean
    public SpringAnnotationScanner springAnnotationScanner() {
        return new SpringAnnotationScanner(socketIOServer());
    }
}

[ntLoopGroup-2-1] c.c.socketio.SocketIOServer : SocketIO server started at port: 8001

这就代表启动成功了，接下来就是要对 WS 消息做一些处理了：

@Component
public class SocketIoHandle {

    /**
     * 客户端连上socket服务器时执行此事件
     * @param client
     */
    @OnConnect
    public void onConnect(SocketIOClient client) {
        System.out.println("SocketIoHandle 收到连接：" + client.getSessionId());
    }

    /**
     * 客户端断开socket服务器时执行此事件
     * @param client
     */
    @OnDisconnect
    public void onDisconnect(SocketIOClient client) {
        System.out.println("当前链接关闭：" + client.getSessionId());
    }

    @OnEvent( value = "onMsg")
    public void onMessage(SocketIOClient client, AckRequest request, Object data) {
        System.out.println("SocketIoHandle 收到消息：" + data);
        request.isAckRequested();
        client.sendEvent("chatMsg", "我是 NettySocketIO 后端服务，已收到连接：" + client.getSessionId());
    }
}

    
  function changeSocketStatus() {
        let element = document.getElementById("socketStatus");
        if (socketStatus) {
            element.textContent = "关闭WebSocket";
            const socketUrl="ws://127.0.0.1:8001";
            socket = io.connect(socketUrl, {
                transports: ['websocket'],
                path: "/socketio-ws"
            });
            //打开事件
            socket.on('connect', () => {
                console.log("websocket已打开");
            });
            //获得消息事件
            socket.on('chatMsg', (msg) => {
                const serverMsg = "收到服务端信息：" + msg;
                pushContent(serverMsg, 2);
            });
            //关闭事件
            socket.on('disconnect', () => {
                console.log("websocket已关闭");
            });
            //发生了错误事件
            socket.on('connect_error', () => {
                console.log("websocket发生了错误");
            })
        }
    }

第四种方式？

        <dependency>
            <groupId>io.netty</groupId>
            <artifactId>netty-all</artifactId>
            <version>4.1.75.Final</version>
        </dependency>

public class WebSocketNettServer {
    public static void main(String[] args) {

        NioEventLoopGroup boss = new NioEventLoopGroup(1);
        NioEventLoopGroup work = new NioEventLoopGroup();

        try {
            ServerBootstrap bootstrap = new ServerBootstrap();
            bootstrap
                    .group(boss, work)
                    .channel(NioServerSocketChannel.class)
                    //设置保持活动连接状态
                    .childOption(ChannelOption.SO_KEEPALIVE, true)
                    .localAddress(8080)
                    .handler(new LoggingHandler(LogLevel.DEBUG))
                    .childHandler(new ChannelInitializer<SocketChannel>() {
                        @Override
                        protected void initChannel(SocketChannel ch) throws Exception {
                            ch.pipeline()
                                    // HTTP 请求解码和响应编码
                                    .addLast(new HttpServerCodec())
                                    // HTTP 压缩支持
                                    .addLast(new HttpContentCompressor())
                                    // HTTP 对象聚合完整对象
                                    .addLast(new HttpObjectAggregator(65536))
                                    // WebSocket支持
                                    .addLast(new WebSocketServerProtocolHandler("/ws"))
                                    .addLast(WsTextInBoundHandle.INSTANCE);
                        }
                    });

            //绑定端口号，启动服务端
            ChannelFuture channelFuture = bootstrap.bind().sync();
            System.out.println("WebSocketNettServer启动成功");

            //对关闭通道进行监听
            channelFuture.channel().closeFuture().sync();

        } catch (InterruptedException e) {
            e.printStackTrace();
        } finally {
            boss.shutdownGracefully().syncUninterruptibly();
            work.shutdownGracefully().syncUninterruptibly();
        }

    }
}

@ChannelHandler.Sharable
public class WsTextInBoundHandle extends SimpleChannelInboundHandler<TextWebSocketFrame> {

    private WsTextInBoundHandle() {
        super();
        System.out.println("初始化 WsTextInBoundHandle");
    }

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("WsTextInBoundHandle 收到了连接");
    }

    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {

        String str = "WsTextInBoundHandle 收到了一条消息, 内容为：" + msg.text();

        System.out.println(str);

        System.out.println("-----------WsTextInBoundHandle 处理业务逻辑-----------");

        String responseStr = "{\"status\":200, \"content\":\"收到\"}";

        ctx.channel().writeAndFlush(new TextWebSocketFrame(responseStr));
        System.out.println("-----------WsTextInBoundHandle 数据回复完毕-----------");
    }

    @Override
    public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {

        System.out.println("WsTextInBoundHandle 消息收到完毕");
        ctx.flush();
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
        System.out.println("WsTextInBoundHandle 连接逻辑中发生了异常");
        cause.printStackTrace();
        ctx.close();
    }
}

这里面的方法我都不说了，看名字就差不多知道了，主要是看一下这个类的泛型：TextWebSocketFrame，很明显这是一个 WS 文本消息的类，我们顺着它的定义去看发现它继承了 WebSocketFrame，接着我们去看它的子类：



一图胜千言，我想不用多说大家也都知道具体的类是处理什么消息了把，在上文的示例中我们是一定了一个文本 WS 消息的处理类，如果你想处理其他数据类型的消息，可以将泛型中的 TextWebSocketFrame 换成其他 WebSocketFrame 类就可以了。

总结

├─java
│  └─com
│      └─example
│          └─springwebsocket
│              │  SpringWebsocketApplication.java
│              │  TestController.java
│              │
│              ├─j2ee
│              │      WebSocketConfig.java
│              │      WebSocketServer.java
│              │
│              ├─socketio
│              │      SocketIoConfig.java
│              │      SocketIoHandle.java
│              │
│              └─spring
│                      SpringSocketConfig.java
│                      SpringSocketHandle.java
│
└─resources
    └─templates
            J2eeIndex.html
            SocketIoIndex.html
            SpringIndex.html