当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 12:37:24

采用Html5的canvas做前端画画板，发送数据到后端Netty服务，实时转发笔迹数据，在线实时同步画笔轨迹

页面：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>网络画画板</title>
</head>
<body>
<style>#box1 {width: 100px;height: 100px;background-color: green;position: absolute;}</style>
<div id="box1"></div>
<canvas id="canvas" style="background-color: yellow;"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");canvas.width = 800;canvas.height = 600;let isDrawing = false;let x = 0;let y = 0;let x1 = 0;let y1 = 0;var socket = new WebSocket("ws://localhost:9911/websocket");socket.onopen = function(event) {console.log("WebSocket opened: " + event);};socket.onmessage = function(event) {//console.log("WebSocket message received: " + event.data);var str = event.data.split("_");if(str[0]==='B'){switch (str[1]) {case '37':box1.style.left = str[2];break;case '39':box1.style.left = str[2] ;break;case '38':box1.style.top = str[2] ;break;case '40':box1.style.top = str[2] ;break;}}else if(str[0]==='mousedown'){ctx.beginPath();ctx.strokeStyle = "red";ctx.lineWidth = 1;ctx.moveTo(str[1], str[2]);}else if(str[0]==='mousemove'){ctx.lineTo(str[1], str[2]);ctx.stroke();}};socket.onclose = function(event) {console.log("WebSocket closed: " + event);};function send() {var message = document.getElementById("message").value;socket.send(message);}document.addEventListener('keydown', function(event) {if (event.keyCode === 13) {send()var txt = document.getElementById('message')txt.value = ''}speed = 10switch (event.keyCode) {case 37:box1.style.left = box1.offsetLeft - speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.left)break;case 39:box1.style.left = box1.offsetLeft + speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.left)break;case 38:box1.style.top = box1.offsetTop - speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.top)break;case 40:box1.style.top = box1.offsetTop + speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.top)break;}});canvas.addEventListener("mousedown", (event) => {// console.log(event);x = event.layerX - canvas.getBoundingClientRect().left;y = event.layerY - canvas.getBoundingClientRect().top;ctx.beginPath();ctx.strokeStyle = "red";ctx.lineWidth = 1;ctx.moveTo(x, y);isDrawing = true;socket.send("mousedown_"+x+"_"+y);});canvas.addEventListener("mousemove", (event) => {//console.log(event);//console.log(event.layerX, event.layerY);if (isDrawing) {x = event.layerX - canvas.getBoundingClientRect().left;y = event.layerY - canvas.getBoundingClientRect().top;ctx.lineTo(x, y);ctx.stroke();socket.send("mousemove_"+x+"_"+y);}});canvas.addEventListener("mouseup", (event) => {isDrawing = false;});canvas.addEventListener("mouseout", (event) => {isDrawing = false;});</script>
</body>
</html>

后端：

pom：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.nno</groupId><artifactId>nno</artifactId><version>1.0-SNAPSHOT</version><packaging>jar</packaging><name>nno</name><url>http://maven.apache.org</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.18.Final</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId><version>2.0.5</version></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.2.1</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.26</version></dependency></dependencies>
</project>

类：

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<SocketChannel>() {@Overridepublic 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<TextWebSocketFrame> {Set m = new HashSet<>();public WebSocketServerHandler(Set m) {this.m = m;}@Overridepublic void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {// 处理消息
//        System.out.println("Received message: " + msg.text());Iterator<Channel> iterator = m.iterator();while(iterator.hasNext()){iterator.next().writeAndFlush(new TextWebSocketFrame(msg.text()));}}@Overridepublic void channelActive(ChannelHandlerContext ctx) throws Exception {// 添加连接
//        System.out.println("Client connected: " + ctx.channel());m.add(ctx.channel());}@Overridepublic void channelInactive(ChannelHandlerContext ctx) throws Exception {// 断开连接
//        System.out.println("Client disconnected: " + ctx.channel());m.remove(ctx.channel());}@Overridepublic void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {// 异常处理cause.printStackTrace();ctx.close();}}