Loading socket.io-client on a client side

Question

I'm trying to use socket.io-client on my page but without success. Readme recommends (with approporiate CDN link)

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  socket.on('connect', function(){});
  socket.on('event', function(data){});
  socket.on('disconnect', function(){});
</script>

But this doesn't work because of Mismatched anonymous define() module. I found a recommendation here to explicitly load socket.io-client after require.js

  <script
    data-main="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"
    src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

Now it loads all files without errors but when I type in browser console var socket = io(); it says that io is undefined.

I'm missing something obvious. What should I do?

I am really not sure what you are trying to achieve if you need a socket.io client on your webpage. you don't need anything, socket.io server always exposes a client URL. like HTTP://YOUR-SOCKETIO-SERVER_URL:PORT/socket.io/socket.io.js, so you just need to , and everything should work — Ali, Dec 29 '20 at 13:22

score 0 · Answer 1 · answered Dec 31 '20 at 06:05

Seems that socket.io is AMD compatible. AMD is asynchronous module definition - the standard used by RequireJS: https://requirejs.org/docs/whyamd.html

Now, you need to use the socket.io library via RequireJS. There are two possible ways to do it:

you just want to use socket.io in inline script
you define your AMD file and you need socket.io in it

Let's cover case 1.

// you want to use socket.io module, so you need to call require() function to... require it
require(
  /*
   * in the line above you you declare an array of modules which you want to use
   * in this case you need one module, socket.io
   * bear in mind that there is no .js at the end!
   * RequireJS assumes that the extension is .js
   */
  ['https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io'],
  /*
   * second argument of require function is a callback
   * here RequireJS will inject the modules you want to use
   * in this case will inject one module, socket.to
   */
  (io) => {
    // socket.io has been loaded and injected, now you can use it :)
    var socket = io();
    socket.on('connect', function(){});
    socket.on('event', function(data){});
    socket.on('disconnect', function(){});
  }
);

I explained the code with the comments.

Now let's look at case 2, in this example I will define a module which will create a socket via socket.io:

// you want to define a module which uses socket.io module, so you need to call define() function to define your module
define(
  /*
   * in the line above you you declare an array of modules which you want to use
   * in this case you need one module, socket.io
   * bear in mind that there is no .js at the end!
   * RequireJS assumes that the extension is .js
   */
  ['https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io'],
  /*
   * second argument of define function is a callback
   * here RequireJS will inject the modules you want to use
   * in this case will inject one module, socket.to
   */
  (io) => {
    // socket.io has been loaded and injected, now you can use it :)
    var socket = io();
    socket.on('connect', function(){});
    socket.on('event', function(data){});
    socket.on('disconnect', function(){});

    return socket;
  }
);

Now, if you want to use this socket you can use the method from case 1:

require(['path/to/your/socket/module'], (socket) => {
  console.log(socket);
});

These are two most common ways to use RequireJS, hope this will help you. Any questions, just add comment and will answer them :)

Loading socket.io-client on a client side

1 Answers1