SFS2X with Webpack

Post here your questions about the HTML5 / JavaScript for SFS2X

Moderators: Lapo, Bax

spec33
Posts: 3
Joined: 14 Sep 2017, 09:36

SFS2X with Webpack

Postby spec33 » 14 Sep 2017, 09:57

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).
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 14 Sep 2017, 12:32

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.
Paolo Bax
The SmartFoxServer Team
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 14 Sep 2017, 12:41

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.
Paolo Bax
The SmartFoxServer Team
Hamster
Posts: 4
Joined: 07 Sep 2017, 11:09

Re: SFS2X with Webpack

Postby Hamster » 14 Sep 2017, 17:12

Try installing the Type Definitions from Definitelly Typed with

Code: Select all

npm install --save-dev @types/smart-fox-server
spec33
Posts: 3
Joined: 14 Sep 2017, 09:36

Re: SFS2X with Webpack

Postby spec33 » 15 Sep 2017, 11:45

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?
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 15 Sep 2017, 12:03

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.
Paolo Bax
The SmartFoxServer Team
spec33
Posts: 3
Joined: 14 Sep 2017, 09:36

Re: SFS2X with Webpack

Postby spec33 » 15 Sep 2017, 12:21

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?
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 15 Sep 2017, 13:37

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.
Paolo Bax
The SmartFoxServer Team
vinhbt
Posts: 5
Joined: 01 Sep 2017, 14:55

Re: SFS2X with Webpack

Postby vinhbt » 27 Sep 2017, 18:40

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
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 28 Sep 2017, 16:51

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.
Paolo Bax
The SmartFoxServer Team
eliatlas
Posts: 4
Joined: 23 Jul 2017, 15:51

Re: SFS2X with Webpack

Postby eliatlas » 21 Jan 2018, 11:57

Did you manage to solve this issue?
Any plans to prepare NPM for Smartfox perhaps?
eliatlas
Posts: 4
Joined: 23 Jul 2017, 15:51

Re: SFS2X with Webpack

Postby eliatlas » 21 Jan 2018, 13:07

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)
eliatlas
Posts: 4
Joined: 23 Jul 2017, 15:51

Re: SFS2X with Webpack

Postby eliatlas » 21 Jan 2018, 15:12

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
User avatar
Bax
Site Admin
Posts: 4609
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 22 Jan 2018, 08:44

What if you try to import DataStream in your code?
Paolo Bax
The SmartFoxServer Team
eliatlas
Posts: 4
Joined: 23 Jul 2017, 15:51

Re: SFS2X with Webpack

Postby eliatlas » 22 Jan 2018, 09:21

I tried, no luck. Both when I embed it as DataStream.js and when I try to import from NPM

Return to “SFS2X HTML5 / JavaScript API”

Who is online

Users browsing this forum: No registered users and 17 guests