Etienne Maxence Eugene REITZ
GitHub username : Tylones
Go in the project directory :
- To build the project , run the command :
mvn package - To test the project, run the command :
mvn test - To compile the project, run the command :
mvn compile - To run the project, run the command :
mvn spring-boot:run
The application is accessible at https://localhost:8080/
- The controller with the shared ArrayList :
@Controller
public class AppPointController {
private ArrayList<Point> points = new ArrayList<Point>();
@Autowired
SimpMessagingTemplate mgt;
@MessageMapping("/newpoint.{id}")
public void handlePointEvent(Point p, @DestinationVariable String id) throws Exception {
synchronized (points){
points.add(p);
if(points.size()>=3){
mgt.convertAndSend("/topic/newpolygon."+id, points);
points.clear();
}
}
mgt.convertAndSend("/topic/newpoint."+id, p);
}
}- Connecting and subscribing to the two topics, with their respective callback functions :
var connectAndSubscribe = function () {
console.info('Connecting to WS...');
var socket = new SockJS('/stompendpoint');
stompClient = Stomp.over(socket);
//subscribe to /topic/TOPICXX when connections succeed
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/newpoint.'+drawingNumber, function (eventbody) {
var x = (JSON.parse(eventbody.body)).x;
var y = (JSON.parse(eventbody.body)).y;
var point = new Point(x,y);
addPointToCanvas(point);
});
stompClient.subscribe('/topic/newpolygon.'+drawingNumber, function (eventbody) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var point0 = null;
ctx.fillStyle = getRndColor();
ctx.beginPath();
(JSON.parse(eventbody.body)).map(function (elem, index) {
if(index === 0){
point0 = elem;
ctx.moveTo(elem.x, elem.y);
}else{
ctx.lineTo(elem.x, elem.y);
if(index === (JSON.parse(eventbody.body)).length){
ctx.lineTo(poin0.x, point0.y);
}
}
})
ctx.closePath();
ctx.fill();
})
});
};In this screenshot, we can see that the first to windows are connected to the drawing 1, and the last window is connected to the drawing 2.
As a result, the first two windows do have the same polygons (the colors are generated randomly when drawing, and are not shared), and the last window has different polygons.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent