Page 1 of 3

SFS2X with Webpack

Posted: 14 Sep 2017, 09:57
by spec33
Hi,

I'm trying to use SFS JS API in a project with Webpack and Typescript, however I don't know how to set it up correctly. I haven't found any NPM packages related to SFS (are you planning to create one?), so I tried to include the .js file manually. My config is as follows:

webpack.config.js

Code: Select all

module.exports = {
    // ...
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            // ...
            sfs2x: path.join(__dirname, 'lib/smart-fox-server/sfs2x-api-1.7.6.js')
        }
    },
    // ...
    module: {
        rules: [
            // ...
            { test: /sfs2x-api-1\.7\.6\.js$/, loader: 'expose-loader?SFS2X' }
        ]
    },


app.ts

Code: Select all

import 'sfs2x';


some.other.file.ts

Code: Select all

this.sfs = new SFS2X.SmartFox(config);


Unfortunately, when I run the code, there is an error:

Code: Select all

Uncaught TypeError: SFS2X.SmartFox is not a constructor


This is the result from inspecting the SFS2X global variable in console:

Code: Select all

function (arrayBuffer,byteOffset,endianness){this._byteOffset=byteOffset||0;if(arrayBuffer instanceof ArrayBuffer){this.buffer=arrayBuffer}else if(typeof arrayBuffer=="object"){this.dataView=arrayBuffer;if(byteOffset){this._byteOffset+=byteOffset}}else{this.buffer=new ArrayBuffer(arrayBuffer||1)}this.position=0;this.endianness=endianness==null?DataStream.LITTLE_ENDIAN:endianness}


If the rule in module.rules is commented out, the module doesn't load at all (SFS2X is undefined).

Re: SFS2X with Webpack

Posted: 14 Sep 2017, 12:32
by Bax
I'm not familiar with webpack, but... why don't you go the easy way by just importing the API JS file in your main HTML file?
Quick and easy and immediately working... or at least it should, unless webpack interferes in other ways.

Re: SFS2X with Webpack

Posted: 14 Sep 2017, 12:41
by Bax
From a very fast search in Google I got this link, where it seems they address how to deal with standalone libraries like our API:
https://webpack.github.io/docs/library- ... rnals.html
It refers to the older version of webpack, but maybe they have a similar mechanism in the newer one.

Re: SFS2X with Webpack

Posted: 14 Sep 2017, 17:12
by Hamster
Try installing the Type Definitions from Definitelly Typed with

Code: Select all

npm install --save-dev @types/smart-fox-server

Re: SFS2X with Webpack

Posted: 15 Sep 2017, 11:45
by spec33
Yes, I can include the JS file in index.html (as I did for now, and it's working), but it feels... really hacky. Webpack is a really popular module bundler, so I thought that it should work with SFS, and I wanted to do it "the proper Webpack way".

Bax wrote:From a very fast search in Google I got this link, where it seems they address how to deal with standalone libraries like our API:
https://webpack.github.io/docs/library- ... rnals.html
It refers to the older version of webpack, but maybe they have a similar mechanism in the newer one.

The link you included seems to be targeted at library developers who want to expose their libraries as global variables, not include them in their own website.

Hamster wrote:Try installing the Type Definitions from Definitelly Typed with

Code: Select all

npm install --save-dev @types/smart-fox-server

The issue here is not the lack of typings, it's that the library seems to bootstrap incorrectly when combined with Webpack. As I've been fiddling around with the API's source code, I found out that somehow what ends up as the global SFS2X variable is the DataStream function. Investigating further, I've found something that seems to be the source of the bug:

Code: Select all

/* if (typeof define === "function" && define.amd) {
  define("DataStream", [], function() {
      return DataStream
  })
}
if (typeof module === "object" && module && module.exports) {
  module.exports = DataStream
}*/(function(global) {

The listing above is a prettiefied excerpt from sfs2x-api-1.7.6.js (lines 14139-14146), minus the comment, which is mine. When this fragment is commented out, everything works fine, so it seems to be a problem of redefining SFS2X variable as DataStream. While this solution works for me, maybe it is something you could fix in a future patch?

Re: SFS2X with Webpack

Posted: 15 Sep 2017, 12:03
by Bax
It is really difficult to understand what is going on. The reason is that we don't have direct control over the code output, because our source code goes through a number of steps (including Babel and more) which build the final API. In fact the code you are showing is nowhere in our source code.

Re: SFS2X with Webpack

Posted: 15 Sep 2017, 12:21
by spec33
Well, it seems to be the source code of this library, and the code I commented out are the last few lines, which export it as a module. I think the issue here may be that your build process does not treat this library as a module, but just concatenates its code to your API's code?

Re: SFS2X with Webpack

Posted: 15 Sep 2017, 13:37
by Bax
You are right, we are including the DataStream library directly, so it seems we can comment its last lines.
If you contact us by email, we can send you a pre-release version you can test.

Re: SFS2X with Webpack

Posted: 27 Sep 2017, 18:40
by vinhbt
Follow your suggest i has commented out

Code: Select all

if (typeof define === "function" && define.amd) {
    define("DataStream", [], function () {
        return DataStream
    })
}
if (typeof module === "object" && module && module.exports) {
    module.exports = DataStream
}

And using ProvidePlugin in webpack config file

Code: Select all

new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        SFS2X: __dirname + '/lib/SFS2X_API_JS.js',
        "window.SFS2X": __dirname + '/lib/SFS2X_API_JS.js'
    })

but when I run the code, there is an error:
Uncaught ReferenceError: Zlib is not defined
at SFSProtocolCodec.decompress
at SFSProtocolCodec.onPacketRead
at WebSocket._onSocketData

Re: SFS2X with Webpack

Posted: 28 Sep 2017, 16:51
by Bax
First of all I'd suggest to test with our official API, instead of making changes to the minified version.
If the problem persist, then we can try to understand what is going on with ZLib.

If it is not an issue, could you contact us by email? So we can send you the still pre-release version with the change you requested.

Re: SFS2X with Webpack

Posted: 21 Jan 2018, 11:57
by eliatlas
Did you manage to solve this issue?
Any plans to prepare NPM for Smartfox perhaps?

Re: SFS2X with Webpack

Posted: 21 Jan 2018, 13:07
by eliatlas
I am having the same issue.

Code: Select all

import {SmartFox, SFSEvent} from '../lib/sfs2x-api-1.7.6'

export default class {

  constructor() {

      this.sfs = new SmartFox({
          host: "127.0.0.1",
          port: 8443,
          debug: true,
          useSSL: true,
          zone: "sfsak"
      });
      this.sfs.addEventListener(SFSEvent.CONNECTION, this.onConnection);
      this.sfs.connect();
  }

  onConnection(event) {
    console.log("onConnection", event);
  }

}


Getting this error
./lib/sfs2x-api-1.7.6.js:4486 Uncaught ReferenceError: DataStream is not defined
at Object.eval (./lib/sfs2x-api-1.7.6.js:4486)
at eval (./lib/sfs2x-api-1.7.6.js:6372)
at Object.<anonymous> (application.js:1604)
at __webpack_require__ (application.js:1091)
at fn (application.js:619)
at eval (./src/Proxy.js:9)
at Object.<anonymous> (application.js:1598)
at __webpack_require__ (application.js:1091)
at fn (application.js:619)
at eval (./src/application.js:7)

Re: SFS2X with Webpack

Posted: 21 Jan 2018, 15:12
by eliatlas
I also posted in other thread, just to make sure writing here as well.
I opened a git repository with example code, and steps to reproduce.

https://github.com/eliatlas/sfs_js_api

Re: SFS2X with Webpack

Posted: 22 Jan 2018, 08:44
by Bax
What if you try to import DataStream in your code?

Re: SFS2X with Webpack

Posted: 22 Jan 2018, 09:21
by eliatlas
I tried, no luck. Both when I embed it as DataStream.js and when I try to import from NPM