Sharing Top Content from the Angular-sphere.

Communicate With Websockets In A NativeScript Angular Application

  • You just saw how to create a NativeScript websocket client application.
  • Communicate With Websockets In A NativeScript Angular Application
  • The socket variable will hold our websocket while messages will hold all chat messages that will be bound to the UI.
  • Creating a NativeScript Project with Websockets
  • Because NativeScript applications are native applications and not web applications, the concept of websockets don’t quite exist.

Learn how to use websockets in a NativeScript Android and iOS application built with the Angular framework. Useful for real-time communication between apps.

@mscwebdev: Communicate With #Websockets In A #NativeScript #AngularJS 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.

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.

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:

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.

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:

require ( “nativescript-websockets” ) ;

     selector : “my-app” ,

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:

for updating the UI within a listen event.

class we have a few public and private variables:

variable is bound to a form within the UI.

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.

method is where all the magic happens:

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.

method:

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:

block.  At this point we can focus on the UI of the application.

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:

array.

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.

Communicate With Websockets In A NativeScript Angular Application

Comments are closed, but trackbacks and pingbacks are open.