서버에서 메시지 푸시

2024-12-12

친숙한 HTTP 요청/응답 모델은 작업하기 쉽고 스케일링 가능하도록 디자인되었습니다. 그러나 요즘 최종 사용자는 원래 디자인된 것보다 웹에서 더 많은 것을 요구합니다. HTTP 프로토콜을 사용하려면 사용자가 응답을 받기 위해 요청을 시작해야 합니다. 그러나 개발자는 요청하지 않고 서버에서 클라이언트로 데이터를 보낼 방법이 필요합니다. 즉, 경매 사이트의 제품 최신 입찰 가격이나 금융 애플리케이션의 빠르게 움직이는 주가를 푸시하는 것과 같이 고객에게 데이터를 "푸시"해야 합니다.

연결된 클라이언트에 데이터를 푸시하는 애플리케이션 서버의 GIF입니다.

이 빠른 시작에서는 다음과 같은 방법을 설명합니다.

애플리케이션 서버에서 메시지 구독
애플리케이션 서버에서 연결된 모든 클라이언트로 데이터 푸시

Important

원시 연결 문자열 데모용으로만 이 문서에 표시됩니다.

연결 문자열에는 애플리케이션이 Azure Web PubSub 서비스에 액세스하는 데 필요한 권한 부여 정보가 포함됩니다. 연결 문자열 내의 액세스 키는 서비스의 루트 암호와 비슷합니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을 WebPubSubServiceClient보호합니다.

액세스 키를 다른 사용자에게 배포하거나 하드 코딩하거나 다른 사용자가 액세스할 수 있는 일반 텍스트로 저장하지 않도록 합니다. 키가 손상되었다고 생각되면 키를 교체하세요.

필수 조건

Web PubSub 리소스. 아직 만들지 않은 경우 Web PubSub 리소스 만들기의 지침을 따를 수 있습니다.
Visual Studio Code와 같은 코드 편집기
사용하려는 언어에 대한 종속성 설치

Node.JS

구독자 클라이언트 만들기

애플리케이션 서버에서 푸시된 메시지를 구독하려면 클라이언트(브라우저, 모바일 앱 또는 IoT 디바이스)가 먼저 Web PubSub 리소스에 연결하고 적절한 메시지 이벤트를 수신 대기해야 합니다.

`subscriber`라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir subscriber
cd subscriber
npm init -y
    
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client

Web PubSub 리소스에 연결하고 `server-message` 이벤트에 대한 수신기 등록

클라이언트는 클라이언트 액세스 URL을 사용하여 리소스에 연결하고 인증합니다. 이 URL은 wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>의 패턴을 따릅니다. 클라이언트는 클라이언트 액세스 URL을 가져오는 몇 가지 방법을 사용할 수 있습니다. 이 빠른 시작을 위해 다음 다이어그램에 표시된 Azure Portal에서 복사하여 붙여넣을 수 있습니다. 코드에서 클라이언트 액세스 URL을 하드 코딩하지 않는 것이 가장 좋습니다. 프로덕션 환경에서는 일반적으로 요청 시 이 URL을 반환하도록 앱 서버를 설정합니다. 클라이언트 액세스 URL 생성에서는 사례를 자세히 설명합니다.

다이어그램은 클라이언트 액세스 URL을 가져오는 방법을 보여줍니다.

위의 다이어그램에 표시된 것처럼 클라이언트는 myHub1라는 허브에 조인합니다.

subscriber 프로젝트 폴더에서 다음 코드가 포함된 subscribe.js라는 파일을 만듭니다.

const { WebPubSubClient } = require("@azure/web-pubsub-client");

// Instantiates the client object
// <client-access-url> is copied from Azure portal mentioned above
const client = new WebPubSubClient("<client-access-url>")

// Registers a handler for the "server-message" event
client.on("server-message", (e) => {
    console.log(`Received message ${e.message.data}`)
});

// Before a client can receive a message, 
// you must invoke start() on the client object.
client.start();

프로그램 실행

node subscribe.js

이제 이 클라이언트는 Web PubSub 리소스와의 연결을 설정하고 애플리케이션 서버에서 푸시된 메시지를 받을 준비가 되었습니다.

`subscriber`라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir subscriber
cd subscriber
# Create a .net console app
dotnet new console

# Add the client SDK
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease

Web PubSub 리소스에 연결하고 `ServerMessageReceived` 이벤트에 대한 수신기 등록

다이어그램은 클라이언트 액세스 URL을 가져오는 방법을 보여줍니다.

위의 다이어그램에 표시된 것처럼 클라이언트는 myHub1라는 허브에 조인합니다.

`Program.cs`의 코드를 다음 코드로 바꿉니다.

using Azure.Messaging.WebPubSub.Clients;

// Instantiates the client object
// <client-access-uri> is copied from Azure portal mentioned above
var client = new WebPubSubClient(new Uri("<client-access-uri>"));
client.ServerMessageReceived += eventArgs =>
{
    Console.WriteLine($"Receive message: {eventArgs.Message.Data}");
    return Task.CompletedTask;
};

client.Connected += eventArgs =>
{
    Console.WriteLine("Connected");
    return Task.CompletedTask;
};

await client.StartAsync();


// This keeps the subscriber active until the user closes the stream by pressing Ctrl+C
var streaming = Console.ReadLine();
while (streaming != null)
{
    if (!string.IsNullOrEmpty(streaming))
    {
        await client.SendToGroupAsync("stream", BinaryData.FromString(streaming + Environment.NewLine), WebPubSubDataType.Text);
    }

    streaming = Console.ReadLine();
}

await client.StopAsync();

다음 명령을 실행합니다.

dotnet run

이제 이 클라이언트는 Web PubSub 리소스와의 연결을 설정하고 애플리케이션 서버에서 푸시된 메시지를 받을 준비가 되었습니다.

`subscriber`라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir subscriber
cd subscriber

# Create venv
python -m venv env
# Activate venv
source ./env/bin/activ

pip install azure-messaging-webpubsubservice
pip install websockets

WebSocket API를 사용하여 Web PubSub 서비스에 연결합니다. 다음 코드가 포함된 `subscribe.py` 파일을 만듭니다.

import asyncio
import sys
import websockets

from azure.messaging.webpubsubservice import WebPubSubServiceClient


async def connect(url):
    async with websockets.connect(url) as ws:
        print('connected')
        while True:
            print('Received message: ' + await ws.recv())

if __name__ == '__main__':

    if len(sys.argv) != 3:
        print('Usage: python subscribe.py <connection-string> <hub-name>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    token = service.get_client_access_token()

    try:
        asyncio.get_event_loop().run_until_complete(connect(token['url']))
    except KeyboardInterrupt:
        pass

이 코드는 Web PubSub의 허브에 연결되는 WebSocket 연결을 만듭니다. 허브는 클라이언트 그룹에 메시지를 게시할 수 있는 Web PubSub의 논리적 단위입니다. 주요 개념에는 Web PubSub에서 사용되는 용어에 대한 자세한 설명이 포함되어 있습니다.

Web PubSub 서비스는 JWT(JSON Web Token) 인증을 사용합니다. 코드 샘플은 Web PubSub SDK에서 WebPubSubServiceClient.GetClientAccessUri()를 사용하여 유효한 액세스 토큰이 있는 전체 URL을 포함하는 서비스에 대한 URL을 생성합니다.

연결이 설정되면 WebSocket 연결을 통해 메시지를 받게 됩니다. await ws.recv()를 사용하여 들어오는 메시지를 수신 대기합니다.

다음 명령을 실행합니다.

python subscribe.py $connection_string "myHub1"

`pubsub`라는 프로젝트 디렉터리 만들기

mkdir pubsub
cd pubsub

Maven을 사용하여 `webpubsub-quickstart-subscriber`라는 새 콘솔 앱을 만듭니다.

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-subscriber --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4

cd webpubsub-quickstart-subscriber

`pom.xml`의 `dependencies` 노드에 WebSocket 및 Azure Web PubSub SDK를 추가합니다.

azure-messaging-webpubsub: Java용 Web PubSub 서비스 SDK
Java-WebSocket: Java용 WebSocket 클라이언트 SDK

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>org.java-websocket</groupId>
    <artifactId>Java-WebSocket</artifactId>
    <version>1.5.1</version>
</dependency>

Web PubSub에서 WebSocket 연결을 통해 서비스에 연결하고 메시지를 구독할 수 있습니다. WebSocket은 완전한 전이중 통신 채널이므로 서비스에서 클라이언트에 메시지를 실시간으로 푸시할 수 있습니다. WebSocket을 지원하는 API 또는 라이브러리를 사용할 수 있습니다. 이 샘플에서는 Java-WebSocket 패키지를 사용합니다.

/src/main/java/com/webpubsub/quickstart 디렉터리로 이동합니다.

편집하여 App.java 파일의 콘텐츠를 다음 코드로 바꿉니다.

package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

import org.java_websocket.client.WebSocketClient;
import org.java_websocket.handshake.ServerHandshake;

import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;

/**
* Connect to Azure Web PubSub service using WebSocket protocol
*/
public class App 
{
    public static void main( String[] args ) throws IOException, URISyntaxException
    {
        if (args.length != 2) {
            System.out.println("Expecting 2 arguments: <connection-string> <hub-name>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();

        WebPubSubClientAccessToken token = service.getClientAccessToken(new GetClientAccessTokenOptions());

        WebSocketClient webSocketClient = new WebSocketClient(new URI(token.getUrl())) {
            @Override
            public void onMessage(String message) {
                System.out.println(String.format("Message received: %s", message));
            }

            @Override
            public void onClose(int arg0, String arg1, boolean arg2) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onError(Exception arg0) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onOpen(ServerHandshake arg0) {
                // TODO Auto-generated method stub
            }

        };

        webSocketClient.connect();
        System.in.read();
    }
}

이 코드는 Azure Web PubSub의 허브에 연결되는 WebSocket 연결을 만듭니다. 허브는 클라이언트 그룹에 메시지를 게시할 수 있는 Azure Web PubSub의 논리적 단위입니다. 주요 개념에는 Azure Web PubSub에서 사용되는 용어에 대한 자세한 설명이 포함되어 있습니다.

연결이 설정되면 WebSocket 연결을 통해 메시지를 받게 됩니다. onMessage(String message)를 사용하여 들어오는 메시지를 수신 대기합니다.

다음 명령을 사용하여 앱 실행

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="$connection_string 'myHub1'"

애플리케이션 서버에서 메시지 푸시

이제 클라이언트가 Web PubSub 리소스에 연결되었으므로 Web PubSub에서 제공하는 서버 SDK를 사용하여 언제든지 애플리케이션 서버에서 메시지를 푸시할 수 있습니다.

`publisher`라는 새 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir publisher
cd publisher

npm init

# This command installs the server SDK from NPM, 
# which is different from the client SDK you used in subscribe.js
npm install --save @azure/web-pubsub

다음 코드가 포함된 `publish.js` 파일을 만듭니다.

const { WebPubSubServiceClient } = require('@azure/web-pubsub');

// This is the hub name we used on Azure portal when generating the Client Access URL. 
// It ensures this server can push messages to clients in the hub named "myHub1".
const hub = "myHub1";
    
let server = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);

// By default, the content type is `application/json`. 
// Specify contentType as `text/plain` for this demo.
server.sendToAll(process.argv[2], { contentType: "text/plain" });

server.sendToAll()를 호출하면 허브에 있는 모든 연결된 클라이언트에 메시지가 전송됩니다.

연결 문자열 가져오기

Important

연결 문자열에는 애플리케이션이 Web PubSub 서비스에 액세스하는 데 필요한 권한 부여 정보가 포함됩니다. 연결 문자열 내의 액세스 키는 서비스의 루트 암호와 비슷합니다.

이 빠른 시작 가이드의 경우 아래와 같이 Azure Portal에서 가져옵니다. 다이어그램은 클라이언트 액세스 URL을 가져오는 방법을 보여줍니다.

서버 프로그램 실행

새 명령 셸에서 다음 명령을 실행합니다.

원시 연결 문자열 데모용으로만 이 문서에 표시됩니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리 및 회전하고 연결을 WebPubSubServiceClient보호합니다.

# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>" 

node publish.js "Hello World"

클라이언트 쪽에서 수신된 메시지 관찰

연결된 클라이언트에 데이터를 푸시하는 앱 서버를 보여 주는 GIF입니다.

여러 명령 셸에서 동일한 "구독" 프로그램을 실행하여 클라이언트 이상으로 자극해 보세요. "게시" 프로그램이 실행되는 즉시, 이러한 모든 클라이언트에 실시간으로 메시지가 배달되는 것을 볼 수 있습니다.

`publisher`라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub

`Program.cs` 파일을 다음 코드로 바꿉니다.

using System;
using System.Threading.Tasks;
using Azure.Messaging.WebPubSub;

namespace publisher
{
    class Program
    {
        static async Task Main(string[] args)
        {
            if (args.Length != 3) {
                Console.WriteLine("Usage: publisher <connectionString> <hub> <message>");
                return;
            }
            var connectionString = args[0];
            var hub = args[1];
            var message = args[2];
            
            // Either generate the token or fetch it from server or fetch a temp one from the portal
            var serviceClient = new WebPubSubServiceClient(connectionString, hub);
            await serviceClient.SendToAllAsync(message);
        }
    }
}

SendToAllAsync()를 호출하면 허브에 있는 모든 연결된 클라이언트에 메시지가 전송됩니다.

서버 프로그램을 실행하여 연결된 모든 클라이언트에 메시지 푸시

$connection_string="<connection-string>"
dotnet run $connection_string "myHub1" "Hello World"

클라이언트 쪽에서 수신된 메시지 관찰

# On the command shell used for running the "subscribe" program, you should see the received the messaged logged there. 
# Try running the same "subscribe" program in multiple command shells, which simulates more than clients. 
# Try running the "publish" program several times and you see messages being delivered in real-time to all these clients.   
Message received: Hello World

먼저 publisher라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

mkdir publisher
cd publisher
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate

pip install azure-messaging-webpubsubservice

Azure Web PubSub SDK를 사용하여 서비스에 메시지를 게시합니다. 아래 코드를 사용하여 publish.py 파일을 만듭니다.

import sys
from azure.messaging.webpubsubservice import WebPubSubServiceClient

if __name__ == '__main__':

    if len(sys.argv) != 4:
        print('Usage: python publish.py <connection-string> <hub-name> <message>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]
    message = sys.argv[3]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    res = service.send_to_all(message, content_type='text/plain')
    print(res)

send_to_all()은 메시지를 허브에서 연결된 모든 클라이언트에 보냅니다.

다음 명령을 실행합니다.

python publish.py $connection_string "myHub1" "Hello World"

이전 명령 셸에서 구독자가 메시지를 수신했는지 확인합니다.
```
Received message: Hello World
```

pubsub 디렉터리로 이동합니다. Maven을 사용하여 게시지 콘솔 앱 webpubsub-quickstart-publisher를 만들고 webpubsub-quickstart-publisher 디렉터리로 이동합니다.

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-publisher --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-quickstart-publisher

다음과 같이 pom.xml의 dependencies 노드에 Azure Web PubSub SDK 종속성을 추가합니다.

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>

Azure Web PubSub SDK를 사용하여 서비스에 메시지를 게시합니다. /src/main/java/com/webpubsub/quickstart 디렉터리로 이동하고, 편집기에서 App.java 파일을 열고, 콘텐츠를 다음 코드로 바꿉니다.


package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

/**
* Publish messages using Azure Web PubSub service SDK
*
*/
public class App 
{
    public static void main( String[] args )
    {
        if (args.length != 3) {
            System.out.println("Expecting 3 arguments: <connection-string> <hub-name> <message>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();
        service.sendToAll(args[2], WebPubSubContentType.TEXT_PLAIN);
    }
}

sendToAll()를 호출하면 허브에 있는 모든 연결된 클라이언트에 메시지가 전송됩니다.

webpubsub-quickstart-publisher 디렉터리로 이동하고 다음 명령을 사용하여 프로젝트를 실행합니다.

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="$connection_string 'myHub1' 'Hello World'"

이전 구독자가 다음 메시지를 수신한 것을 볼 수 있습니다.
```
Message received: Hello World
```

요약

이 빠른 시작에서는 애플리케이션 서버에서 허브의 연결된 모든 클라이언트로 메시지를 푸시하는 작업을 얼마나 간단히 수행할 수 있는지를 보여 줍니다. 또한 Web PubSub를 사용하면 메시지를 다음으로 푸시할 수 있습니다.

허브에 있는 클라이언트의 하위 집합
허브의 특정 그룹
그룹에 있는 클라이언트의 하위 집합

이러한 API를 사용하면 개발자가 고유한 비즈니스 논리에 집중할 수 있는 동시에 Web PubSub이 짧은 대기 시간(<100ms), 고가용성 및 대규모(백만 개 이상의 동시 연결)를 보장한다는 것을 확신할 수 있습니다.

다음 단계

다음 단계에서는 전체 웹 애플리케이션을 빌드하는 데 필요한 Web PubSub의 이벤트 시스템을 사용하는 방법을 살펴봅니다.

클라이언트의 이벤트 알림

다음을 통해 공유

서버에서 메시지 푸시

필수 조건

구독자 클라이언트 만들기

subscriber라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

Web PubSub 리소스에 연결하고 server-message 이벤트에 대한 수신기 등록

프로그램 실행

애플리케이션 서버에서 메시지 푸시

publisher라는 새 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

다음 코드가 포함된 publish.js 파일을 만듭니다.

연결 문자열 가져오기

서버 프로그램 실행

클라이언트 쪽에서 수신된 메시지 관찰

요약

다음 단계

피드백

추가 리소스

`subscriber`라는 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

Web PubSub 리소스에 연결하고 `server-message` 이벤트에 대한 수신기 등록

`publisher`라는 새 프로젝트 디렉터리를 만들고 필요한 종속성을 설치합니다.

다음 코드가 포함된 `publish.js` 파일을 만듭니다.