花费大量时间(两周!!!!)制作了一款web端画图工具,可自由涂鸦、裁剪并移动裁剪区域位置、输入文字,包括橡皮擦、箭头工具、动作撤销/重做、保存,并通过websocket实现了画板内容同步,代码已分享,希望大家指正,同进步。
前端代码见附件huaban_v3.rar,后端websocket关键代码如下:
package com.lfwer.pinche.web;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
import javax.websocket.CloseReason;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
@ServerEndpoint("/board")
@Component
public class BoardSocket {
private static Set<Session> peers = Collections.synchronizedSet(new HashSet<Session>());
private static StringBuffer str = new StringBuffer();
/**
* 客户端有连接的时候就会调用这个方法
*/
@OnOpen
public void open(Session session, EndpointConfig config) {
peers.add(session);
}
/**
* 客户端连接断开就会调用此方法
*/
@OnClose
public void close(Session session, CloseReason reason) {
peers.remove(session);
}
/**
* 接收到客户端的信息
*
* @param msg
* @param last
*/
@OnMessage
public void message(Session session, boolean last, String msg) {
if (!last) {
str.append(msg);
} else {
str.append(msg);
try {
for (Session peer : peers) {
if (!peer.equals(session)) {
peer.getBasicRemote().sendText(str.toString());
}
}
} catch (Exception e) {
e.printStackTrace();
}
str = new StringBuffer();
}
}
/**
* 错误监听(当没有关闭socket连接就关闭浏览器会异常)
*/
@OnError
public void error(Session session, Throwable error) {
String id = session.getId();
System.out.println("出错的session的id是" + id);
}
public BoardSocket() {
System.out.println("Socket对象创建");
// 通过对象的创建可以知道不同socket之间的通信不会共享成员变量
}
}