Socket.io and Cross Domain Communication

Socket.io (www.socket.io) is POWERFULL and one of the most famous and professional library to real time communication. Socket.IO enables real-time bidirectional event-based communication.
It works on every platform, browser or device, focusing equally on reliability and speed. Most well-known usage this library:

  • Real-time analytics – Push data to clients that gets represented as real-time counters, charts or logs.
  • Binary streaming – Starting in 1.0, it’s possible to send any blob back and forth: image, audio, video.
  • Instant messaging and chat – Socket.IO’s “Hello world” is a chat app in just a few lines of code.
  • Document collaboration – Allow users to concurrently edit a document and see each other’s changes.

Many samples presented on blogs, books, documentations concerns application socket.io in case of client and server implementation on the same domain, server. But what about situation when the client frontend site is located in another domain (e.g. www.domain-client.com) and another physical machine and rest api on another one (e.g. www.domain-api.com).

Is it possible to use socket.io in this situation e.g. on microsoft azure or another cloud solution? If You will try implement solution based on samples from many books, blogs where described is solution where socket.io works on the same physical machine and domain – then You will fall down. After running your sample You will see a lot of errors on the client side in browser like following:

“XMLHttpRequest cannot load http://domain-api.com/socket.io/?EIO=2&transport=polling&sid=z1N_9JpKElJJ6b2qAAAL. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://domain-client.com’ is therefore not allowed access.”

If You place this error in google You will find a lot of articles where people try solve this issue without success.. 99% of people say that problem is in configuration of headers in express (or another distributions of node.js ), and they try set up configuraiton for headers on node.js server side.. 1% is closest to solution becouse focus on response headers from socket.io.. But no one one solution works.. problem is the same. The another people try to use on client side url adrdress to socket.io library located on server e.g.

<script src=”http://www.domain-api.com:PORT/socket.io/socket.io.js”></script>

But solution is very easy. I will demonstrate sample based on express.js distribution:
Server side:
By default, websockets are cross domain. You have to force Socket.io to only use that as means to connect client and server by source code line:

Client side:

Please pay attention on snippet of code – IT IS MOST IMPORTANT part for start works our solution:

The last information: You don’t have to use socket.io lib from destination server e.g.

<script src=‘http://www.domain-api.com/socket/socket.io></script>

in index.html file – You can use local javascript file like below presented sample:

<script src=scripts/dependencies/socket.io-1.7.3.js></script>

And here we go ahead.. See You to the next post

 

 

April 26th, 2017

  • Appгecіating the time and effort you put into yoսr blog and in depth information yoᥙ offer.
    It’s great to come across a blog every once in a while
    that isn’t the same outdated rehashed mateгial. Wοnderful read!
    I’ve saved your site and I’m adding your RSS feeds to my Google account..

  • There are some fascinating closing dates on this article but I don抰 know if I see all of them center to heart. There’s some validity but I’ll take hold opinion until I look into it further. Good article , thanks and we want extra! Added to FeedBurner as properly.

  • I must convey my gratitude for your kind-heartedness giving support to those individuals that have the need for help on that field. Your very own commitment to getting the message along had become remarkably valuable and have in every case allowed guys and women just like me to attain their ambitions. Your informative tips and hints can mean so much a person like me and still more to my peers. Thank you; from everyone of us..

  • I simply needed to appreciate you again. I’m not certain the things that I would have achieved in the absence of the type of ideas discussed by you on such area. It seemed to be a frightful scenario in my view, however , taking note of the skilled technique you resolved it took me to cry for delight. Now i am happier for the assistance and as well , have high hopes you recognize what a powerful job you are undertaking educating people all through a blog. I am certain you have never got to know all of us..