Resolved: Using socket.io with Aurelia


#1

I am trying to use socket.io with Aurelia. But it does not want to play nice.

I did ‘npm install socket.io’, and it downloaded successfully. but as soon as I try to call it within the code, there seems to be many dependencies that are not there. Some I can install manually and edit aurelia.json, but some are working even after adding them to aurelia.json (“inherits_browser” is one example).

Anyone has any success in doing that?


#2

don’t you need the client “socket.io-client” instead of the server for the front’end.


#3

this is installing socket.io-client:
~/sprinklers/ui # ./node_modules/aurelia-cli/bin/aurelia-cli.js install socket.io-client INFO [Package-installer] Using ‘npm’ to install the package(s). You can change this by setting the ‘packageManager’ property in the aurelia.json file to ‘npm’ or ‘yarn’.
INFO [Package-installer] *********** INSTALLING PACKAGES ***********
component-emitter@1.2.1 node_modules/engine.io-client/node_modules/component-emitter -> node_modules/component-emitter
- component-emitter@1.2.1 node_modules/socket.io-client/node_modules/component-emitter
ui@0.1.0 /root/sprinklers/ui
`-- socket.io-client@2.0.4

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
INFO [Install] The packages were successfully installed. Going to import them now.
INFO [Importer] ---------------------------------------------------------
INFO [Importer] *********** Configuring socket.io-client ***********
INFO [Importer] [OK] Going to execute the "Amodrotrace Strategy" strategy
INFO [Importer] *********** Finished configuring socket.io-client ***********
INFO [Metadata] Adding/removing dependencies to the 'vendor-bundle.js' bundle
INFO [Metadata] The 'socket.io-client' dependency has been added.
INFO [Tutorial] *********** Tutorial ***********
INFO [Tutorial] Are you the maintainer of socket.io-client and would you like to define a tutorial that is displayed here?
INFO [Tutorial] In order to do so you can add an "aurelia"."import"."tutorial" section to the package.json of socket.io-client. This can be set to an array of strings.
INFO [Tutorial] *********** Importing the module ***********
INFO [Tutorial] The following import statements are possible:
INFO [Tutorial] import 'socket.io-client';
INFO [Tutorial] import socket.io-client from 'socket.io-client';
INFO [Tutorial] import * as socket.io-client from 'socket.io-client';
INFO [Tutorial] We are looking into ways to detect what is the right one
INFO [Tutorial] *********** End of tutorial ***********
INFO [Importer] ---------------------------------------------------------
~/sprinklers/ui # 

once done and I try to run using aurelia-cli, I get this:
Tracing socket.io-client…
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/parseuri.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/debug.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/socket.io-parser.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/engine.io-client.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/component-emitter.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/to-array.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/component-bind.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/indexof.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/backo2.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/parseuri.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/debug.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/socket.io-parser.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/engine.io-client.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/component-emitter.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/to-array.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/component-bind.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/indexof.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------
------- File not found or not accessible ------
| Location: /root/sprinklers/ui/src/backo2.js
| Requested by: /root/sprinklers/ui/node_modules/socket.io-client/lib/index.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
-----------------------------------------------


#4

the install command looks for the main entry in the package.json (I believe) which points to the source files, instead use the file in the dist folder, this should work:

aurelia.json:

{
  "name": "socket.io-client",
  "path": "../node_modules/socket.io-client/dist",
  "main": "socket.io"
}

import it:

import io from 'socket.io-client';


#5

Make sure is in your config.js

    map: { ...

Also in your class .js file you import it

    import io from 'socket.io-client'; // bare import

And instantiate:

    this.socketio = io('', {
			'reconnection': true,
			'reconnectionDelay': 500,
			'reconnectionDelayMax': 5000,
			'reconnectionAttempts': 10
		});

Than you can start emitting

    this.socketio.emit('chatAddUser' JSON.stringify({ 
	username: this.username
    }));

and/or you can listen

    this.socketio.on('newChatUser', (eventData)=> {
        let data = JSON.parse(eventData); // do something with data received
        ....

#6

I probably had some collisions or used the wrong dep. I created a new project and added socket.io, and now it seems to be working.