Chapter 4. Using WebSockets in Real Scenario

We have seen in the last chapter that how to create a real-time presentation sharing application. We understood how real-time data transfer works and how to set up the server. Now we will go to the next step, where we will see what more elements we need to add to strengthen our application in terms of structure with the use of a framework. In this chapter, we will see the different steps to create an application.

The real scenario

The question here is what is a real scenario? We have already seen an application which is a real-world scenario application, but then what we are referring to here? A properly structured application is incomplete without a framework in place. In the last application, we used a JavaScript server and a JavaScript library, did the integration, and built our application. But do you think that the application structure is good enough to support extensibility or reusability? The answer is NO, it is not, because we have not used any framework which will provide better structuring to our application. In this chapter, let's talk about the real scenario where we implement different structures or frameworks for our application.

The JavaScript framework

With the growth of HTML5, JavaScript frameworks are coming into the picture. And the scenario is that we have a lot of them to choose from. Some of the commonly used frameworks are AngularJS, Ember.js, Knockout.js, Backbone.js, and a lot more. We will be using AngularJS in our next example. AngularJS is developed by Google developers and is quite a powerful framework with a lot of needed features.

AngularJS

AngularJS is an open source framework developed by Google. It is based on a very famous design pattern: Model-View-ViewModel (MVVM). Along with that it gives features that work seamlessly with HTML5, such as directives, bindings, and controllers. It mainly handles the problems of single-page applications providing features to implement dynamic views and routing mechanisms to simplify navigation between pages without loading the complete webpage. This feature makes this framework very beneficial for developers. It not only solves the problems of development, but...

Learn by doing

Learn by doing is one of the best way of learning. Sometimes you learn about something and then implement it. But because you have already read the scenarios, you can implement it easily. One of the best methods is to start doing, and when you face a problem try to find a solution. This will improve your problem-solving skills and will help you explore more. On similar lines, let's start with an application and we will see where we encounter problems and where can we see the need for a framework.

The collaborative drawing application

Let's build a drawing application in which the user can draw on a canvas and other users can also do the same at the same time. Basically, we are creating a collaborative drawing application. Before building the application, let's gather the requirements and do some analysis, which is necessarily required to build an application.

Requirements

Here, our main requirement is that we need to make an application which provides collaborative drawing. So what we need is a client application which is connected to a server and which delivers the data from one user to another in real time. Along with that, we need to make a mechanism using HTML to draw. Instead of spending a lot of time on coding for a drawing feature, we can use a good readymade library that provides us with the features we need for drawing.

So if we make a list of the items needed to build the application, it will look like this:

• Client application

• Server

• Drawing library

• Implementation of real-time...

Do it yourself

This application is a very simple and easy-to-build application. We have seen how to create a simple application with some limited features. Many additions can be added to this application to make it more powerful. Let's give you some tips and information on features that you can develop.

User registration

Whenever the user opens the URL, a log-in/sign-up dialog box will open. User details such as his/her name will be displayed in the top-left corner of the screen.

Tip

This scenario will need a database connection. There are some databases available which can be easily connected to our Node.js server, such as MongoDB. I will leave its method of implementation to you. For help in connecting Node.js and MongoDB, visit http://mongodb.github.io/node-mongodb-native/.

The list of users

Make a button which will show you a list of users that are currently online. This scenario needs code changes both on the client as well as the server side. Let me list down some key points that you need...

The application structure

Structuring the application is a really important part. If we look at the code we have written, we can see that it does not have a good structure. The structure has to be such that in the future if we want add some features to it, it should be easy to do so. And code should be written in such a way that it is easily maintainable. To achieve this, we need to use some sort of a structure, which is called a framework. Frameworks are designed to give a sense of structure to the application.

Restructure the application

Now that we know about frameworks, let's restructure our application using the AngularJS framework. Let's see what we can restructure here; we will divide everything into model, view, controller, and service layers. Let's see what these terms are and where they fit in our application.

Model

In our application, we have not seen the need to store data, but if we want to extend our application and add more features, then there will be a need for a Model. As we have seen in some scenarios where we have a list of users and drawings, we need the Model to store the data on the client side so that it is easily accessible for use. AngularJS provides good features to store the data and the binding helps in showing the list data very easily in the UI.

View

An application is normally divided into different views, but in our application we just have one view. As we have seen in the scenarios, we need a login screen for users. In that scenario, we need a different view to be set...

Summary

In this chapter, we have seen how HTML5-based JavaScript libraries can be utilized. We have combined WebSockets with the Fabric.js library for a collaborative application. We have also seen how an application can be divided into parts and created. We have seen the development flow and learned about the structuring of the application as well.

In the next chapter, we will see the behavior of WebSocket and its implementation on mobile and tablets.