StompJs v5: Polyfills

2 minute read

This guide covers critical dependencies and polyfills for version 5 of @stomp/stompjs; which is internally used by all versions of @stomp/rx-stomp and version 7 of @stomp/ng2-stompjs.

Critical dependency

StompJs v5 uses newer Javascript features. Few these can be polyfilled in older browsers. However Uint8Array (Browser Support) is critically needed and not possible to be efficiently polyfilled (notably in IE9 or lower). If you need to support any browser that does not have native support for Uint8Array please continue using version 4 of this library.

Polyfills

  • Object.assign. (Browser Support) It is not supported by IE (supported by Edge). It will need to be polyfilled from npm package es6-object-assign. A simple approach:
    <script src="https://cdn.jsdelivr.net/npm/es6-object-assign@1.1.0/dist/object-assign-auto.min.js"></script>
    
  • TextEncoder and TextDecoder - Browser Support These are not supported by any of the MicroSoft browsers as of 2018. These will need to be polyfilled from npm package text-encoding. A simple approach:
    <script src="https://cdn.jsdelivr.net/npm/text-encoding@0.6.4/lib/encoding.min.js"></script>
    

In NodeJS

TextEncoder/TextDecoder

  • Node JS v11 (tested with v11.2.0) has TextEncoder/TextDecoder built-in. See: https://nodejs.org/api/util.html#util_class_util_textencoder
  • For older NodeJS, you need to install text-encoding
    $ npm install text-encoding
    
  • Add the following:

    // These have been added in NodeJS v11, so good idea is to check first
    if (typeof TextEncoder !== 'function') {
      const TextEncodingPolyfill = require('text-encoding');
      TextEncoder = TextEncodingPolyfill.TextEncoder;
      TextDecoder = TextEncodingPolyfill.TextDecoder;
    }
    

In React Native

TextEncoder/TextDecoder

  • React Native makes it deceptive. When an application is executed in debug mode, it works, as it is executed on an actual browser where TextEncoder/TextDecoder is available. However, when executed in production mode, it fails as TextEncoder/TextDecoder is not available.
  • Please install text-encoding
    $ npm install text-encoding
    
  • Add the following to your index.js or App.js:

    import * as encoding from 'text-encoding';
    
  • There is additional issues with React Native in some device/version combinations. Please see: React Native - Additional Notes

WebSocket

There are two alternate libraries websocket and ws which has been reported to work.

websocket

  • Add websocket npm module:

    $ npm install websocket
    
  • Require the module and expose it through global

    Object.assign(global, { WebSocket: require('websocket').w3cwebsocket });
    

ws

  • Instead of websocket lib ws has also been reported to work. See: stompjs/issues/28.
  • Add ws npm module:

    $ npm install ws
    
  • Require the module and expose it through global

    Object.assign(global, { WebSocket: require('ws') });
    

Updated: