Netty HTML5 Canvas 网络画画板实时在线画画

采用 Html5 的 canvas 做前端画画板，发送数据到后端 Netty 服务，实时转发笔迹数据，在线实时同步画笔轨迹，单击绿色小方块，保存画板的图片

页面：

后端：

pom：

  4.0.0

  org.nno
  nno
  1.0-SNAPSHOT
  jar

  nno
  http://maven.apache.org

  
    UTF-8
  

  
    
      io.netty
      netty-all
      4.1.18.Final
    
    
      org.slf4j
      slf4j-log4j12
      2.0.5
    
    
      org.apache.commons
      commons-lang3
      3.2.1
    
    
      org.projectlombok
      lombok
      1.18.26
    
  

类：

package org.nno;
import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelPipeline;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;

import java.util.HashSet;
import java.util.Set;


public class WebSocketServer {

    private final int port;

    public WebSocketServer(int port) {this.port = port;}
    Set m = new HashSet();
    public void run() throws Exception {EventLoopGroup bossGroup = new NioEventLoopGroup();
        EventLoopGroup workerGroup = new NioEventLoopGroup();
        try {ServerBootstrap b = new ServerBootstrap();
            b.group(bossGroup, workerGroup)
                    .channel(NioServerSocketChannel.class)
                    .childHandler(new ChannelInitializer() {
                        @Override
                        public void initChannel(SocketChannel ch) throws Exception {ChannelPipeline p = ch.pipeline();
                            p.addLast(new HttpServerCodec());
                            p.addLast(new HttpObjectAggregator(65536));
                            p.addLast(new WebSocketServerProtocolHandler("/websocket"));
                            p.addLast(new WebSocketServerHandler(m));
                        }
                    });

            ChannelFuture f = b.bind(port).sync();
            f.channel().closeFuture().sync();} finally {workerGroup.shutdownGracefully();
            bossGroup.shutdownGracefully();}
    }

    public static void main(String[] args) throws Exception {
        int port = 9911;
        if (args.length> 0) {port = Integer.parseInt(args[0]);
        }

        new WebSocketServer(port).run();}
}

package org.nno;
import io.netty.channel.Channel;
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

import java.util.*;


public class WebSocketServerHandler extends SimpleChannelInboundHandler {Set m = new HashSet();

    public WebSocketServerHandler(Set m) {this.m = m;}

    @Override
    public void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        // 处理消息
//        System.out.println("Received message:" + msg.text());
        Iterator iterator = m.iterator();
        while(iterator.hasNext()){iterator.next().writeAndFlush(new TextWebSocketFrame(msg.text()));
        }

    }

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        // 添加连接
//        System.out.println("Client connected:" + ctx.channel());
        m.add(ctx.channel());


    }

    @Override
    public void channelInactive(ChannelHandlerContext ctx) throws Exception {
        // 断开连接
//        System.out.println("Client disconnected:" + ctx.channel());

        m.remove(ctx.channel());


    }

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

}