muaz-khan / Canvas-Designer

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.
https://www.webrtc-experiment.com/Canvas-Designer/
MIT License
368 stars 171 forks source link

I want to replace FirebaseIO with socketio-over-node.js but it looks like Firebaseio is bundled with RTCMulticonnect.js. #8

Open creedrahul opened 8 years ago

creedrahul commented 8 years ago

I have tried to use socketio-over-node.js and it works fine in video application but when i try to do the same for canvas designer application the user don't connect and in the node.js console there is a this message:- info-unhandled socket.io url .
I have tried to look for errors in console of Chrome this is the error i get in console:- image the issue might be small but as i am new and don't have complete knowledge of webrtc hence i am stuck.

muaz-khan commented 8 years ago

Latest code is using RTCMultiConnection-v3.0 which is having built-in support for socket.io. See its usage.

However for old code, please do following steps:

1) Make sure that you're running following socket.io server on a specific port or ip:

2) In the index.html file, add following code-block quickly after new RTCMultiConnection(..) constructor:

E.g.

var connection = new RTCMultiConnection('roomid');
var SIGNALING_SERVER = 'https://your-ip-address:8888/';
connection.openSignalingChannel = function(config) {   
   var channel = config.channel || this.channel || 'default-namespace';
   var sender = Math.round(Math.random() * 9999999999) + 9999999999;

   io.connect(SIGNALING_SERVER).emit('new-channel', {
      channel: channel,
      sender : sender
   });

   var socket = io.connect(SIGNALING_SERVER + channel);
   socket.channel = channel;

   socket.on('connect', function () {
      if (config.callback) config.callback(socket);
   });

   socket.send = function (message) {
        socket.emit('message', {
            sender: sender,
            data  : message
        });
    };

   socket.on('message', config.onmessage);
};

3) Don't forget linking socket.io.js. Firebase.js is redundant now. You can remove it.

<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>

Please check this documentation for further information:

creedrahul commented 8 years ago

Muaz i have implemented the above steps and i still have errors i a not getting a few things: 1) i am getting this error in console image what i observer was that in this link some part is getting trimmed the url after http:// should be http://localhost:8888/socket.io/?userid but if we see it in screenshot the port is getting trimmed. 2) i use fiddler and tried to see what response i get. This is the response i am getting image

i have also upgraded to latest version of rtcmulticonnect js file and have the code-block in index.html. Is there anything that i am missing during the implementation process.

creedrahul commented 8 years ago

The error was because i was using the wrong version of socket.io it is resolved now and is working perfectly. @muaz-khan Thanks for all your help throughout the development process.

ph4t0o0o0om commented 5 years ago

@creedrahul can you please help me on implementing signaling server on nodejs . I was using this but nothing happens I follow the steps please help me.

ph4t0o0o0om commented 5 years ago

@creedrahul can is see your script on index.html of canvas? regarding on signaling server

ph4t0o0o0om commented 5 years ago

this is the error in console https://imgur.com/a/zwtCnQh . please help

ph4t0o0o0om commented 5 years ago

now this is my error https://imgur.com/a/QqUdYvp. please help and on my socket . io unhandled socket.io url

creedrahul commented 5 years ago

Hi @ph4t0o0o0om . can you share you code. I can see that @muaz-khan has already provided all the necessary information that is needed to implement socket.io. Please share your code so that i can take a look and help you ASAP.

ph4t0o0o0om commented 5 years ago

@creedrahul I'm sorry I'm a little bit late this is my code

var connection = new RTCMultiConnection('roomid'); var SIGNALING_SERVER = 'http://localhost:8888/'; connection.openSignalingChannel = function(config) {
var channel = config.channel || this.channel || 'default-namespace'; var sender = Math.round(Math.random() * 9999999999) + 9999999999;

io.connect(SIGNALING_SERVER).emit('new-channel', { channel: channel, sender : sender });

var socket = io.connect(SIGNALING_SERVER + channel); socket.channel = channel;

socket.on('connect', function () { if (config.callback) config.callback(socket); });

socket.send = function (message) { socket.emit('message', { sender: sender, data : message }); };

socket.on('message', config.onmessage); };

I'm confused because this canvas designer is using connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/'; right not SIGNALING SERVER is that the same? Because the SIGNALING SERVER is working fine on video conference repo but when I try this on canvas I'm getting errors . In image link the error logs . Please help me thank you!

ph4t0o0o0om commented 5 years ago

@creedrahul Please help :(