Click here to Skip to main content
15,861,172 members
Articles / Web Development / Node.js

NodeJS By Microsoft Visual Studio

Rate me:
Please Sign up or sign in to vote.
4.93/5 (19 votes)
4 Jul 2016CPOL7 min read 51.5K   441   20   29
This article is a practice for nodejs on Microsoft .net platform with javascript language

Introduction

Nowadays having real time web applications as two way connection is necessary in all kind of fields. Javascript is a good solution but it just work at client side while there are some scenario which we really need to have solutions which works at server side. For instance storing data on database or processing data at server side. There are two popular technologies one is SignalR and other Node.js.

You can use it by .net from http://www.codeproject.com/Articles/1111793/Node-js-For-Net-Developers-By-WCF

What is Nodejs

Nodejs is an open source, real time communication, cross platform, server side which is written by javascript on Google`s v8 javascript engine. Also Nodejs is enable to event driven architecture for asynchronous I/O which can optimize throughput and scalability on our application.

For have a better understanding of Nodejs, it is better to expand the real meaning of above expressions. [3] 

Image 1

Why we use Node.js?

First and formost is because of we need real time solution for our web application in two way client to server and server to client side, so data can be shared between both sides. Another good advantage is Node.js is cross platform and does not need to complex preperation and installation before using it. It established well for I/O and last but not least the probability of missing data is too rare.

Real Time Communication

Real time web solutions are web technologies which enables client to achieve and receive information as soon as they are published by their authors instead of checking by software or refreshing page by user manually that whether there is new data to expose or not.

Cross Platform

Cross platform means that Nodejs is almost independent from platform and is enable to install on every machine with different operating systems such as Windows, Linux, Macintosh. So Nodejs does not need specific preparation and it is portable. 

Server Side Application

There are situations that it is not possible to give all of responsiblities to client due to client does not have potential to accept them. For instance, if we want to store data on data base or make some special processing on program we need to put these kind of functionalities on server which is remote from client and client should make try to gain its purpose.

 Event Driven Architecture

If we are working with some data management systems which have many nodes with different status so evet driven enable us to find out other status very soon so we are capable to response properly. Assume real state trading where houses are for sale or rent and customers want to be aware which house is still available and they can hit it. As soon as house is selected and is sold so its status should be changed for others i order to avoid to hit again it.

Asynchronous I/O

There are two approaches for I/O, simple way is synchronous which blocks resources and progress until communication is completed which wait and waste a lot of resources specially if we have many I/O.

Other way is asynchronous which allows critical operations do their job during it is waiting for I/O

Throughput

In such a scenario which we need to send and receive messages, there are possibilities that some messages can not be reached to stations so the rate of successful messages which are received correctly on one channel is called throughput. 

Scalability

Scalability is a capability of application that can grow by encountering large scenario such as large amount of data or nodes. So unexpected growing from quantity will not decrease quality of system.

 

Communication Protocols

1. WebSocket

Websocket is a full duplex protocol and uses http handshaking internally and allow stream of messages flow on top of TCP. It supports: Google Chrome (> 16) Fire Fox (> 11) IE (> 10) Win IIS (>8.0). Due to encrypt message and full duplex, websocket is the best solution and at first signalR checks both web server and client server whether they support websocket or not.

Simplex Communication

It just spreads in one way when one point just broadcasts while another point just can listen without sending message, such as television and radio.

Half duplex

One point sends message and in this moment another point cannot send message and should wait until the first point finishes its transmission and then send its message, it is just a one communication line at a time, such as old wireless device walkie-talkie and HTTP protocol.

Image 2

Full duplex

Both points can send and receive message at a time simultaneously, there is no need to wait until other point finishes its transmission such as telephones and websocket protocol.

Full Duplex

Image 3

2. Server Sent Events (SSE)

The next choice for signalr is server sent event, because of persistence communication between server and client. In this approach, communication does not disconnect and last data from server will update automatically and transmit to client via HTTP connection. EventSource is part of HTML5 technology.

Image 4

Hide   Copy Code

C#
<font color="#000000">var</font> evsrc = <font color="#000000">new</font> EventSource(<font color="#000000">"</font><font color="#000000">url"</font>);
       <font color="#000000">//</font><font color="#000000"> Load and Register Event Handler for Messages in this section
</font>
       evsrc.addEventListener(<font color="#000000">"</font><font color="#000000">message"</font>, function (<font color="#000000">event</font>) {
           <font color="#000000">//</font><font color="#000000">processing data in this section
</font>       });

3. Forever Frame

When client sends request to server, then server sends a hidden iframe as chunked block to client so this iframe is responsible to keep connection between client and server forever. Whenever server changes data, then send data as script tag to client (hidden iframe) and these scripts will be received sequentially.

Image 5

4. Polling

Client sends request to server and server responses immediately but after that, server disconnects connection so again for establishing communication between server and client, we should wait for next request from client. To solve this problem, we have to set timeout manually and for each 10 seconds client sends request to server to check new modification in server side and gets last update data. Polling uses resources and it is not an economic solution.

Image 6

5. Long Polling

Client sends request to server and server responds immediately and this connection remains until a specific time and during this period clients do not have to send explicit request to server while in polling client has to send explicit request to server during timeout. Comet programming covers this concept. [4]

Image 7

6. Socket.io

Socket.io is event driven and real time communication which has been abstracted all off five above technologies including websocket, forever frame and long pooling, in single API and allows application to send and receive data without worry. [5] 

 

How to code Nodejs by the aid of Microsoft .Net 

  1. Install Visual Studio 2015 , update 3 From Here
  2. Install NodeJS From https://nodejs.org/en/

  3. Install NodeJS Tools for Visual Studio From Here

  4. Install Socket.io From npm

  5. Write code on server

  6. Write code on client

  7. Test it by opening multiple browser

Install NodeJS

  1. Go to https://nodejs.org/en/
  2. If you are using windows select "v4.4.7 LTS Recommended For Most Users"Image 8

     

  3. Then Go to Download Folder and run setup file as below pictureImage 9

     

  4. Select "Next"Image 10

     

  5. There are different features and you can change them or remain them unchaged and press "Next"Image 11

Install NodeJS Tools for Visual Studio [6]

  1. Before you install NTVS, Go to "Visual Studio" and "Create New Project" -> "Templates" -> "JavaScript" -> There is NO NodeJSImage 12

     

  2. Go to https://nodejstools.codeplex.com/releases/view/614706Image 13

     

  3. Go to Download folder and run setup fileImage 14

     

  4. Finish Installing "Node.js Tools For Visual Studio" process Image 15

     

  5. Now -> Visua Studio -> Create Project -> Templates -> JavaScript -> Node.jsImage 16

     

  6. You also will have "npm" Nodejs Package Manager, which you will be able to install necessary libraries by it. Image 17

 

Install Socket.io

  • In solution right click on "npm" and select "Install New npm Packages"Image 18

 

How to use code

Image 19

Write code on Server.js   

var http = require("http");
var url = require('url');
var fs = require('fs');
var io = require('socket.io');
var port = process.env.port || 1337;
var server = http.createServer(function (request, response) {
    var path = url.parse(request.url).pathname;
    
    switch (path) {
        case '/':
            response.writeHead(200, { 'Content-Type': 'text/html' });
            response.write('hello world');
            response.end();
            break;
        case '/Index.html':
            fs.readFile(__dirname + path, function (error, data) {
                if (error) {
                    response.writeHead(404);
                    response.write("page doesn't exist - 404");
                    response.end();
                }
                else {
                    response.writeHead(200, { "Content-Type": "text/html" });
                    response.write(data, "utf8");
                    response.end();
                }
            });
            break;
        default:
            response.writeHead(404);
            response.write("page this doesn't exist - 404");
            response.end();
            break;
    }
});
server.listen(port);
var listener = io.listen(server);
listener.sockets.on('connection', function (socket) {
    //Send Data From Server To Client
    socket.emit('message', { 'message': 'Hello this message is from Server' });
    
    //Receive Data From Client
    socket.on('client_data', function (data) {
        
        socket.emit('message', { 'message': data.letter });
        socket.broadcast.emit('message', { 'message': data.letter });
        process.stdout.write(data.letter);
        console.log(data.letter);
    });
});

Write code on Index.html

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="http://localhost:8080/server.js"></script>
<script src="/server.js"></script>
<script>
    var socket = io.connect();

    socket.on('message', function (data) {
        $('#conversation').append('
' + data.message);
     });
   $(document).ready(function () {
        $('#send').click(function () {
            var msg = $('#text').val();
            socket.emit('client_data', { 'letter': msg });
         })
    });
</script>
 
This is our conversation

<input id="text" type="text" /><button id="send">send</button>

How to use and run nodejs with .net 

  1. Press F5 as it runs all of web application on .net and you will seeImage 20
  2. Open multi browser and change url to "http://localhost:1337/Index.html", type your message on text box and press button "send" , you will see as soon as you press send , you can see it on the other client.Image 21

Reference

  1. http://danielnill.com/nodejs-tutorial-with-socketio/
  2. https://en.wikipedia.org/wiki/Node.js
  3. https://nodejs.org/api/http.html#http_agent_sockets
  4. http://www.codeproject.com/Articles/732190/Real-Time-Web-Solution-for-Chat-by-MVC-SignalR-H
  5. https://nodesource.com/blog/understanding-socketio/
  6. http://www.codeproject.com/Tips/895385/Pictorial-Step-by-step-discussion-of-Nodejs-tools
  7. Socket.io

 

History

  1. First Version 4th July 2016
  2. Second Version 5th July 2016 :  I have added graph to help better and easier understannding Nodejs code

Feedback

You are most welcome to vote and say your opinion to enhance quality of my article. So please do not hesitate to leave comment.

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Doctorandin Technische Universität Berlin
Iran (Islamic Republic of) Iran (Islamic Republic of)
I have been working with different technologies and data more than 10 years.
I`d like to challenge with complex problem, then make it easy for using everyone. This is the best joy.

ICT Master in Norway 2013
Doctorandin at Technische Universität Berlin in Data Scientist ( currently )
-------------------------------------------------------------
Diamond is nothing except the pieces of the coal which have continued their activities finally they have become Diamond.

http://www.repocomp.com/

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 1507871629-Jul-22 10:50
Member 1507871629-Jul-22 10:50 
Questionformatting issue and image not included Pin
Mou_kol25-Jul-17 23:40
Mou_kol25-Jul-17 23:40 
PraiseThank you Pin
Member 110611211-Oct-16 23:44
Member 110611211-Oct-16 23:44 
GeneralMy vote of 5 Pin
Dariush Tasdighi8-Jul-16 4:38
Dariush Tasdighi8-Jul-16 4:38 
GeneralRe: My vote of 5 Pin
Mahsa Hassankashi9-Jul-16 1:14
Mahsa Hassankashi9-Jul-16 1:14 
QuestionUseful Message Pin
Vignesh Mani6-Jul-16 11:17
professionalVignesh Mani6-Jul-16 11:17 
AnswerRe: Useful Message Pin
Mahsa Hassankashi6-Jul-16 12:30
Mahsa Hassankashi6-Jul-16 12:30 
PraiseGood work.. Pin
laxmeesh.joshi6-Jul-16 8:33
laxmeesh.joshi6-Jul-16 8:33 
GeneralRe: Good work.. Pin
Mahsa Hassankashi6-Jul-16 12:29
Mahsa Hassankashi6-Jul-16 12:29 
QuestionThanks! Pin
alonsudri5-Jul-16 23:40
alonsudri5-Jul-16 23:40 
AnswerRe: Thanks! Pin
Mahsa Hassankashi6-Jul-16 0:33
Mahsa Hassankashi6-Jul-16 0:33 
PraiseMy full vote for Good work Pin
Gaurav Aroraa5-Jul-16 19:26
professionalGaurav Aroraa5-Jul-16 19:26 
GeneralRe: My full vote for Good work Pin
Mahsa Hassankashi5-Jul-16 22:57
Mahsa Hassankashi5-Jul-16 22:57 
QuestionGreat Read!. Pin
Sibeesh Passion5-Jul-16 18:50
professionalSibeesh Passion5-Jul-16 18:50 
GeneralRe: Great Read!. Pin
Mahsa Hassankashi5-Jul-16 22:54
Mahsa Hassankashi5-Jul-16 22:54 
QuestionNice tutorial Pin
Alton Ansel5-Jul-16 13:14
Alton Ansel5-Jul-16 13:14 
AnswerRe: Nice tutorial Pin
Mahsa Hassankashi5-Jul-16 22:53
Mahsa Hassankashi5-Jul-16 22:53 
QuestionNice artical Pin
Member 123166155-Jul-16 7:41
Member 123166155-Jul-16 7:41 
AnswerRe: Nice artical Pin
Mahsa Hassankashi5-Jul-16 12:17
Mahsa Hassankashi5-Jul-16 12:17 
GeneralMy vote of 1 Pin
rosdi4-Jul-16 15:16
rosdi4-Jul-16 15:16 
GeneralRe: My vote of 1 Pin
Mahsa Hassankashi4-Jul-16 23:55
Mahsa Hassankashi4-Jul-16 23:55 
GeneralRe: My vote of 1 Pin
rosdi7-Jul-16 10:50
rosdi7-Jul-16 10:50 
GeneralRe: My vote of 1 Pin
Leng Vang13-Jul-16 11:13
Leng Vang13-Jul-16 11:13 
GeneralRe: My vote of 1 Pin
Mahsa Hassankashi13-Jul-16 12:31
Mahsa Hassankashi13-Jul-16 12:31 
GeneralRe: My vote of 1 Pin
rosdi13-Jul-16 19:52
rosdi13-Jul-16 19:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.