聊天室 Chat Room V1.0 （SpringBoot + Netty + H5 + WebSocket + 原生JS）

L神0000000000

已于 2022-08-17 14:25:44 修改

阅读量416

点赞数 2

分类专栏： Web 文章标签： spring boot netty html5 websocket js

于 2020-12-04 01:31:11 首次发布

本文链接：https://blog.csdn.net/qq_30784303/article/details/110579322

版权

本文档介绍了Chat Room V1.0的开发过程，该聊天室具备多人在线聊天、在线状态显示、心跳检测和断网重连等功能。采用的技术栈包括SpringBoot、Netty、HTML5和原生JavaScript。详细内容涵盖了环境配置、服务端（SpringBoot和Netty）与客户端（H5和WebSocket）的源码实现。

摘要由CSDN通过智能技术生成

1.Chat Room 展示

2.Chat Room 简介

本聊天室Chat Room为一款多人在线聊天产品，发布V1.0版本，包含多人在线聊天、在线人数、在线状态、心跳检测、断网重连等功能，业务及技术追求纯净简洁设计理念，ON THE MOVE~

3.Chat Room 开发

环境准备

硬件：DELL XPS

软件：Windows10、Idea2017、Maven3.5.0、Java8、SpringBoot2.4.0、netty4.1.24、IE11浏览器

服务端 -（SpringBoot + Netty）

1.pom.xml

<!--netty-->
<dependency>
	<groupId>io.netty</groupId>
	<artifactId>netty-all</artifactId>
	<version>4.1.24.Final</version>
</dependency>
<dependency>
	<groupId>io.netty</groupId>
	<artifactId>netty-codec-http</artifactId>
	<version>4.1.24.Final</version>
</dependency>

2.WebSocketServer.java

/**
 * WebSocketServer
 * @author LJS
 * @date 2020/11/25
 */
public class WebSocketServer {

    public static void start(int port) {
        // 引导类
        ServerBootstrap serverBootstrap = new ServerBootstrap();
        // 监听线程组（客户端请求）
        NioEventLoopGroup bossGroup = new NioEventLoopGroup();
        // 处理线程组（客户端请求业务逻辑、读写等处理）
        NioEventLoopGroup workerGroup = new NioEventLoopGroup();

        try {
            // 引导服务器的启动工作
            serverBootstrap
                    // 线程组角色配置
                    .group(bossGroup, workerGroup)
                    // 服务端的IO模型配置（BIO: [OioServerSocketChannel.class]、NIO:[NioServerSocketChannel.class]）
                    .channel(NioServerSocketChannel.class)
                    .childHandler(new WebSocketServerInitializer());
            // 用于启动server，同时启动方式为同步
            ChannelFuture channelFuture = serverBootstrap.bind(port).sync();
            System.out.println("Chat Room Server start success!!!");
            // 监听关闭的channel，设置同步方式
            channelFuture.channel().closeFuture().sync();
        } catch (InterruptedException e) {
            System.err.println("Chat Room Server start fail: " + e.getMessage());
        } finally {
            bossGroup.shutdownGracefully();
            workerGroup.shutdownGracefully();
            System.out.println("Chat Room Server shutdown success!!!");
        }
    }

}

3.WebSocketServerInitializer.java

/**
 * WebSocketServerInitializer
 * @author LJS
 * @date 2020/11/25
 */
public class WebSocketServerInitializer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        // 获取流水线
        ChannelPipeline pipeline = ch.pipeline();

        // websocket基于http协议，所以要有http编解码器
        pipeline.addLast(new HttpServerCodec());

        // 对写大数据的支持
        pipeline.addLast(new ChunkedWriteHandler());

        // 对httpMessage进行整合，聚合成FullHttpRequest或FullHttpResponse
        pipeline.addLast(new HttpObjectAggregator(1024 * 64));

        // 心跳检测，读超时时间设置为30s，0表示不监控
        ch.pipeline().addLast(new IdleStateHandler(30, 30, 30, TimeUnit.SECONDS));

        // 自定义WebSocket handler
        pipeline.addLast(new WebSocketHandler());

        // websocket指定给客户端连接访问的路由:/chat
        pipeline.addLast(new WebSocketServerProtocolHandler("/chat"));
    }

}

4.WebSocketHandler.java

/**
 * WebSocketHandler
 * @author LJS
 * @date 2020/11/25
 */
public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {

    /**
     * C