ایجاد یک WhatsApp Messenger با استفاده از ASP.NET

این مقاله به شما نشان می دهد که چگونه یک WhatsApp messenger تحت وب در برنامه ASP.NET ایجاد کنید.

  ایجاد یک WhatsApp Messenger با استفاده از ASP.NET

مرحله 1 :

ویژوال استودیو را باز کنید و ASP.NET Web Application را انتخاب کنیدو یک نام برای آن بگذارید ما در اینجا Web WhatsApp Messenger نام گذاری کرده ایم و سپس روی دکمه ی OK کلیک کنید.سپس یک قالب Empty را انتخاب کنید و تیک Web Forms را بزنید و دکمه ی OK را بزنید.

مرحله 2:

حال HTML Page را به پروژه اضافه کنید و نام آن را Index.html بگذارید.سپس روی فایل Index.html کلیک کنید و آن را به صورت Set Start As Page تنظیم کنید.

بعد از این روی فایل index.html کلیک کنید و فرم را طراحی کنید.

 

کد:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WhatsApp</title>
</head>
<body  dir="rtl">
    <table>
        <tr>
            <td>
               نام کاربری :
            </td>
            <td>
                <input type="text" id="txtPhoneNumber" style="width:400px;" />
            </td>
        </tr>
        <tr>
            <td>
                پسورد :
            </td>
            <td>
                <input type="password" id="txtPassword" style="width:400px;" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" id="btnLogin" value="ورود" />
            </td>
        </tr>
  
        <tr>
            <td>
               به :
            </td>
            <td>
                <input type="text" id="txtTo" style="width:400px;" />
            </td>
        </tr>
        <tr>
            <td>
                پیام :
            </td>
            <td>
                <textarea id="txtMessage" style="width:400px; height:70px;"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" id="btnSend" value="ارسال" />
            </td>
        </tr>
    </table>
    <ul id="status"></ul>
</body>
</html>

 

مرحله 3:

روی پروژه راست کلیک کنید و روی Manage NuGet Packages کلیک کنید و SIGNALR را نصب کنید و روی دکمه  Accept  کلیک کنید بعد از نصب ، فایل readme.txt که کپی محتوا را ، در داخل خودش دارد را نشان میدهد.

 

سپس به سادگی یک کلاس اضافه کنید و نام Startup.cs  را به آن بدهید و کد زیر را در آن وارد کنید.

namespace MyWebApplication
{
      public class Startup            
          {
              public void Configuration (IAppBuilder app)    
                   {
                        app.MapSignalR();
                    }
            }
}

 

حال به فایل Index.html انتقال دهید و بعد از ایجاد کد design کدهای زیر را بعد از تگ table قرار دهید.

    <ul id="status"></ul>  
        <script src="Scripts/jquery-1.6.4.min.js"></script>  
        <script src="Scripts/jquery.signalR-2.2.0.min" ></script>  
          
        <script type="text/javascript">  
            $(function()  
            {  
                var chat = $.connection.chatHub;  
                chat.client.notifyMessage = function (message) {  
                    var endcodeMessage = $('<div />').text(message).html();  
                    $('#status').append('<li>' + message + '</li>');  
                };  
      
                $.connection.hub.start().done(function () {  
                    $('#btnLogin').click(function ()  
                    {  
                        var phoneNumber = document.getElementById('txtPhoneNumber').value;  
                        var password = document.getElementById('txtPassword').value;  
                        chat.server.login(phoneNumber, password);  
                    });  
                    $('#btnSend').click(function ()  
                    {  
                        var to = document.getElementById('txtTo').value;  
                        var message = document.getElementById('txtMessage').value;  
                        chat.server.send(to, message);  
      
                    });  
      
      
                });  
            }  
            )  
      
      
      
        </script>

مرحله 4:

شما به API رسمی WhatsApp که در اینترنت موجود است ، نیاز دارید. اگر شما نمی توانید آن را پیدا کنید یا با مشکلات زیادی روبرو شدید ما API واتس آپ را فراهم کرده ایم تا شما از آن استفاده کنید.حال برای اضافه کردن WhatsApp API به پروژه، روی Reference راست کلیک کنید و Add Reference را انتخاب کنید در پنجره ای که برای شما باز شده است دکمه ی Browse را بزنید و موقعیت مکانی  WhatsApp Api  را بدهید و دکمه ی OK را بزنید .حال API واتس آپ به پروژه شما اضافه میشود که درسمت چپ ظاهر شده است.

 

API دو تا نسخه برای سیستم عامل دارد .حال به property پروژه بروید و پلت فرم  مورد نظر را تنظیم کنید . بعد از این یک کلاس جدید به نام به اسم  ChatHub.cs به پروژه خود اضافه کنید.

 

 

مرحله 5:

یک کلاس جدیدChatHub ایجاد کنید و با کلاسHub گسترش دهید وthreading وفضا نامWhatsApp API  را وارد کنید و کد را بچسبانید وWhatsApp Messenger شما آماده است.

;  
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Threading;  
    using WhatsAppApi;  
      
    namespace Web_WhatsApp_Messenger  
    {  
        public class ChatHub : Hub  
        {  
            static WhatsApp wa;  
      
            public void Send(string to, string message)  
            {  
                if(wa.ConnectionStatus== ApiBase.CONNECTION_STATUS.LOGGEDIN)  
                {  
                    wa.SendMessage(to, message);  
                    Clients.All.notifyMessage(string.Format("{0}: {1}", to, message));  
                }  
            }  
      
            public void Login(string phoneNumber,string password)  
            {  
                Thread thhread=new Thread(t =>  
                    {  
                      wa=new WhatsApp(phoneNumber,password,phoneNumber,true);  
                      wa.OnConnectSuccess+=() =>  
                    {  
                      Clients.All.notifyMessage("Connected......");  
                        wa.OnLoginSuccess+=(phone,data)=>  
                            {  
                                Clients.All.notifyMessage("Login Success !");  
                            };  
                        wa.OnLoginFailed +=(data) =>  
                            {  
                                Clients.All.notifyMessage(string.Format("Login failed: {0}", data));  
                            };  
                        wa.Login();  
                    };  
                        wa.OnConnectFailed += (ex) =>  
                            {  
                                Clients.All.notifyMessage(string.Format("Connected failed: {0}", ex.StackTrace));  
                            };  
                        wa.Connect();  
                    })  
                { IsBackground=true};  
                thhread.Start();  
            }  
              
        }  
    }  

حال http://www.watools.es را باز کنید و شماره موبایلی که می خواهید بر روی آن پیام را دریافت کنید،  به همراه نام  کشورتان وارد کنید. حال کدی را که دریافت کردید وارد کنید ،سپس رمز عبور برای شما ساخته می شود..حال WhatsApp Messenger را اجرا کنید شماره و پسورد را بدهید،  حالا شما می توانید پیام را به دوستانتان ارسال کنید.

 

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب