CODEWITHSUNDEEP
angularsocket.io
Victor Le
Victor Le

Reputation: 1788

Adding Socket Io Into Angular 2

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

Upvotes: 0

Views: 988

Answers (1)

Andy-Delosdos
Andy-Delosdos

Reputation: 3720

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

Upvotes: 1

Related Questions