Getting Started With PeerJS

Question

I am trying the simplest example I can, pulled directly from their website. Here is my entire html file, with code taken exactly from https://peerjs.com/index.html:

<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script>
    var peer = new Peer();
    var conn = peer.connect('another-peers-id');
    // on open will be launch when you successfully connect to PeerServer
    conn.on('open', function(){
    // here you have conn.id
        conn.send('hi!');
    });
</script>

In Chrome and Edge I get this in the console:

peerjs.min.js:64 GET https://0.peerjs.com/peerjs/id?ts=15956160926060.016464029424720694 net::ERR_CONNECTION_REFUSED

In Firefox I get this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://0.peerjs.com/peerjs/id?ts=15956162489620.8436734374800061. (Reason: CORS request did not succeed).

What am I doing wrong?

@reyad has requested "a full trace of requests and responses". Here's what I see in my network tab in Firefox:

And here's Chrome:

And a tiny bit more Chrome:

Answer 1

[Note: It would have been better if you could provide a full trace of requests and responses. This problem may occur for several reasons. I'll state two solutions. So, try those. If those doesn't work, provide full trace of requests and responses.]

1. First Solution:

Sometimes, this type of error occurs because of self-signed certificate. To solve this problem, open developer tools/options, then go to network tab. You'll see a list of requests. Select the request which was failed because of CORS(i.e. which gave you this Reason: CORS request did not succeed). Open it(i.e. click it). If your problem is related to cert you'll see the following error message:

AN ERROR OCCURED: SEC_ERROR_INADEQUATE_KEY_USAGE

To solve this problem, go to url that is the reason of this problem and accept the certificate manually.

2. Second solution:

Check the request(which is the reason of CORS) in the network tab of developers tools/options(same as described in 1. First Solution). You'll find a Transferred column. See, what's written in the Transferred column of the failed request. If it is written Blocked By Some Ad-Blocker, then disable the Ad-Blocker. Your request will work fine.

[P.S.]: These solutions are proposed on assumptions. Hope these works. If these two do not work, then please provide more info about requests and responses. And also check this.

3. Third and final solution:

[Note: This solution may not solve your problem directly, but it'll give you alternative solution and also insight about what your problem is and how to work around it]

Before reading the solution below, read this to understand how Access-Control-Allow-Origin works(it is the reason for CORS error).

Let me first explain how peerjs works:

PEERJS works based on PEER ID. So, you've to get some PEER ID either from the PEERJS CLOUD SERVER or you've to provide yourself one in the PEER CONSTRUCTOR i.e. new Peer("some-peer-id"). Peer id has to be unique, cause its necessary to detect all the users uniquely. And, peerjs uses this PEER ID to send and receive data from user to user.

Now, you should know that, you're using PEERJS CLOUD SERVER to get/generate unique peer id which is the default server PEERJS uses unless you specified some other server to use.

Now let me explain why you're facing this problem:

As you already know how CORS works, you may have already guessed, that https://unpkg.com/[email protected]/dist/peerjs.min.js(the downloaded js file) is calling https://0.peerjs.com to retrieve/generate new unique PEER ID. But, this request by https://your.website.com does not have Access-Control-Allow-Origin access for some reason, it may also be a middleware problem. So, its difficult to tell where the problem is actually occuring. But one thing for sure, it's not your fault of writing code :D.

I hope all the concepts is clear to you I've stated above.

Now, to solutions:

Alternative-appraoch-1 (Using PEERJS CLOUD SERVER AND Your own provided id):

In this approach you've to generate your own unique PEER ID. So, "https://your.website.com" does not have to call "https://0.peerjs.com" for unique peer id. [Note: make your peer id large enough so that its always unique, at least 64 chars long]

In this way, you can avoid the CORS problem.

Update:

I just saw an new issue in github, which says the public peerjs cloud server is now unstable or does not work properly. It just gives error like: Firefox cannot establish a connection with the server at the address wss://0.peerjs.com/peerjs?key=peerjs&id=123222589562487856955685485555&token=ocyxworx62i and in Chrome: Error in connection establishment: net::ERR_CONNECTION_REFUSED. For details check here. So, its better, you use your own server(see the next approach).

Alternative-appraoch-2 (Using your own peerjs server):

You can host your own peerjs server instead of PEERJS CLOUD SERVER. In this way, you can allow access to anyone/any website you want. If you want know how to host a peerjs server, you may visit here.

[P.S.]: I have studied pearjs issues in github. After reading all those issues, it seems, it is better to use your own server rather than using pearjs cloud. There are a lot of various problems with each new release of peerjs. And mostly related with connection with peerjs cloud and also peerjs cloud is not stable I guess. They were hosting it in 0.peerjs.com:9000 before(not secure). But now in 0.peerjs.com:443.

I haven't use peerjs before nor set up peerjs server. If you want to set up one, I hope the community would be able help you on how to do that properly.

Answer 2

What I understand from your question is that there is an issue of (CORS => Cross-origin resource sharing ), Maybe what I am suggesting is not very intuitive.

First : download the "https://unpkg.com/[email protected]/dist/peerjs.min.js" in your local directory . and then incklude the local javascript code to the html. like: <script src="./peerjs.min.js"></script>

Second : you are using var peer = new Peer(); but please provide an extra unique id from your side. for example, I just created a random id and provided it.

StackOverflow link: https://stackoverflow.com/questions/21216758/peerjs-set-your-own-peerid#:~:text=1%20Answer&text=Provide%20a%20peer%20id%20when,to%20under%20Create%20a%20peer.

var a_random_id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);

var peer = new Peer(a_random_id, {key: 'myapikey'}); 

Third : the best option is to run PeerServer: A server for PeerJS of your own.

If you don't want to develop anything, just enter a few commands below.

Install the package globally: $ npm install peer -g

Run the server: $ peerjs --port 9000 --key peerjs --path /myapp Started PeerServer on ::, port: 9000, path: /myapp (v. 0.3.2)

Check it: http://127.0.0.1:9000/myapp It should return JSON with name, description, and website fields.

details:https://github.com/peers/peerjs-server