Hızlı başlangıç: JavaScript kullanarak Azure Işlevleri ve SignalR hizmeti ile sohbet odası oluşturmaQuickstart: Create a chat room with Azure Functions and SignalR Service using JavaScript

Azure SignalR hizmeti, uygulamanıza kolayca gerçek zamanlı işlevselliği eklemenize olanak tanır.Azure SignalR Service lets you easily add real-time functionality to your application. Azure Işlevleri, herhangi bir altyapıyı yönetmeden kodunuzu çalıştırmanıza olanak tanıyan sunucusuz bir platformdur.Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. Bu hızlı başlangıçta, bir sunucusuz ve gerçek zamanlı sohbet uygulaması oluşturmak için SignalR hizmetini ve Işlevlerini nasıl kullanacağınızı öğrenin.In this quickstart, learn how to use SignalR Service and Functions to build a serverless, real-time chat application.

PrerequisitesPrerequisites

Bu hızlı başlangıç, macOS, Windows veya Linux üzerinde çalıştırılabilir.This quickstart can be run on macOS, Windows, or Linux.

Visual Studio Code yüklü gibi bir kod düzenleyicisine sahip olduğunuzdan emin olun.Make sure you have a code editor such as Visual Studio Code installed.

Azure Işlev uygulamalarını yerel olarak çalıştırmak için Azure Functions Core Tools (v2) ' yı (v2) yüklemekInstall the Azure Functions Core Tools (v2) to run Azure Function apps locally.

Azure Işlevleri için Node. js sürüm 8 veya 10 gerekir.Azure Functions requires Node.js version 8 or 10.

Uzantıları yüklemek için Azure Functions Core Tools Şu anda .NET Core SDK yüklü olması gerekir.In order to install extensions, Azure Functions Core Tools currently require the .NET Core SDK installed. Ancak, JavaScript Azure Işlev uygulamaları oluşturmak için .NET bilgisi gerekmez.However, no knowledge of .NET is required to build JavaScript Azure Function apps.

Azure aboneliğinizyoksa başlamadan önce ücretsiz bir hesap oluşturun.If you don't have an Azure subscription, create a free account before you begin.

Azure 'da oturum açmaLog in to Azure

Azure hesabınızla Azure portal https://portal.azure.com/ ' da oturum açın.Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

Azure SignalR Hizmeti örneği oluşturmaCreate an Azure SignalR Service instance

Uygulamanız Azure’da bir SignalR hizmeti örneğine bağlanır.Your application will connect to a SignalR Service instance in Azure.

  1. Azure portalın sol üst köşesinde bulunan Yeni düğmesini seçin.Select the New button found on the upper left-hand corner of the Azure portal. Yeni ekranda arama kutusuna SignalR hizmeti yazın ve Enter tuşuna basın.In the New screen, type SignalR Service in the search box and press enter.

    SignalR Hizmetini Arama

  2. Arama sonuçlarından SignalR Hizmeti’ni seçtikten sonra Oluştur’u seçin.Select SignalR Service from the search results, then select Create.

  3. Aşağıdaki ayarları girin.Enter the following settings.

    AyarSetting Önerilen değerSuggested value AçıklamaDescription
    Kaynak adıResource name Genel olarak benzersiz bir adGlobally unique name Yeni SignalR Hizmeti örneğinizi tanımlayan ad.Name that identifies your new SignalR Service instance. Geçerli karakterler: a-z, 0-9, ve -.Valid characters are a-z, 0-9, and -.
    AbonelikSubscription AboneliğinizYour subscription Yeni SignalR Hizmeti örneğinin oluşturulacağı abonelik.The subscription under which this new SignalR Service instance is created.
    Kaynak GrubuResource Group myResourceGroupmyResourceGroup SignalR Hizmeti örneğinizin oluşturulacağı yeni kaynak grubunun adı.Name for the new resource group in which to create your SignalR Service instance.
    LocationLocation Batı ABDWest US Size yakın bir bölge seçin.Choose a region near you.
    Fiyatlandırma katmanıPricing tier BoşFree Azure SignalR Hizmetini ücretsiz deneyin.Try Azure SignalR Service for free.
    Birim sayısıUnit count Geçerli değilNot applicable Birim sayısı, SignalR Hizmeti örneğinizin kaç bağlantı kabul edebileceğini belirtir.Unit count specifies how many connections your SignalR Service instance can accept. Bu yalnızca Standart katmanda yapılandırılabilir.It is only configurable in the Standard tier.
    Hizmet moduService mode SunucusuzServerless Azure Işlevleri veya REST API kullanmak için.For use with Azure Functions or REST API.

    SignalR Hizmeti Oluşturma

  4. SignalR Hizmeti örneğini dağıtmaya başlamak için Oluştur’u seçin.Select Create to start deploying the SignalR Service instance.

  5. Örnek dağıtıldıktan sonra portalda açın ve ayarlar sayfasını bulun.After the instance is deployed, open it in the portal and locate its Settings page. Azure SignalR hizmetini Azure Işlevleri bağlama veya REST API aracılığıyla kullanıyorsanız, hizmet modu ayarını sunucusuz olarak değiştirin.Change the Service Mode setting to Serverless only if you are using Azure SignalR Service through Azure Functions binding or REST API. Aksi halde Klasik veya varsayılan olarak bırakın.Leave it in Classic or Default otherwise.

Örnek uygulamayı kopyalamaClone the sample application

Hizmet dağıtılırken kod ile çalışmaya geçiş yapalım.While the service is deploying, let's switch to working with code. GitHub'dan örnek uygulamayı kopyalayın, SignalR Hizmetinin bağlantı dizesini ayarlayın ve uygulamayı yerel olarak çalıştırın.Clone the sample app from GitHub, set the SignalR Service connection string, and run the application locally.

  1. Bir git terminal penceresi açın.Open a git terminal window. Örnek projeyi kopyalamak istediğiniz klasöre gidin.Change to a folder where you want to clone the sample project.

  2. Örnek depoyu kopyalamak için aşağıdaki komutu çalıştırın.Run the following command to clone the sample repository. Bu komut bilgisayarınızda örnek uygulamanın bir kopyasını oluşturur.This command creates a copy of the sample app on your computer.

    git clone https://github.com/Azure-Samples/signalr-service-quickstart-serverless-chat.git
    

Azure Işlevi uygulamasını yapılandırma ve çalıştırmaConfigure and run the Azure Function app

  1. Azure portal açıldığı tarayıcıda, daha önce dağıttığınız SignalR hizmeti örneğinin, portalın en üstündeki arama kutusunda adı arayarak başarıyla oluşturulduğunu doğrulayın.In the browser where the Azure portal is opened, confirm the SignalR Service instance you deployed earlier was successfully created by searching for its name in the search box at the top of the portal. Açmak için örneği seçin.Select the instance to open it.

    SignalR hizmeti örneğini arayın

  2. SignalR hizmeti örneği için bağlantı dizelerini görüntülemek için anahtarlar ' ı seçin.Select Keys to view the connection strings for the SignalR Service instance.

  3. Birincil bağlantı dizesini seçin ve kopyalayın.Select and copy the primary connection string.

    SignalR hizmeti oluşturma

  4. Kod Düzenleyicinizde, kopyalanmış depodaki src/chat/JavaScript klasörünü açın.In your code editor, open the src/chat/javascript folder in the cloned repository.

  5. Local. Settings. Sample. JSON öğesini Local. Settings. JSONolarak yeniden adlandırın.Rename local.settings.sample.json to local.settings.json.

  6. Local. Settings. JSONdosyasında bağlantı dizesini AzureSignalRConnectionString ayarının değerine yapıştırın.In local.settings.json, paste the connection string into the value of the AzureSignalRConnectionString setting. Dosyayı kaydedin.Save the file.

  7. JavaScript işlevleri klasörler halinde düzenlenir.JavaScript functions are organized into folders. Her klasörde iki dosya vardır: function. JSON işlevde kullanılan bağlamaları tanımlar ve index. js işlevin gövdesidir.In each folder are two files: function.json defines the bindings that are used in the function, and index.js is the body of the function. Bu işlev uygulamasında iki HTTP ile tetiklenen işlev vardır:There are two HTTP triggered functions in this function app:

    • anlaş -geçerli bağlantı bilgilerini oluşturmak ve döndürmek Için Signalrconnectionınfo giriş bağlamasını kullanır.negotiate - Uses the SignalRConnectionInfo input binding to generate and return valid connection information.
    • iletiler -istek gövdesinde bir sohbet iletisi alır ve iletiyi tüm bağlı istemci uygulamalarına yayımlamak Için SignalR çıkış bağlamasını kullanır.messages - Receives a chat message in the request body and uses the SignalR output binding to broadcast the message to all connected client applications.
  8. Terminalde, src/chat/JavaScript klasöründe olduğunuzdan emin olun.In the terminal, ensure that you are in the src/chat/javascript folder. Uygulamayı çalıştırmak için gereken uzantıları yüklemek için Azure Functions Core Tools kullanın.Use the Azure Functions Core Tools to install extensions required to run the app.

    func extensions install
    
  9. İşlev uygulamasını çalıştırın.Run the function app.

    func start
    

    SignalR hizmeti oluşturma

Web uygulamasını çalıştırmaRun the web application

  1. Sizin için GitHub'da tek sayfalı örnek bir web uygulaması barındırılmaktadır.There is a sample single page web application hosted in GitHub for your convenience. Tarayıcınızda https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/ bağlantısını açın.Open your browser to https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.

    Not

    Kaynak HTML dosyası şu konumdadır /docs/demo/chat-v2/index.html.The source of the HTML file is located at /docs/demo/chat-v2/index.html.

  2. İşlev uygulaması temel URL'si istendiğinde girin http://localhost:7071.When prompted for the function app base URL, enter http://localhost:7071.

  3. İstenildiğinde bir kullanıcı adı girin.Enter a username when prompted.

  4. Web uygulaması, Azure SignalR Hizmetine bağlanmak amacıyla bağlantı bilgilerini almak için işlev uygulamasındaki GetSignalRInfo işlevini çağırır.The web application calls the GetSignalRInfo function in the function app to retrieve the connection information to connect to Azure SignalR Service. Bağlantı tamamlandığında sohbet iletisi giriş kutusu görünür.When the connection is complete, the chat message input box appears.

  5. Bir ileti yazın ve Enter tuşuna basın.Type a message and press enter. Uygulama, iletiyi Azure işlev uygulamasındaki SendMessage işlevine gönderir, bu da bağlı tüm istemcilere iletiyi yaymak için SignalR çıkış bağlamasını kullanır.The application sends the message to the SendMessage function in the Azure Function app, which then uses the SignalR output binding to broadcast the message to all connected clients. Her şey düzgün çalışıyorsa iletinin uygulamada görünmesi gerekir.If everything is working correctly, the message should appear in the application.

    Uygulamayı çalıştırma

  6. Farklı bir tarayıcı penceresinde web uygulamasının başka bir örneğini açın.Open another instance of the web application in a different browser window. Gönderilen tüm iletilerin uygulamanın tüm örneklerinde göründüğünü görürsünüz.You will see that any messages sent will appear in all instances of the application.

Önemli

HTTPS kullanarak HTML sayfası sunulur, ancak yerel Azure işlevleri çalışma zamanı varsayılan olarak HTTP kullanarak için tarayıcınızı (Firefox gibi) bir karışık içerik ilke engelleyen işlevlerinizi web sayfasından isteklerine şart koşabilir.Because the HTML page is served using HTTPS, but the local Azure Functions runtime is using HTTP by default, your browser (such as Firefox) may enforce a mixed-content policy that blocks the requests from the web page to your functions. Bunu çözmek için bu kısıtlama olması veya yerel bir HTTP sunucusu gibi başlatın bir tarayıcı kullanın http-server içinde /docs/demo/chat-v2 dizin.To solve this, use a browser that does not have this restriction or start a local HTTP server such as http-server in the /docs/demo/chat-v2 directory. Kaynak eklenir olun CORS ayarı local.settings.json.Ensure the origin is added to the CORS setting in local.settings.json.

Kaynakları temizlemeClean up resources

Bu uygulamayı kullanmaya devam etmeyecekseniz, herhangi bir ücret ödememek için aşağıdaki adımları kullanarak bu hızlı başlangıç tarafından oluşturulan tüm kaynakları silin:If you're not going to continue to use this app, delete all resources created by this quickstart with the following steps so you don't incur any charges:

  1. Azure portalında, en solda bulunan Kaynak grupları’nı ve ardından oluşturduğunuz kaynak grubunu seçin.In the Azure portal, select Resource groups on the far left, and then select the resource group you created. Alternatif olarak kaynak grubunu adıyla bulmak için arama kutusunu kullanabilirsiniz.Alternatively, you may use the search box to find the resource group by its name.

  2. Açılan pencerede kaynak grubunu seçin ve Kaynak grubunu sil’e tıklayın.In the window that opens, select the resource group, and then click Delete resource group.

  3. Yeni pencerede, silmek için kaynak grubunun adını yazıp Sil öğesine tıklayın.In the new window, type the name of the resource group to delete, and then click Delete.

Sonraki adımlarNext steps

Bu hızlı başlangıçta, VS Code ' de gerçek zamanlı sunucusuz bir uygulama oluşturup çalıştırdınız.In this quickstart, you built and ran a real-time serverless application in VS Code. Daha sonra VS Code Azure Işlevlerinin nasıl dağıtılacağı hakkında daha fazla bilgi edinin.Next, learn more about how to deploy Azure Functions from VS Code.