Post
Ask Question

Create A WhatsApp Messenger Using ASP.NET

Introduction

In this article I will show you how to make a Web WhatsApp messenger in ASP.NET application.

Step 1

Open The Visual Studio and Choose the ASP.NET Web Application and set any name of project I set Web WhatsApp Messenger and then click on OK Button. Then Select the Empty Template and check the Web Forms and click on OK Button.

empty

Step 2

Now add the HTML Page and give the name index.html then left click on index.html file and set the SET START AS PAGE,

add

After this click on index.html file and design the form.

form
Code

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>WhatsApp</title>  
  5. </head>  
  6. <body>  
  7.     <table>  
  8.         <tr>  
  9.             <td>  
  10.                 User name:  
  11.             </td>  
  12.             <td>  
  13.                 <input type="text" id="txtPhoneNumber" style="width:400px;"/>  
  14.             </td>  
  15.         </tr>  
  16.         <tr>  
  17.             <td>  
  18.                 Password:  
  19.             </td>  
  20.             <td>  
  21.                 <input type="password" id="txtPassword" style="width:400px;" />  
  22.             </td>  
  23.         </tr>  
  24.         <tr>  
  25.             <td></td>  
  26.             <td>  
  27.                 <input type="button" id="btnLogin" value="Login"/>  
  28.             </td>  
  29.         </tr>  
  30.     </table>  
  31.     <table>  
  32.         <tr>  
  33.             <td>  
  34.                 To:  
  35.             </td>  
  36.             <td>  
  37.                 <input  type="text" id="txtTo" style="width:400px;"/>  
  38.             </td>  
  39.             </tr>  
  40.         <tr>  
  41.             <td>  
  42.                 Message:      
  43.             </td>  
  44.             <td>  
  45.                 <textarea id="txtMessage" style="width:400px; height:70px;"></textarea>  
  46.             </td>  
  47.         </tr>  
  48.         <tr>  
  49.             <td></td>  
  50.             <td>   
  51.                 <input type="button" id="btnSend" value="Send"/>  
  52.             </td>  
  53.         </tr>  
  54.     </table>  
  55.     <ul id="status"></ul>  
  56. </body>  
  57. </html>  
Step 3

Left click on project and click on Manage NuGet Packages and install the SIGNALR and click on Accept button after installation the readme.txt file is shown copy the content onto it.

install

Then Simply add a class and set name as Startup.cs and add this code in it,

code
Now move to the index.html file and after creating a design add the following code in it at the bottom after table tag,
  1. <ul id="status"></ul>  
  2.     <script src="Scripts/jquery-1.6.4.min.js"></script>  
  3.     <script src="Scripts/jquery.signalR-2.2.0.min" ></script>  
  4.       
  5.     <script type="text/javascript">  
  6.         $(function()  
  7.         {  
  8.             var chat = $.connection.chatHub;  
  9.             chat.client.notifyMessage = function (message) {  
  10.                 var endcodeMessage = $('<div />').text(message).html();  
  11.                 $('#status').append('<li>' + message + '</li>');  
  12.             };  
  13.   
  14.             $.connection.hub.start().done(function () {  
  15.                 $('#btnLogin').click(function ()  
  16.                 {  
  17.                     var phoneNumber = document.getElementById('txtPhoneNumber').value;  
  18.                     var password = document.getElementById('txtPassword').value;  
  19.                     chat.server.login(phoneNumber, password);  
  20.                 });  
  21.                 $('#btnSend').click(function ()  
  22.                 {  
  23.                     var to = document.getElementById('txtTo').value;  
  24.                     var message = document.getElementById('txtMessage').value;  
  25.                     chat.server.send(to, message);  
  26.   
  27.                 });  
  28.   
  29.   
  30.             });  
  31.         }  
  32.         )  
  33.   
  34.   
  35.   
  36.     </script>  
Step 4

You need the WhatsApp Official Api which is available on the internet; if you can’t find it or face any problem I am providing you a WhatsApp Api you can use.  Now left click on reference and press add button now press browse button and give the WhatsApp Api location then press OK button now the WhatsApp Api is included in your project which appears in the left side; in your solution add WhatsApp Api.

browse

The API has two versions for operating system. Now go to the project property and set platform target. After this add a new class in your project name as ChatHub.cs

build

Step 5

Create a new ChatHub class and extend with Hub class and import the threading and WhatsAppApi namespace and paste the code and your WhatsApp Messenger is ready.
  1. using Microsoft.AspNet.SignalR;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Threading;  
  7. using WhatsAppApi;  
  8.   
  9. namespace Web_WhatsApp_Messenger  
  10. {  
  11.     public class ChatHub : Hub  
  12.     {  
  13.         static WhatsApp wa;  
  14.   
  15.         public void Send(string to, string message)  
  16.         {  
  17.             if(wa.ConnectionStatus== ApiBase.CONNECTION_STATUS.LOGGEDIN)  
  18.             {  
  19.                 wa.SendMessage(to, message);  
  20.                 Clients.All.notifyMessage(string.Format("{0}: {1}", to, message));  
  21.             }  
  22.         }  
  23.   
  24.         public void Login(string phoneNumber,string password)  
  25.         {  
  26.             Thread thhread=new Thread(t =>  
  27.                 {  
  28.                   wa=new WhatsApp(phoneNumber,password,phoneNumber,true);  
  29.                   wa.OnConnectSuccess+=() =>  
  30.                 {  
  31.                   Clients.All.notifyMessage("Connected......");  
  32.                     wa.OnLoginSuccess+=(phone,data)=>  
  33.                         {  
  34.                             Clients.All.notifyMessage("Login Success !");  
  35.                         };  
  36.                     wa.OnLoginFailed +=(data) =>  
  37.                         {  
  38.                             Clients.All.notifyMessage(string.Format("Login failed: {0}", data));  
  39.                         };  
  40.                     wa.Login();  
  41.                 };  
  42.                     wa.OnConnectFailed += (ex) =>  
  43.                         {  
  44.                             Clients.All.notifyMessage(string.Format("Connected failed: {0}", ex.StackTrace));  
  45.                         };  
  46.                     wa.Connect();  
  47.                 })  
  48.             { IsBackground=true};  
  49.             thhread.Start();  
  50.         }  
  51.           
  52.     }  
  53. }  
Now open the http://www.watools.es and paste your number with the country where you receive messages to your mobile; now paste the code on it and password is generated, now run WhatsApp Messenger, give the Number and password, and now you can send the message to your friend.


Similar Articles