Öğretici: Sunucusuz Modda Azure İşlevi ile sohbet uygulaması oluşturma (Önizleme)

Bu öğretici, Sunucusuz Mod'da Socket.IO hizmeti için Bir Web PubSub oluşturma ve Azure İşlevi ile tümleştiren bir sohbet uygulaması oluşturma konusunda size yol gösterir.

Bu öğreticide kullanılan tam kod örneklerini bulun:

sunucusuz örneği Socket.IO

Önemli

Varsayılan Mod kalıcı bir sunucuya ihtiyaç duyar; Azure İşlevi ile varsayılan modda Socket.IO için Web PubSub tümleştirmesi yapamazsınız.

Önemli

Ham bağlantı dizesi yalnızca tanıtım amacıyla bu makalede görünür.

bağlantı dizesi, uygulamanızın Azure Web PubSub hizmetine erişmesi için gereken yetkilendirme bilgilerini içerir. bağlantı dizesi içindeki erişim anahtarı, hizmetinizin kök parolasına benzer. Üretim ortamlarında erişim anahtarlarınızı her zaman koruyun. Anahtarlarınızı güvenli bir şekilde yönetmek ve döndürmek ve bağlantınızın WebPubSubServiceClientgüvenliğini sağlamak için Azure Key Vault kullanın.

Erişim anahtarlarını diğer kullanıcılara dağıtmaktan, sabit kodlamaktan veya başkalarının erişebileceği herhangi bir yerde düz metin olarak kaydetmekten kaçının. Ele geçirilmiş olabileceklerini düşünüyorsanız anahtarlarınızı döndürün.

Önkoşullar

Etkin aboneliği olan bir Azure hesabı. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
Azure İşlevi çekirdek aracı
Socket.IO kitaplığı hakkında biraz bilgi.

Sunucusuz Modda Socket.IO kaynağı için Web PubSub oluşturma

Socket.IO için bir Web PubSub oluşturmak için aşağıdaki Azure CLI komutunu kullanabilirsiniz:

az webpubsub create -g <resource-group> -n <resource-name>--kind socketio --service-mode serverless --sku Premium_P1

Yerel olarak Azure İşlevi projesi oluşturma

Yerel bir Azure İşlevi projesi başlatmak için adımları izlemeniz gerekir.

En son Azure İşlevi çekirdek aracını yüklemek için adım adım izleyin
Terminal penceresinde veya komut isteminden aşağıdaki komutu çalıştırarak klasörde bir proje SocketIOProject oluşturun:
```
func init SocketIOProject --worker-runtime javascript --model V4
```
Bu komut bir JavaScript projesi oluşturur. Aşağıdaki komutları çalıştırmak için klasörünü SocketIOProject girin.
şu anda İşlev Paketi Socket.IO İşlev Bağlaması içermez, bu nedenle paketi el ile eklemeniz gerekir.
1. İşlev paketi başvurularını ortadan kaldırmak için host.json dosyasını düzenleyin ve aşağıdaki satırları kaldırın.
```
"extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
}
```
2. Komutu çalıştırın:
```
func extensions install -p Microsoft.Azure.WebJobs.Extensions.WebPubSubForSocketIO -v 1.0.0-beta.4
```

Anlaşma için bir işlev oluşturun. İstemcinin hizmete erişmesi için uç noktalar ve belirteçler oluşturmak için kullanılan anlaşma işlevi.

func new --template "Http Trigger" --name negotiate

dosyasını açın src/functions/negotiate.js ve öğesini aşağıdaki kodla değiştirin:

const { app, input } = require('@azure/functions');

const socketIONegotiate = input.generic({
    type: 'socketionegotiation',
    direction: 'in',
    name: 'result',
    hub: 'hub'
});

async function negotiate(request, context) {
    let result = context.extraInputs.get(socketIONegotiate);
    return { jsonBody: result };
};

// Negotiation
app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [socketIONegotiate],
    handler: negotiate
});

Bu adım HTTP Tetikleyicisi ve negotiate çıkış bağlaması ile bir işlev SocketIONegotiation oluşturur. Bu, işlevi tetikleyip bağlama tarafından SocketIONegotiation oluşturulan bir anlaşma sonucu döndürmek için bir HTTP çağrısı kullanabileceğiniz anlamına gelir.

İletileri teslim eden bir işlev oluşturun.

func new --template "Http Trigger" --name message

dosyasını src/functions/message.js açın ve dosyasını aşağıdaki kodla değiştirin:

const { app, output, trigger } = require('@azure/functions');

const socketio = output.generic({
type: 'socketio',
hub: 'hub',
})

async function chat(request, context) {
    context.extraOutputs.set(socketio, {
    actionName: 'sendToNamespace',
    namespace: '/',
    eventName: 'new message',
    parameters: [
        context.triggerMetadata.socketId,
        context.triggerMetadata.message
    ],
    });
}

// Trigger for new message
app.generic('chat', {
    trigger: trigger.generic({
        type: 'socketiotrigger',
        hub: 'hub',
        eventName: 'chat',
        parameterNames: ['message'],
    }),
    extraOutputs: [socketio],
    handler: chat
});

Bu, SocketIOTrigger bir Socket.IO istemci iletisi tarafından tetiklenebilmek için kullanır ve iletileri ad alanına yayınlamak için bağlamayı kullanır SocketIO .

Ziyaret için dizin html'i döndürmek için bir işlev oluşturun.

altında publicbir klasör src/ oluşturun.

Aşağıdaki içeriğe sahip bir html dosyası index.html oluşturun.

<html>

<body>
<h1>Socket.IO Serverless Sample</h1>
<div id="chatPage" class="chat-container">
    <div class="chat-input">
        <input type="text" id="chatInput" placeholder="Type your message here...">
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="chatMessages" class="chat-messages"></div>
</div>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
    function appendMessage(message) {
    const chatMessages = document.getElementById('chatMessages');
    const messageElement = document.createElement('div');
    messageElement.innerText = message;
    chatMessages.appendChild(messageElement);
    hatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function sendMessage() {
    const message = document.getElementById('chatInput').value;
    if (message) {
        document.getElementById('chatInput').value = '';
        socket.emit('chat', message);
    }
    }

    async function initializeSocket() {
    const negotiateResponse = await fetch(`/api/negotiate`);
    if (!negotiateResponse.ok) {
        console.log("Failed to negotiate, status code =", negotiateResponse.status);
        return;
    }
    const negotiateJson = await negotiateResponse.json();
    socket = io(negotiateJson.endpoint, {
        path: negotiateJson.path,
        query: { access_token: negotiateJson.token }
    });

    socket.on('new message', (socketId, message) => {
        appendMessage(`${socketId.substring(0,5)}: ${message}`);
    })
    }

    initializeSocket();
</script>
</body>

</html>

HTML sayfasını döndürmek için bir işlev oluşturun ve kodları kopyalayın:
```
func new --template "Http Trigger" --name index
```

dosyasını src/functions/index.js açın ve dosyasını aşağıdaki kodla değiştirin:

const { app } = require('@azure/functions');

const fs = require('fs').promises;
const path = require('path')

async function index(request, context) {
    try {
        context.log(`HTTP function processed request for url "${request.url}"`);

        const filePath = path.join(__dirname,'../public/index.html');
        const html = await fs.readFile(filePath);
        return {
            body: html,
            headers: {
                'Content-Type': 'text/html'
            }
        };
    } catch (error) {
        context.log(error);
        return {
            status: 500,
            jsonBody: error
        }
    }
};

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: index
});

Uygulamayı yerel olarak çalıştırma

Kod hazırlandıktan sonra, örneği çalıştırma yönergelerini izleyin.

Azure İşlevi için Azure Depolama'yı ayarlama

Azure İşlevleri, yerel ortamda çalışan bir depolama hesabının bile çalışmasını gerektirir. Aşağıdaki iki seçenek arasından birini belirleyin:

Ücretsiz Azurite öykünücüsü çalıştırın.
Azure Depolama hizmetini kullanın. Kullanmaya devam ederseniz bu maliyete neden olabilir.

Yerel öykünme
Azure Blob Depolama

Azurite'yi yükleme

npm install -g azurite

Azurite depolama öykünücüsİnİ başlatın:

azurite -l azurite -d azurite\debug.log

local.settings.json değerinin AzureWebJobsStorageolarak ayarlandığından UseDevelopmentStorage=trueemin olun.

projeyi Azure Blob Depolama bağlantı dizesi kullanacak şekilde güncelleştirin.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Socket.IO için Web PubSub yapılandırmasını ayarlama

İşlev UYGULAMASına bağlantı dizesi ekleyin:

func settings add WebPubSubForSocketIOConnectionString "<connection string>"

Socket.IO için Web PubSub'a hub ayarları ekleme

az webpubsub hub create -n <resource name> -g <resource group> --hub-name hub --event-handler url-template="tunnel:///runtime/webhooks/socketio" user-event-pattern="*"

bağlantı dizesi Azure CLI komutuyla elde edilebilir

az webpubsub key show -g <resource group> -n <resource name>

Çıktıda ve primaryConnectionStringbulunur secondaryConnectionString ve her ikisinde de kullanılabilir.

Tüneli ayarlama

Sunucusuz modda hizmet, işlevi tetikleme amacıyla web kancalarını kullanır. Uygulamayı yerel olarak çalıştırmayı denediğinizde, önemli bir sorun hizmetin yerel işlev uç noktanıza erişebilmesini sağlamaktır.

Bunu yapmanın en kolay yolu Tünel Aracı'nı kullanmaktır

Tünel Aracı'nı yükleme:

npm install -g @azure/web-pubsub-tunnel-tool

Tüneli çalıştırma
```
awps-tunnel run --hub hub --connection "<connection string>" --upstream http://127.0.0.1:7071
```
--upstream, yerel Azure İşlevi'nin kullanıma sunma url'sidir. Bağlantı noktası farklı olabilir ve sonraki adımda işlevi başlatırken çıkışı de kontrol edebilirsiniz.

Örnek Uygulamayı Çalıştırma

Tünel aracı çalıştırıldıktan sonra İşlev Uygulamasını yerel olarak çalıştırabilirsiniz:

func start

Ve adresinden http://localhost:7071/api/indexweb sayfasını ziyaret edin.

Sunucusuz sohbet uygulamasının ekran görüntüsü.

Sonraki adımlar

Ardından, uygulamayı kimlik tabanlı kimlik doğrulamasıyla çevrimiçi dağıtmak için Bicep'i kullanmayı deneyebilirsiniz:

Hızlı Başlangıç: Socket.IO Sunucusuz Modda Azure İşlevi ile sohbet uygulaması oluşturma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-27