I am following this link to create a collaborative drawing application. i am able to run application but collaborative drawing is not happening. I have successfully created PUSHER_APP_ID
, PUSHER_KEY
, PUSHER_SECRET
& placed in .env
.
Collaborative drawing code -
ngAfterViewInit() {
const channel = this.pusher.init();
console.log("ngAfterViewInit called :: line 142 : ", this.userId);
channel.bind('draw', (data) => {
console.log("line 144");
if (data.userId !== this.userId) {
console.log("line 146");
data.line.forEach((position) => {
console.log("line 148");
this.draw(position.start, position.stop, this.guestStrokeStyle);
});
}
});
}
I can see different userid if i am hitting it in different browser. but it not going inside below loop.
channel.bind('draw', (data) => {
...
}
I can see logs from server.js
code -
app.post('/draw', (req, res) => {
console.log("draw :: in server :: ", req.body);
pusher.trigger('painting', 'draw', req.body);
res.json(req.body);
});
logs -
draw :: in server :: { line:
[ { start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] },
{ start: [Object], stop: [Object] } ],
userId: 'ggfe565r-68ae-6cc6-878a-7g7j9d3b6b94' }
Could anyone please help/guide, if i am doing anywhere wrong or missing anything.
I solved this by changing cluster: 'eu'
to cluster: 'ap2'
.