忽略脚本错误并继续加载页面

Question

I have a module in NodeJS (SocketIO), and clients load it via:

<script type="text/javascript" src="<?PHP echo $socketServer; ?>socket.io/socket.io.js"></script>
    <script type="text/javascript">
      var socket = io.connect('http://192.168.0.15:8123');
    </script>

The problem is, is if the Node server is offline the script will break and the rest of the page will stop loading.

My app does not depend on Node to function properly, so I need everything to carry on loading whether or not Node is working.

How can this be done?

Answer 1

If socket.io script is optional, then you can implement lazy loading of script:

function lazyLoad(url, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  script.onload = script.onreadystatechange = function() {
    if (script.loaded == false && (!this.readyState || this.readyState == 'complete')) {
      script.loaded = true;

      console.log('script loaded');
      callback();
    }
  };
  script.onerror = function() {
    console.log('error loading');
  }

  document.body.appendChild(script);
}

Then use it that way:

lazyLoad('/socket.io/socket.io.js', function() {
  try {
    var socket = io.connect('http://192.168.0.15:8123');
  } catch(e) {
    console.log(e);
  }
});

BTW, make sure you load and connect to socket.io on the same server, otherwise you will face issues with CORS and many security limitations based on different browsers security policies.

Answer 2

If you don't care at all about result of io.connect just place into try/catch statement and ignore the exception

<script type="text/javascript">
try {
      var socket = io.connect('http://192.168.0.15:8123');
} catch (e) {
}
</script>