Socket.io cli/ systemjs

Help Requests
1

I have an old repo uing “aurelia-cli”: “^0.23.0”, with “jspm”: {
“dependencies”: {
“socket.io-client”: “github:socketio/socket.io-client@^2.1.0”
},
Everything works!
Tried to update to cli with system js. “aurelia-cli”: “^1.0.0-beta.15”,
“socket.io-client”: “^2.2.0”
but get http://localhost:9000/socket.io/?EIO=3&transport=polling&t=Mkb1WrL 404 (Not Found)
Aurelia.json

{
  "name": "aurelia-cli-kendoui",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts",
    "index": "index.html",
    "baseDir": "."
  },
  "transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
      "plugins": [
        "transform-es2015-modules-amd"
      ]
    },
    "source": "src/**/*.js"
  },
  "markupProcessor": {
    "id": "minimum",
    "displayName": "Minimal Minification",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test/unit/**/*.js"
  },
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "scripts",
        "index": "index.html",
        "baseDir": "."
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage",
      "rev": "stage & prod"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
          "node_modules/@babel/polyfill/dist/polyfill.min.js",
          "node_modules/requirejs/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          "text",
          {
            "name": "socket.io-client",
            "path": "../node_modules/socket.io-client/dist",
            "main": "socket.io"
          },
        
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "aurelia-fetch-client",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap",
            "main": "dist/js/bootstrap.min",
            "deps": [
              "jquery"
            ]
          },
          "tslib",
          {
            "name": "materialize-css",
            "main": "dist/js/materialize.js",
            "path": "../node_modules/materialize-css",
            "resources": [
              "dist/css/materialize.css"
            ]
          },
          {
            "name": "aurelia-materialize-bridge",
            "main": "index",
            "path": "../node_modules/aurelia-materialize-bridge/dist/amd",
            "resources": [
              "**/*.{css,html}"
            ]
          },
          "jquery",
          {
            "name": "kendo",
            "path": "../node_modules/@progress/kendo-ui/",
            "lazyMain": true,
            "resources": [
              "js/kendo.button.js",
              "js/kendo.datepicker.js",
              "js/kendo.grid.js",
              "js/kendo.editor.js",
              "js/kendo.multiselect.js",
              "js/kendo.data.js",
              "js/kendo.data.odata.js",
              "css/web/kendo.common.min.css",
              "css/web/kendo.default.min.css"
            ]
          },
          {
            "name": "aurelia-kendoui-bridge",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
            "main": "index",
            "resources": [
              "common/*.{js,html}",
              "button/*.{js,html}",
              "grid/*.{js,html}",
              "editor/*.{js,html}",
              "multiselect/*.{js,html}"
            ]
          }
        ]
      }
    ]
  }
}
1 Like
2

That http://localhost:9000/socket.io/?EIO=3&transport=polling&t=Mkb1WrL looks like a request to server side, anything changed on server side? The fact that it tries to fallback using polling is strange, because even IE10 supports websocket.

Another thing, not related, just informative, you can reduce the "dependencies" section a lot, if you bootstrap is v4, you can reduce them to merely:

"dependencies": [
          "aurelia-bootstrapper",
          "aurelia-loader-default",
          "aurelia-pal-browser",
          {
            "name": "aurelia-testing",
            "env": "dev"
          },
          "text"
        ]
1 Like
3

BTW, latest cli version is 1.0.2.

1 Like
4

Thanks for reply. The server has not changed and decided to rebuild the app playing close attention to all additions. I now have this all working and will post repo to github very soon. Also working on a FrontEndCreator demo as I feel Aurelia can use more real world examples especically with sockets.

3 Likes
5

July 3
I posted a public repo at https://github.com/johntom/aurelia-cli-sio and used the latest cli with systemjs settings.
Note: the client sio works but browser reports the following error and I dont know how to fix.
index.js:83 POST http://localhost:9000/socket.io/?EIO=3&transport=polling&t=Mks2mpm 404 (Not Found)
line 83 references ~node_modules/socket.io-client/dist/webpack:/~/backo2/index.js
82| Backoff.prototype.setJitter = function(jitter){
83 |this.jitter = jitter;
84 |;

1 Like