WebSocket介绍以及netty对于WebSocket的支持

最新推荐文章于 2024-02-06 17:38:59 发布

aronykl

最新推荐文章于 2024-02-06 17:38:59 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/zw19910924/article/details/77434656

版权

Netty 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

1. 问题

可以看看这几个场景应当怎么实现：

网页聊天应用
扫码登录成功跳转、支付成功跳转
网页游戏需要的实时数据交互

这些场景都是浏览器与服务端之间的交互，我们最容易想到的就是通过http协议来实现浏览器与服务端之间的交互。但是http协议是基于请求响应的，也就是每次的交互都是客户端发送请求，服务端返回响应。如果是服务端需要向客户端推送数据，http协议就不能够办到了。http要想实现上面的场景，必须要通过轮训，也就是说客户端浏览器必须要不断地发送请求来获得服务端的状态。这样做存在两个问题，一是这种轮训的方式是有时延的，二是这种轮训请求每次都要传输“无用的”http头header信息，真正有用的信息是响应体，而这些头信息也是需要占用网络带宽的。这也是为什么WebSocket会出现的原因。

2. 什么是WebSocket？

WebSocket是Html5规范里面定义的一个协议，它是一种基于TCP的全双工的通讯协议，也就是说三次握手连接一旦建立，客户端和服务端就是一种平等的关系，客户端可以向服务端发送数据，而服务端也可以向客户端发送数据。通过前面的介绍，我们知道现有的http协议其实是存在一些问题的，请求必须是客户端发起，这就导致了服务端不能实时的想客户端推送数据。所以在HTML5里面就提出了WebSocket协议来满足这样的场景需求。

并且从Spring4开始，Spring提供了对于WebSocket的支持。详情可参考Spring的官方文档。

3. netty对于WebSocket的支持

下面是服务端代码：

public class WebSocketServer {

    public static void main(String[] args) throws Exception {
        EventLoopGroup bossGroup = new NioEventLoopGroup();
        EventLoopGroup workerGroup = new NioEventLoopGroup();

        try {
            ServerBootstrap serverBootstrap = new ServerBootstrap();
            serverBootstrap.group(bossGroup, workerGroup).channel(NioServerSocketChannel.class)
                    .handler(new LoggingHandler(LogLevel.INFO))
                    .childHandler(new WebSocketChannelInitializer());

            ChannelFuture channelFuture = serverBootstrap.bind(8899).sync();
            channelFuture.channel().closeFuture().sync();
        } finally {
            bossGroup.shutdownGracefully();
            workerGroup.shutdownGracefully();
        }
    }
}

public class WebSocketChannelInitializer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        ChannelPipeline pipeline = ch.pipeline();

        pipeline.addLast(new HttpServerCodec());
        pipeline.addLast(new ChunkedWriteHandler());
        pipeline.addLast(new HttpObjectAggregator(8192));
        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));

        pipeline.addLast(new TextWebSocketFrameHandler());
    }
}

public class TextWebSocketFrameHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {

    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        System.out.println("收到消息： " + msg.text());

        ctx.channel().writeAndFlush(new TextWebSocketFrame("服务器时间： " + LocalDateTime.now()));
    }

    @Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        System.out.println("handlerAdded: " + ctx.channel().id().asLongText());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
        System.out.println("handlerRemoved: " + ctx.channel().id().asLongText());
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
        cause.printStackTrace();
        ctx.close();
    }
}

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
</head>
<body>

    <script type="text/javascript">
        var socket;

        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8899/ws");
            socket.onmessage = function (event) {
                var ta = document.getElementById("responseText");
                ta.value = ta.value + "\n" + event.data;
            }

            socket.onopen = function (event) {
                var ta = document.getElementById("responseText");
                ta.value = "连接开启";
            }

            socket.onclose = function (event) {
                var ta = document.getElementById("responseText");
                ta.value = ta.value + "\n" + "连接关闭";
            }
        } else {
            alert("浏览器不支持WebSocket");
        }

        function send(message) {
            if (!window.WebSocket) {
                return;
            }

            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("连接尚未开启！");
            }

        }
    </script>

    <form onsubmit="return false;">
        <textarea name="message" style="width: 400px; height: 200px"></textarea>

        <input type="button" value="发送数据" onclick="send(this.form.message.value)">
        <h3>服务器输出：</h3>
        <textarea id="responseText" style="width: 400px; height: 300px"></textarea>
        <input type="button" onclick="javascript: document.getElementById('responseText').value=''" value="情况内容">
    </form>
</body>
</html>

下面来看看运行结果，运行前端页面：
这里写图片描述

打开调试，可以看到请求头和响应头中都有Upgrade:websocket，表示升级成了websocket协议通信。

前端发送数据，进行通信：
这里写图片描述

可以看到的是，这里发送两次数据并没有建立两次链接，而是使用同一个链接，而且通信是实时的，有区别于轮训的方式。这种采用长连接的方式，服务端也可以向客户端推送数据。

aronykl

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
WebSocket介绍以及netty对于WebSocket的支持

1. 问题可以看看这几个场景应当怎么实现：网页聊天应用扫码登录成功跳转、支付成功跳转网页游戏需要的实时数据交互这些场景都是浏览器与服务端之间的交互，我们最容易想到的就是通过http协议来实现浏览器与服务端之间的交互。但是http协议是基于请求响应的，也就是每次的交互都是客户端发送请求，服务端返回响应。如果是服务端需要向客户端推送数据，http协议就不能够办到了。http要想实现上面的场景，必
复制链接

扫一扫