SFS2X with Webpack

Post here your questions about the HTML5 / JavaScript for SFS2X

Moderators: Lapo, Bax

User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 24 Jan 2018, 08:39

Actually we are not sure how to help here. DataStream is a library we embed in the API.
All the embedding process is made by our stack, which include babel, Browserify, Derequire and Uglify.
It is almost impossible to change anything here, unless we fully rewrite the DataStream library. This might be an option, but not in the short term. Also, it is hard to know what is going on in WebPack.
Would it be an option to reference the SFS2X API in your main HTML file, instead of importing it?
What about contacting the WebPack support showing the test case? Maybe they can help?
Paolo Bax
The SmartFoxServer Team
s63232
Posts: 1
Joined: 07 Mar 2018, 17:26

Re: SFS2X with Webpack

Postby s63232 » 07 Mar 2018, 17:30

I also got the problem using sfs2x-api-1.7.6.js with webpack.

How can you not support webpack in 2018 ? :cry: :cry: :cry:
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 08 Mar 2018, 18:14

s63232 wrote:I also got the problem using sfs2x-api-1.7.6.js with webpack.
How can you not support webpack in 2018 ? :cry: :cry: :cry:

Can you please test with version 1.7.7 of our API?
It contains the fix we discussed previously in this post, but we never published it because we needed to test this further.
Now we could complete our tests and everything seems fine with Webpack. I'll describe a simple test in the next reply.
Paolo Bax
The SmartFoxServer Team
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 08 Mar 2018, 18:26

We tested v1.7.7 of our JavaScript API in Webpack v4.1.1 in the following scenario.

Project structure:

Code: Select all

root
  - dist
    - bundle.js .............. generated by Webpack
    - index.html ............. simple html loading the bundle.js file
  - lib
    - sfs2x-api-1.7.7.js ..... the SFS2X JavaScript API
  - package.json
  - src
    - main.js ................ the project's source code (see below)
  - webpack.config.js

When building the project, Webpack simply bundles the main.js file with the API .js file and deploys it to the /dist folder.

This is the content of the main.js file:

Code: Select all

import {SmartFox, SFSEvent, LoginRequest} from "../lib/sfs2x-api-1.7.7";

class Test
{
  constructor()
  {
      console.log("READY");

      this.sfs = new SmartFox({
          host: "127.0.0.1",
          port: 8080,
          debug: true,
      });
     
      this.sfs.addEventListener(SFSEvent.CONNECTION, this.onConnection, this);
      this.sfs.addEventListener(SFSEvent.CONNECTION_LOST, this.onConnectionLost, this);

      this.sfs.connect();
  }

  onConnection(evtParams)
  {
      if (evtParams.success)
         console.log("Connected to SmartFoxServer 2X!");
      else
         console.log("Connection failed. Is the server running at all?");
  }

  onConnectionLost(evtParams)
  {
      console.log("Connection lost");
  }
}

// Create test class instance
new Test();

Running the bundled code in the browser works as expected: the connection is established successfully.
Paolo Bax
The SmartFoxServer Team
gopalrgpl
Posts: 11
Joined: 27 Mar 2018, 05:00

Re: SFS2X with Webpack

Postby gopalrgpl » 27 Mar 2018, 05:12

Bax wrote:We tested v1.7.7 of our JavaScript API in Webpack v4.1.1 in the following scenario.

Project structure:

Code: Select all

root
  - dist
    - bundle.js .............. generated by Webpack
    - index.html ............. simple html loading the bundle.js file
  - lib
    - sfs2x-api-1.7.7.js ..... the SFS2X JavaScript API
  - package.json
  - src
    - main.js ................ the project's source code (see below)
  - webpack.config.js

When building the project, Webpack simply bundles the main.js file with the API .js file and deploys it to the /dist folder.

This is the content of the main.js file:

Code: Select all

import {SmartFox, SFSEvent, LoginRequest} from "../lib/sfs2x-api-1.7.7";

class Test
{
  constructor()
  {
      console.log("READY");

      this.sfs = new SmartFox({
          host: "127.0.0.1",
          port: 8080,
          debug: true,
      });
     
      this.sfs.addEventListener(SFSEvent.CONNECTION, this.onConnection, this);
      this.sfs.addEventListener(SFSEvent.CONNECTION_LOST, this.onConnectionLost, this);

      this.sfs.connect();
  }

  onConnection(evtParams)
  {
      if (evtParams.success)
         console.log("Connected to SmartFoxServer 2X!");
      else
         console.log("Connection failed. Is the server running at all?");
  }

  onConnectionLost(evtParams)
  {
      console.log("Connection lost");
  }
}

// Create test class instance
new Test();

Running the bundled code in the browser works as expected: the connection is established successfully.



I tried this code but there is an error of "Zlib is not defined" only when sending an Extension Request.

Uncaught ReferenceError: Zlib is not defined
at SFSProtocolCodec.decompress (sfs2x-api-1.7.7.js:10)
at SFSProtocolCodec.onPacketRead (sfs2x-api-1.7.7.js:10)
at WebSocket._onSocketData (sfs2x-api-1.7.7.js:10)


but this error is not coming when i use normal JavaScript i:e without webpack ,
everything is happening good when using pack without webpack .
But with webpack the Zlib error is coming only when i send an ExtensionRequest.
API used is JavaScript-API 1.7.7 (latest)
gopalrgpl
Posts: 11
Joined: 27 Mar 2018, 05:00

Re: SFS2X with Webpack

Postby gopalrgpl » 28 Mar 2018, 05:00

Bax wrote:We tested v1.7.7 of our JavaScript API in Webpack v4.1.1 in the following scenario.

Project structure:

Code: Select all

root
  - dist
    - bundle.js .............. generated by Webpack
    - index.html ............. simple html loading the bundle.js file
  - lib
    - sfs2x-api-1.7.7.js ..... the SFS2X JavaScript API
  - package.json
  - src
    - main.js ................ the project's source code (see below)
  - webpack.config.js

When building the project, Webpack simply bundles the main.js file with the API .js file and deploys it to the /dist folder.

This is the content of the main.js file:

Code: Select all

import {SmartFox, SFSEvent, LoginRequest} from "../lib/sfs2x-api-1.7.7";

class Test
{
  constructor()
  {
      console.log("READY");

      this.sfs = new SmartFox({
          host: "127.0.0.1",
          port: 8080,
          debug: true,
      });
     
      this.sfs.addEventListener(SFSEvent.CONNECTION, this.onConnection, this);
      this.sfs.addEventListener(SFSEvent.CONNECTION_LOST, this.onConnectionLost, this);

      this.sfs.connect();
  }

  onConnection(evtParams)
  {
      if (evtParams.success)
         console.log("Connected to SmartFoxServer 2X!");
      else
         console.log("Connection failed. Is the server running at all?");
  }

  onConnectionLost(evtParams)
  {
      console.log("Connection lost");
  }
}

// Create test class instance
new Test();

Running the bundled code in the browser works as expected: the connection is established successfully.



I have tried the above code with the API 1.7.7 and latest API 1.7.8

Code: Select all

Uncaught ReferenceError: Zlib is not defined
    at SFSProtocolCodec.decompress (sfs2x-api-1.7.8.js:10)
    at SFSProtocolCodec.onPacketRead (sfs2x-api-1.7.8.js:10)
    at WebSocket._onSocketData (sfs2x-api-1.7.8.js:10)


the above error is coming for both the api versions only when i send an extension request.

the error is not coming and things are fine when i don't use webpack, but using webpack this Zlib error is coming.
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 28 Mar 2018, 09:21

Can you try to bundle the Zlib library separately in your web pack project?
You can get the library here: https://github.com/imaya/zlib.js (file "bin/zlib.min.js").
Paolo Bax
The SmartFoxServer Team
gopalrgpl
Posts: 11
Joined: 27 Mar 2018, 05:00

Re: SFS2X with Webpack

Postby gopalrgpl » 28 Mar 2018, 10:25

Bax wrote:Can you try to bundle the Zlib library separately in your web pack project?
You can get the library here: https://github.com/imaya/zlib.js (file "bin/zlib.min.js").



Yeah its working fine when i bundle the Zlib library(https://github.com/imaya/zlib.js (file "bin/zlib.min.js") separately in my webpack project

Thanks for the help, but is this final way or will we see a release so that we may not need to export (Zlib) the library separately???

Any way thanks for the help
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 28 Mar 2018, 10:39

Actually I don't understand what is going on. In fact the Zlib library is already bundled inside our API and should be accessible as a global object. Not sure what Webpack does, preventing this from working.
Paolo Bax
The SmartFoxServer Team
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 28 Mar 2018, 12:43

gopalrgpl wrote:Thanks for the help, but is this final way or will we see a release so that we may not need to export (Zlib) the library separately???

Actually I don't know. Zlib is a third-party library which we simply merge with our API code in the final .js file. In fact it works as expected in browsers. Again, it is difficult to say what Webpack is doing.
Paolo Bax
The SmartFoxServer Team
gopalrgpl
Posts: 11
Joined: 27 Mar 2018, 05:00

Re: SFS2X with Webpack

Postby gopalrgpl » 29 Mar 2018, 05:30

I think that webpack is exporting each and every module and in sfs-api the Zlib module is getting undefined since its not exported by webpack.

As far as i know : If the Zlib bundled within the smartfox is purely local to smartfox library, then i think webpack wouldn't create any problems.
if it is in a global scope then we have to export it separately.

For Reference: In Phaser-CE they have separated the modules such as pixi and P2 which are 3rd party they use in their lib, and gave instructions to export it seprately

A npm(Node Package Manager(https://www.npmjs.com)) package from Smartfox with specific instructions would be really helpful, since there is no official npm package for Smartfox, Developers now create their own npm pacakges,which everyone cannot believe that packages would be updated regularly, so an official npm package for smartfox-api
would help many developers around the world to use it and to update through npm .
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 03 Apr 2018, 13:48

We have fully modified the JS API build system, now hopefully preventing all the issues with Webpack.
If you are interested, we can send you a pre-release version that you can check (contact us by email).
If everything is ok, we might explore the creation of an official NPM package as you suggested.
Paolo Bax
The SmartFoxServer Team
gopalrgpl
Posts: 11
Joined: 27 Mar 2018, 05:00

Re: SFS2X with Webpack

Postby gopalrgpl » 09 Apr 2018, 06:23

Bax wrote:We have fully modified the JS API build system, now hopefully preventing all the issues with Webpack.
If you are interested, we can send you a pre-release version that you can check (contact us by email).
If everything is ok, we might explore the creation of an official NPM package as you suggested.



The new package is working good.Expecting a new release and a npm package.
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 09 Apr 2018, 06:49

Thank you for your feedback.
Both on their way.
Paolo Bax
The SmartFoxServer Team
User avatar
Bax
Site Admin
Posts: 4478
Joined: 29 Mar 2005, 09:50
Location: Italy
Contact:

Re: SFS2X with Webpack

Postby Bax » 10 Apr 2018, 16:21

The new version of the API (1.7.10) is now available here: http://www.smartfoxserver.com/download/sfs2x#p=client
We also published the NPM package here: https://www.npmjs.com/package/sfs2x-api
Paolo Bax
The SmartFoxServer Team

Return to “SFS2X HTML5 / JavaScript API”

Who is online

Users browsing this forum: No registered users and 2 guests