Özgür Özvarış

Bir yazılımcının kırık dökük dünyası

Basit SignalR uygulaması - 2 Server to Client

clock Mart 4, 2016 17:40 by author OzgurOzvaris

Merhaba Arkadaşlar,

Geçen gün ki çalışmamızda n client'ın birbiri ile signalr ile haberleşmesini dair basit bir mvc3 uygulaması gördük

Basit SignalR uygulaması - 1 Client to Client .

Bu gün ise dışarıya açık bir webapi yazacağız ve 3. party bir uygulama be web api aracılığı ile clientlarımıza mesaj gönderecek. Biz kendi uygulamamızda santral uygulamasının web api aracılığı ile client'larımıza çalan telefona göre pencere açması için bu yöntemi kullandık. Sizlerde istediğiniz benzer amaçlar için kullanabilirsiniz.

Kaynaklar,

How to create Web API using MVC 3.0

Routing with Multiple Parameters using ASP.NET MVC

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

Öncelikle bir nuget paketi yüklemelisiniz

Install-Package Microsoft.AspNet.WebApi -Version 4.0.30506

Ardından global.asax a bir route satırı eklemek geliyor. !Beni biraz uğraştırdı. Bu route satırının diğer route satırlarının üstüne eklemenizi tavsiye ederim. Aksi taktirde çalışmayabilir. ! 

using System.Web.Http;
routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new {id = RouteParameter.Optional}
                );

Artık yazacağımız web api'ye http://sitename/api/ApiName?paramaters şeklinde erişebiliriz. 

Şimdi geçen uygulamamızda geliştirdirdiğimiz uygulamamızdaki client lara mesaj gönderen bir örnek api uygulaması yazalım.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

namespace SignalRSample.Controllers
{
    /// <summary>
    /// http://stackoverflow.com/questions/11472920/send-signalr-message-from-server-to-all-clients
    /// http://stackoverflow.com/questions/21519911/how-to-create-web-api-using-mvc-3-0
    /// http://stackoverflow.com/questions/2246481/routing-with-multiple-parameters-using-asp-net-mvc
    /// 3. nolu global.asax route basamağını diğer routların üstüne yazmayınca çalışmadı
    /// </summary>
    public class ValuesController : ApiController
    {

        public string Get(string id, string Message)
        {
            SignalRHost.OpenPopUp(id, Message);
            return "1";
        }

    }
}

Şimdi uygulamamızı çalıştıralım.ve client id olarak 1 Set edelim

test apimizi adres bardan çağıralım.

http://localhost:50995/api/Values?id=1&message=Merhaba%20D%C3%BCnya

Eğer sorunsuz bir şekilde basamakları uyguladı iseniz. Ekranda merhaba dünya mesajını görmüş olmanız gerekiyor.

 

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

İyi çalışmalar.

 

 



Basit SignalR uygulaması - 1 Client to Client

clock Mart 4, 2016 11:37 by author OzgurOzvaris

Merhaba,

Web yazılımlarında bazen client'lar ın birbiri ile etkileşim içinde olması yada serverdan bazı clientlara yada tamamına mesajlar göndermeniz gerekebilir. Bir çok benzer senearyado signalR güzel bir mesajlaşma imkanı sağlıyor.

Burada örneklerde paylaşacağım signalR uygulaması signalR 1.0 örnekleridir. yinede 2.0 için size yol gösterecektir.

Kaynaklar 

ASP.NET SignalR

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

Öncelikle SignalR yi sisteme kurmanız gerekiyor bunun için iki yol var.

1. Yol : Nuget Console üzerinden Install-Package Microsoft.AspNet.SignalR

2. Yol : Manuel kurulum

SignalR sayfasından indiriyoruz.

Dll lerini referans'a ekliyoruz.

 

global.asax Application_Start'a 

RouteTable.Routes.MapHubs() satırını ekliyoruz (bu satır eklenmezse biraz sonra javascript bölümüne ekleyeceğimiz otomatik oluşan signalr/hubs scripti oluşturulmuyor)

Web.config

<validation validateIntegratedModeConfiguration="false" />

<modules runAllManagedModulesForAllRequests="true"/>

satırları olmalı. (Zaten default olarak bu şekilde...)

Javascript

SignalR çalıştırmak istediğiniz sayfaya

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.blue/js/jquery-1.8.3.js")" ></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.signalR-1.0.0-rc2.min.js")"></script>

<!--Reference the autogenerated SignalR hub script. -->

<script type="text/javascript" src="/signalr/hubs"></script>

javascript dosyalarını referans göstermeniz gerekiyor. jquery daha yüksek olabilir ancak 1.5 gibi versiyonlarda hata alıyorsunuz. Buna dikkat edin.

Şimdi yapmamız gereken basit mvc tabanlı bir SinalR uygulaması. Boş mv3 projesi oluşturalım.

Önce mesaj alıp vermede kullanmak için bir SignalRHost Class'ı oluşturuyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
using Microsoft.AspNet.SignalR.Transports;
using Microsoft.AspNet.SignalR.Infrastructure;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
using System.Timers;

namespace CCMWeb1_0
{
    [HubName("CCMainSRHub")]
    public class SignalRHost : Hub
    {

        /// <summary>
        /// http://stackoverflow.com/questions/14439389/sending-json-with-signalr
        /// </summary>
        /// <param name="name"></param>
        /// <param name="message"></param>
        public void Send(string ClientID, string MessageType, string Message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(ClientID, MessageType, Message);

        }

        public static void OpenPopUp(string ClientID)
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<SignalRHost>();
            context.Clients.All.broadcastMessage(ClientID, "OpenPopUp", "OK");
        }
    }
}

 Views->Home->Index.chtml içine bir kaç java script fonksyonu ekliyoruz.

@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.9.2.blue/js/jquery-1.8.3.js")" ></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.signalR-1.0.0-rc2.min.js")"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="/signalr/hubs"></script>
<script type="text/javascript">
    var $lib = {};
</script>
<script type="text/javascript">
    $(document).ready(function() {

    });

    //Client'ın kendine özel id'sini set ediyor
    function SetID() {



        $("#hdnConnectionID").val($("#txtConnectionID").val());

        $("#lblConnection_ID").text($("#txtConnectionID").val());

        $lib.ClientID = $("#txtConnectionID").val();

        //alert($("#hdnConnectionID").val());

    }

    $(function () {
        // Declare a proxy to reference the hub. 
        //var CCMainSR = $.connection.CCMainSRHub;


        // Create a function that the hub can call to broadcast messages.
        //Serverdan gelen mesajları alıp yönetiyor
        $.connection.CCMainSRHub.client.broadcastMessage =
        function (pClientID, MessageType, Message) {



            if (pClientID == $lib.ClientID || pClientID == "All" || pClientID == "all") {
                //alert(pClientID);
                //alert(Message);
                $('#txtReceivedMessage').val($('#txtReceivedMessage').val() + Message + "\n");

            }

        };


        //Bu satır önemli...
        $.connection.hub.start().done(function () { });
    });

    //Server'a clientlara gönderilmek üzere mesaj gönderiyor
    function SendSignalR(ClientID, MessageType, Message) {
        if (ClientID == "") {
            alert("Have to Enter Receiver ID");
            return;

        }

        
        
        $.connection.CCMainSRHub.server.send(ClientID, MessageType, Message);
    }

</script>

<h2>@ViewBag.Message</h2>
<p>
    <input type="hidden" id="hdnConnectionID"/>
    <table>
        <tr>
            <td>
                <span >Connection ID</span>
            </td>
            <td>
                <span id="lblConnection_ID">0</span>
            </td>
        </tr>
        <tr>
            <td>
                <span >Set Connection ID</span>
            </td>
            <td>
                <input type="text" id="txtConnectionID"/>
            </td> 
            <td> <input type="button" onclick="SetID();" value="SetID"/></td>
        </tr> 
        <tr>
            <td>
                <span >Receivers ID (multiple user sperate with comma , )</span>
            </td>
            <td>
                <input type="text" id="txtReceiver"/>  <span >Set value "All" to send all user</span>
            </td> 
            <td> </td>
        </tr>
        <tr>
            <td>
                <span >Message</span>
            </td>
            <td>
                <input type="text" id="txtMessage"/>
            </td> 
            <td> <input type="button" onclick="SendSignalR($('#txtReceiver').val(),'Test',$('#txtMessage').val());" value="Send Message"/></td>
        </tr>
        
        <tr>
            <td>
                <span >Recived Messages</span>
            </td>
            <td colspan="3">
                <textarea id="txtReceivedMessage" cols="40" rows="5" style="width:500px; height:250px;" ></textarea>    
                
            </td> 
            
        </tr>
    </table>
    
    
</p>

Afiyetle artık basit bir chat signalR uygulamanız oldu.

Set Client ID diyerek istediğiniz kadar client ekranı browserda açabilirsiniz. Mesaj göndermek istediğini client'ın id sini yazarak yada All diyerek bütün client lara mesaj gönderebilirsiniz.

Örnek projemizin kaynak kodu SignalRSample.zip (9,18 mb) (vs 2010 mvc 3)

İsterseniz bu yapıya bir de web api ekleyerek bir sonraki projede bağımsız bir merkezden clientlarımıza mesaj gönderelim ne dersiniz?

Görüşmek üzere.

 

 

 



Hakkımızda  AboneOl 

Blog Yayınımıza Hoşgeldiniz.

Month List

RecentPosts

Sign In