6

I have two subdomains:

  • socket.mydomain.com - The Socket.IO server
  • app.mydomain.com - A web app that I'd like to connect to my web socket.

In the landing page for app.mydomain.com, I've linked in the Socket.IO client script, and successfully created an IO object, like so:

<script src=https://socket.mydomain.com/socket.io/socket.io.js></script>

<script type=text/javascript>
  const socket = io();
  socket.on('message', data => console.log(data));
</script>

However, rather than trying to connect to socket.mydomain.com, the client is trying to connect to app.mydomain.com. Because there's no socket at app.mydomain.com, it fails and keeps retrying.

Is there a way to connect my app at app.mydomain.com to my socket at socket.mydomain.com? Or is this impossible?

Update

Most all of the existing answers relating to this question now use outdated code, because Socket.IO has recently upgraded to 1.0 (1.4 in fact). However, even taking these code changes into account, it seems like Socket.IO doesn't allow what I'm trying to do.

When Socket.IO makes the initial connection to the server, it sends an XHR with the withCredentials settings set to true. But you can't have withCredentials set to true and allow CORS on the server. So it seems my question is actually, 'Is there a way around this problem?'

dwhieb
  • 1,706
  • 19
  • 29
  • Possible duplicate of [Cross Domain Socket.Io](http://stackoverflow.com/questions/8970880/cross-domain-socket-io) – Michał Perłakowski Apr 13 '16 at 06:23
  • Try to set the origins on the server-side: `io.set('origins', 'domain or IP here');` where `io` is your own defined variable. – node_modules Apr 13 '16 at 06:23
  • Thanks @Gothdo - checking that out now. Will post here or delete my question if that works. – dwhieb Apr 13 '16 at 06:25
  • On the client side, I tried `var socket = io.connect('socket.mydomain.com')`, and now I receive the following error: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://app.mydomain.com' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. – dwhieb Apr 13 '16 at 06:43
  • @Gothdo just posted an update. – dwhieb Apr 13 '16 at 17:09
  • @C0dekid.php thanks for that suggestion, but part of the problem is that I need to allow all origins. – dwhieb Apr 13 '16 at 17:09
  • Have you checked [this](http://stackoverflow.com/a/33912510/3853934) answer? It's for Socket.IO 1.3.7. – Michał Perłakowski Apr 13 '16 at 18:49

1 Answers1

9

To accomplish what I wanted, several things needed to be configured correctly, and I needed to use the latest Socket.IO syntax:

  • CORS must be enabled on the socket.mydomain.com server (Access-Control-Allow-Origin header set to *)

  • Acceptable transports had to be specified on the server (socket.mydomain.com):

    const app = express();
const server = http.createServer(app);
const io = require('socket.io')(server, {
  transports: ['websocket', 'xhr-polling']
});

  • The remote server and acceptable transports had to be specified on the client (app.mydomain.com):

    const socket = io('socket.mydomain.com', {
  transports: ['websocket', 'xhr-polling']
});
dwhieb
  • 1,706
  • 19
  • 29
  • I don't want to use xhr-polling in tranpsorts as it is using xhr in browser network and delaying other api requests which is delaying response. And my backend server (api) domain is api.domain.com so should i use socket.api.domain.com in client?? – Dinesh Sathrasala Feb 17 '20 at 08:14