Angular 2 – Sockets

Hi Friends,

In this post let us see how to use sockets in our Angular 2 apps. In one of my previous posts, I have shown how to use socket.io along with Ionic 2 framework. So, many of our friends have been asking me to do a post on how to use it along with angular 2 + typescript.

Let’s begin

A screencast of this post:

The code can be found here.

For our backend we could simply go ahead and use the code we wrote for ionic2chat-server. Clone that repo using the below command.

Then cd into the ionic2chat-server directory and give the below command to start our server.

 

First of all I am using the new angular2 cli tool to scaffold out an angular app. Use the below command to do so.

Here angular2socket is the name of our app. Now we will make use of the socket.io-client module in our app. To install it give the below command.

Once this is installed, we need to install typings. To do that open up your typings.json file and add the below ambient dependency.

After adding the dependency run the below command.

Once typings are installed open up angular-cli-build.js file and add our socket.io-client to the vendorNpmFiles as shown below.

Now open up system-config.ts file present in the src/app directory and modify the contents as shown below.

Why do we do this ? Well the app is structured in such a way that the dependencies are loaded into our index.html file while we build it. So in order to use the socket.io.js file we need to get it loaded into our index.html as well and that’s why we edit angular-cli-build.js and system-config.ts files respectively.

Now that this is done, open up our angular2socket.component.ts file and add the below code.

Now this code does nothing but connect to the backend (specified url) and creates a socket. Then we use an observable for expressing the data stream that comes in through this socket.

Once a user subscribes to this datastream he can see the messages received in real-time.

The send method is used to emit messages which the user sends. To wire this up open up angular2socket.component.html file and add the below code.

This will create a text input along with a button using which the user can send a message. Whichever message the user sends can be seen printed on the console in real-time since the user listens to the same flag in which he sends the message through.

So, this is how you use socket.io in your angular 2 + typescript apps and also make use of observables to handle a data stream from an event.

Hope this helped you guys. Thanks for reading. Peace.. :)

  • Vikram Kedlaya

    Now I do not get any build error but runtime produces this
    “Error loading http://localhost:4200/node_modules/socket.io-client/socket.io.js as “socket.io-client” from http://localhost:4200/app/services/chat.service.js ; Zone: ; Task: Promise.then ; Value: Error: (SystemJS) Error: XHR error (404 Not Found) loading “

  • Vikram Kedlaya

    My bad. It is fixed now. I was using node_modules instead of vendor while mapping

    • Sorry bro.. Just now saw your comments.. Anyway., Glad to know that the issue is fixed.. :) Have a nice day..

  • Jainam Jhaveri

    I am using angular-cli and there is no typings.json file. What all changes will apply ??
    I am unable to find typings.json :(