找不到uws-使用SocketIO的VueJS

Question

I'm trying to build a vue application using SocketIO. The first error I get on compiling ( fs not found ) is already fixed with adding: node: { fs: 'empty' } to my webpack.base.conf.js file.

But I have no idea how to fix the second error:

ERROR  Failed to compile with 1 errors                                 
This dependency was not found:
* uws in ./node_modules/engine.io/lib/server.js

Answer 1

import io from 'socket.io-client'

If you don't add "-client", you are using the server component. This won't work, as there is no "fs" on the browser, just on nodejs side.

To get typescript import to work, you need npm install of @types/socket.io-client

Update: Seems, that uws is not required for the client side. I could remove uws without running into errors. Will recheck that, if required...

Answer 2

Seems uws package version has been deprecated, see here

You can install other stable versions. Try below

$ rm -rf ./node_modules/uws
$ npm install uws@10.148.1 --save

Update 1

New versions with slightly different goal and purpose are available at https://github.com/uNetworking/uWebSockets.js

Use of old releases is not recommended due to known bugs and problems.

Answer 3

package.json :

{
  "name": "chat",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs"
  },
  "dependencies": {
    "fs": "0.0.1-security",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1",
    "uws": "^10.148.1",
    "vue": "^2.5.2",
    "vue-material": "^1.0.0-beta-10.2",
    "vue-router": "^3.0.1",
    "vue-socket.io": "^2.1.1-b"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "chalk": "^2.1.0",
    "connect-history-api-fallback": "^1.4.0",
    "copy-webpack-plugin": "^4.1.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.9.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "inject-loader": "^3.0.1",
    "karma": "^1.7.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon-chai": "^1.3.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.5",
    "mocha": "^4.0.1",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.3.0",
    "phantomjs-prebuilt": "^2.1.15",
    "rimraf": "^2.6.2",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "sinon": "^4.0.1",
    "sinon-chai": "^2.14.0",
    "sw-precache-webpack-plugin": "^0.11.4",
    "uglify-es": "^3.1.3",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.7.1",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

There is not much code yet. The last things i added was that:

    <script>
    export default {
      data () {
        return {
          isConnected: false,
          socketMessage: ''
    } 
  },

  sockets: {
    connect () {
      // Fired when the socket connects.
      this.isConnected = true
    },

    disconnect () {
      this.isConnected = false
    },

    // Fired when the server sends something on the "messageChannel" channel.
    messageChannel (data) {
      this.socketMessage = data
    }
  },

  methods: {
    pingServer () {
      // Send the "pingServer" event to the server.
      this.$socket.emit('pingServer', 'PING!')
    }
  }
}
</script>

After adding that I got all the errors.