Communicate With Websockets In A NativeScript Angular Application

I’ve been playing around with sockets and websockets recently.  Not too long ago I wrote about creating a real-time chat application using Golang and Angular that made use of websockets.  In that example we created a chat server using the Go programming language and a client facing web application using Angular.  The communication between the two used websockets to keep things real-time.

What if we wanted to create a native mobile application for Android and iOS that communicated via websockets to our server or any other websocket server?  Using NativeScript, it is very possible to create a mobile client that works with the Golang with Angular example as seen previously.

The example we’re going to see is a simple chat application.  The Android and iOS application will connect to a server using websockets and communicate to it in real-time.

NativeScript Websocket Example

The focus of this example will not be creating a websocket server, but instead a NativeScript websocket client.  If you want a working and easy to use Golang websocket server, check out my previous article on the topic.

Creating a NativeScript Project with Websockets

To make the NativeScript application easy to understand, we’re going to start with a fresh project.  With NativeScript installed, execute the following using the CLI:

In the above commands, we’re creating an Angular with TypeScript project by making use of the --ng tag.  While we’re adding the iOS build platform, we can’t actually build for iOS unless we’re using a Mac with Xcode installed.

Because NativeScript applications are native applications and not web applications, the concept of websockets don’t quite exist.  To make this possible, we need to install the nifty nativescript-websockets plugin by Nathanael Anderson.  To do this, execute the following within your project:

At this point the application is created and ready to use websocket communications.

Adding the Angular and TypeScript Logic

For simplicity, this chat application will only be a single page application.  This means all of our logic will reside in a single file.  Open the project’s app/app.component.ts file and include the following TypeScript code:

There is a lot going on in the above so we’re going to break it down.

We need to first import a few Angular components as well as the websocket plugin:

The websocket listeners will start in the ngOnInit which is part of the OnInit interface.  The socket will be gracefully destroyed in the ngOnDestroy which is part of OnDestroy.  Listeners with Angular UIs tend to be a little wonky so we need to use NgZone for updating the UI within a listen event.

Inside the AppComponent class we have a few public and private variables:

The socket variable will hold our websocket while messages will hold all chat messages that will be bound to the UI.  The chatBox variable is bound to a form within the UI.

Inside the constructor method we can initialize our variables and establish a connection to the server via websockets:

The websocket address is that of which I created in the Golang example.  You can simply replace the address with that of your actual websocket server.

The ngOnInit method is where all the magic happens:

With websockets there are four possible events.  When the connection is established, when a data load or message was received, when the socket connection was closed, and when there was an error.  Any time we need to present something on the screen, we wrap it in a and everything will be great.

To avoid confusion, the data we’re expecting is based once again on the Golang application that I’ve been mentioning.  In that application, the data payload is JSON in the following format:

With the format known, we can see that we’re parsing it into a JSON object.

When it comes to actually sending data to the other end, we have our send method:

If the form is not empty, send the content to the socket and clear the form.  Depending on if the server relays the message back to the client, the message listener might trigger.

Because data will be bound to forms within the UI, a certain Angular module must be imported.  Open the project’s app/app.module.ts file and make it look similar to the following:

Essentially we’ve just imported NativeScriptFormsModule and added it to the imports array of the @NgModule block.  At this point we can focus on the UI of the application.

Designing the User Interface

When building the UI we’re going to need to play around with CSS and XML markup.  Starting with the project’s app/app.component.html file, open it and include the following:

The above UI is composed of a navigation bar, and split content.  At the bottom, in the format of a footer, we have a text field and in the middle we have a list with all the data found in the messages array.

The chat-area class name can be defined in the project’s app/app.css file like so:

Not a whole lot is going on in the UI, but with a little imagination it could receive a bit more complexity.  That is a project for another day though.


You just saw how to create a NativeScript websocket client application.  While I referenced a previous Golang websocket server example throughout this guide, it is by no means a requirement towards the success of using websockets.  In this example we send and receive message data in real-time, just like you’d see in a chat application.  Websockets can be used far beyond chat applications with a bit of imagination.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.


    How difficult it will be if i will try Angular -2 and Typescript for a chat application for my website

    • I have a policy of not clicking links that are not GitHub. Why don’t you tell me what your website is? Is it written in Golang or Angular like this tutorial?


        still i am working on it,it is on angular 2.

        • Shouldn’t be too difficult. You’ll need to develop a server that can process websocket communication and manage the connections. Doesn’t have to be in Golang, but I did create one in Golang.

  • Xsmael The-Best

    you said: “I have a policy of not clicking links that are not GitHub.” seriously ?!! you never do that ? am amazed but why ? any reason ?

    • Two reasons:

      If you’re asking me a question I don’t want to go on an adventure to find it.
      I’m not going to risk ending up in a NSFW site or any other questionable location.

      I do visit sites that are not github, but not through the comments section of my blog

      • Xsmael The-Best

        oh okay, i thought you were afraid to get some viruses, or malicious stuff…

        • Malicious content is to be concerned about, but I’m more about teaching proper question etiquette.