HW7: done task 8
This commit is contained in:
parent
95729f6e20
commit
d3fa37320f
4 changed files with 61 additions and 18 deletions
|
@ -66,16 +66,16 @@ io.on('connection', (socket) => {
|
|||
|
||||
socket.emit('sessionId', { id: id++ });
|
||||
|
||||
socket.on('message', (msg) => {
|
||||
console.log('message: ',msg);
|
||||
msg.user = encodeURIComponent(msg.user);
|
||||
msg.text = encodeURIComponent(msg.text);
|
||||
socket.broadcast.emit('message', msg);
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('client disconnected');
|
||||
});
|
||||
|
||||
for (const e of ['canvas.draw', 'canvas.undo', 'canvas.clear']) {
|
||||
socket.on(e, (arr) => {
|
||||
console.log(e, arr);
|
||||
socket.broadcast.emit(e, arr);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const eventBus = require('./pubsub');
|
||||
|
|
|
@ -222,33 +222,33 @@ class App {
|
|||
}
|
||||
|
||||
initSocket() {
|
||||
const socket = io();
|
||||
this.socket = io();
|
||||
|
||||
socket.on('connect', () => {
|
||||
this.socket.on('connect', () => {
|
||||
console.log('Socket connected');
|
||||
});
|
||||
|
||||
socket.on('sessionId', (msg) => {
|
||||
this.socket.on('sessionId', (msg) => {
|
||||
console.log('Socket session id is', msg.id);
|
||||
this.socketSessionId = msg.id;
|
||||
});
|
||||
|
||||
socket.on('disconnect', (reason) => {
|
||||
this.socket.on('disconnect', (reason) => {
|
||||
console.log('Socket disconnected');
|
||||
});
|
||||
|
||||
socket.on('reconnect', (attemptNumber) => {
|
||||
this.socket.on('reconnect', (attemptNumber) => {
|
||||
console.log('Socket reconnected');
|
||||
});
|
||||
|
||||
socket.on('favorite.created', (msg) => {
|
||||
this.socket.on('favorite.created', (msg) => {
|
||||
if (msg.socketid != this.socketSessionId) {
|
||||
console.log(msg);
|
||||
this.renderFavorite(msg, 'top');
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('favorite.updated', (msg) => {
|
||||
this.socket.on('favorite.updated', (msg) => {
|
||||
if (msg.socketid != this.socketSessionId) {
|
||||
this.renderFavorite(msg, document
|
||||
.getElementById('favorite_' + msg._id));
|
||||
|
@ -256,11 +256,40 @@ class App {
|
|||
console.log(msg);
|
||||
});
|
||||
|
||||
socket.on('favorite.deleted', (msg) => {
|
||||
this.socket.on('favorite.deleted', (msg) => {
|
||||
if (msg.socketid != this.socketSessionId) {
|
||||
document.getElementById('favorite_' + msg._id).remove();
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.on('canvas.draw', (arr) => {
|
||||
console.log('canvas.draw recieved', arr);
|
||||
|
||||
const m = this.mousedown;
|
||||
this.mousedown = false;
|
||||
if (m) {
|
||||
const last = history.pop();
|
||||
history.pushAll(arr);
|
||||
history.pushAll(last);
|
||||
} else {
|
||||
history.pushAll(arr);
|
||||
}
|
||||
this.redrawAll();
|
||||
|
||||
this.mousedown = m;
|
||||
});
|
||||
|
||||
this.socket.on('canvas.clear', () => {
|
||||
this.clear();
|
||||
this.background = null;
|
||||
this.history.clear();
|
||||
this.redrawAll();
|
||||
});
|
||||
|
||||
this.socket.on('canvas.undo', () => {
|
||||
history.pop();
|
||||
this.redrawAll();
|
||||
});
|
||||
}
|
||||
|
||||
constructor(conf) {
|
||||
|
@ -326,6 +355,7 @@ class App {
|
|||
this.erase();
|
||||
this.background = null;
|
||||
history.clear();
|
||||
this.socket.emit('canvas.clear', null);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -333,6 +363,7 @@ class App {
|
|||
this.buttons.undo.addEventListener('click', () => {
|
||||
history.pop();
|
||||
this.redrawAll();
|
||||
this.socket.emit('canvas.undo', null);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -481,15 +512,22 @@ class App {
|
|||
this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY);
|
||||
|
||||
if (record) {
|
||||
history.push(new Stroke(this.brush, this.strokeStyle,
|
||||
const lastArr = history.push(new Stroke(this.brush, this.strokeStyle,
|
||||
e.offsetX, e.offsetY));
|
||||
|
||||
if (!beginNew) {
|
||||
console.log('canvas.draw submit', lastArr);
|
||||
this.socket.emit('canvas.draw', lastArr);
|
||||
}
|
||||
}
|
||||
|
||||
if (beginNew) {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(e.offsetX, e.offsetY);
|
||||
} else if (e instanceof MouseEvent) {
|
||||
this.mousedown = false;
|
||||
} else {
|
||||
if (e instanceof MouseEvent) {
|
||||
this.mousedown = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,6 +9,10 @@ history.pop = () => {
|
|||
return history.paths.pop();
|
||||
};
|
||||
|
||||
history.pushAll = arr => {
|
||||
history.paths.push(arr);
|
||||
}
|
||||
|
||||
history.initializeNewPath = () => {
|
||||
history.paths.push([]);
|
||||
};
|
||||
|
|
|
@ -4,3 +4,4 @@
|
|||
- Task 6
|
||||
- Task 7
|
||||
- Access token fetching from authorization url
|
||||
- Renato Zero parody lyrics
|
||||
|
|
Reference in a new issue