gempir gempir - 20 days ago 19
AngularJS Question

socket.io-client in Angular 2 app

I'm trying to use the socket.io client in my angular 2 app and installed it and typings

I'm just importing from 'socket.io-client';

but somehow I get tons of errors from that:

enter image description here

I can use the lib in my index.html if I load the script from a cdn and just put the init code in a

<script>
tag but I can't use it in my actual angular 2 app.

What am I doing wrong here?

This is my boilerplate: https://github.com/mgechev/angular2-seed

The examples for socket.io seem outdated which is why I avoided them.

this is all i'm doing and already getting those errors:

import * as io from 'socket.io-client';
[...]
var socket = io('127.0.0.1');


So the issue seems to be related to SystemJS in someway.
This https://github.com/mgechev/angular2-seed/wiki/Add-external-dependency suggests I can add the socket.io-client and it should add all dependencies automaticly that doesn't seem the case though.

I've tried the full example but that won't work either.

Answer

I am using socket io in my angular-cli based project. It was easy to configure. Let me show you my configuration-

First you have to

npm install socket.io --save

Then, open your angular-cli-build.js and add 'socket.io-client/**/*.*' like this way-

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'socket.io-client/**/*.*'
    ]
  });
};

Open your system-config.ts under src and add like this way

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'socket.io-client' : 'vendor/socket.io-client'
};

/** User packages configuration. */
const packages: any = {
  'socket.io-client' : {main: 'socket.io.js'}
};

Add <script src="vendor/socket.io-client/socket.io.js"></script> in your src/index.html(Yes, It is so much important)

Now, It is you and your code. I added my socket io in a service

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

export class ChatService {
  private url = 'http://localhost:5000';  
  private socket;

  sendMessage(message){
    this.socket.emit('add-message', message);    
  }

  getMessages() {
    let observable = new Observable(observer => {
      this.socket = io(this.url);
      this.socket.on('message', (data) => {
        observer.next(data);    
      });
      return () => {
        this.socket.disconnect();
      };  
    })     
    return observable;
  }  
}

I am using 2.0.0-rc.4 and my angular-cli version is 1.0.10-beta and socket.io version is socket.io": "^1.4.6. It worked for me, and it will definitely work for you

Comments