I’ve been playing around with sockets and websockets recently. Not too long ago I wrote about creating a real-time chat applicationusing 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.

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 myprevious 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:

tnspluginaddnativescript-websockets

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:

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:

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 zone.run 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: