Adding Socket Io Into Angular 2

Question

Okay so I'm having the worst luck in trying to figure out how to add Socket.io into an angular 2 app.

I'm using this angular 2 expresss starter. From the way I see it I'm suppose to add this socket.io dependencies inside typings.json

{
  "globalDependencies": {
    "body-parser": "registry:dt/body-parser#0.0.0+20160619023215",
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "express": "registry:dt/express#4.0.0+20160708185218",
    "express-serve-static-core": "registry:dt/express-serve-static-core#4.0.0+20160715232503",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "mime": "registry:dt/mime#0.0.0+20160316155526",
    "node": "registry:dt/node#6.0.0+20160720070758",
    "serve-favicon": "registry:dt/serve-favicon#0.0.0+20160316155526",
    "serve-static": "registry:dt/serve-static#0.0.0+20160606155157"
  },
  "dependencies": {
    "jsonwebtoken": "registry:npm/jsonwebtoken#5.5.4+20160208220328"
  }
}

Where are they getting those values from?? Example : "registry:dt/express#4.0.0+20160708185218"

Another thing is the importing part.

import * as express from "express";
import { join } from "path";
import * as favicon from "serve-favicon";
import { json, urlencoded } from "body-parser";

I'm use to seeing

var express = require('express');
var socket_io = require('socket.io');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

So would this be correct?

import * as socket_io from "socket.io";

Andy-Delosdos · Accepted Answer · 2016-08-01 00:16:37Z

1

DT = DefinitelyTyped. It's a library of d.ts (TypeScript definition) files. See more here: https://github.com/DefinitelyTyped/DefinitelyTyped

typings.json adds TypeScript definitions to a project, which are used when importing packages that are not natively written in TypeScript (e.g. JavaScript packages like jQuery).

The Typings package can be found here: https://www.npmjs.com/package/typings

If you have installed the "typings" package globally, you will be able to search for TypeScript definitions by using "typings search packagename" in your command line. Take note of the source, this tells you where the d.ts file lives. In the case of socket.io-client, it's on DT. So, to install it you'll need to use the following command:

typings install dt~socket.io-mocha --global --save

This will add a reference to your typings.json file, then download the d.ts

To actually use a package in your project, you will need to add it to the devDependencies in your package.json file. You will then need to run the command NPM install in your project root. After this, you will be able to import objects into your project.

If you want to import a specific class / object / etc you can use: import { object_name_here } from 'package_name_here';

If you want to import everything you can use something like this:

import * as alias_name_here from 'package_name_here';

... and then alias_name.ojbect_name to get a reference to the bits you want to use

So in your case, you could do something like:

import * as sioc from 'socket.io-client';
let socket = sioc('serveraddress');
etc, etc...

edited Aug 1, 2016 at 0:16

answered Jul 31, 2016 at 23:00

Andy-Delosdos

3,7301 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Victor Le Over a year ago

Sorry I'm still a little stuck T.T I'm still having trouble adding socket.io inside typings.json. I typed "typings search socket.io" and got a list of source homepage. What am I suppose to do next?

Victor Le Over a year ago

Am I suppose to write some cli to add my socket registry inside the json file?

Andy-Delosdos Over a year ago

Updated my answer. After searching, you need to install. This will add it to your typings file, and download the associated d.ts. See above. Hope this helps

Collectives™ on Stack Overflow

Adding Socket Io Into Angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related