Resolved: Using socket.io with Aurelia

ehudkaldor · October 30, 2017, 6:01pm

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?

arabsight · October 31, 2017, 9:12am

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

ehudkaldor · October 31, 2017, 3:16pm

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
-----------------------------------------------

arabsight · October 31, 2017, 5:45pm

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';

damiano · October 31, 2017, 6:29pm

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
        ....

ehudkaldor · November 1, 2017, 9:23pm

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.

Topic		Replies	Views
Socket.io cli/ systemjs Help Requests	4	697	July 3, 2019
Confusion about installation of dependencies Help Requests	8	2175	January 30, 2018
Help setting up aurelia with nodejs Help Requests	2	674	September 20, 2018
Aurelia NPM setup Help Requests	5	710	April 16, 2020
[Solved] Aurelia-cli: "Default TypeScript App" warns about deprecated packages and high severity vulnerability in serialize-javascript-2.1.2 Help Requests	2	1538	August 31, 2020

Resolved: Using socket.io with Aurelia

Related Topics