클라이언트 간에 게시/구독

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

• Web PubSub 리소스에 연결
• 그룹의 메시지 구독
• 그룹에 메시지 게시

필수 조건

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

클라이언트 SDK 설치

참고 항목

이 가이드에서는 아직 미리 보기 상태인 Web PubSub 서비스에서 제공하는 클라이언트 SDK를 사용합니다. 인터페이스는 이후 버전에서 변경될 수 있습니다.

JavaScript

mkdir pubsub_among_clients
cd pubsub_among_clients

# The SDK is available as an NPM module.
npm install @azure/web-pubsub-client

C#

mkdir pubsub_among_clients
cd pubsub_among_clients

# Create a new .net console project
dotnet new console

# Install the client SDK, which is available as a NuGet package
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease

Web PubSub에 연결

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

위 다이어그램에 표시된 것처럼 클라이언트에는 group1이라는 특정 그룹에 메시지를 보내고 조인할 수 있는 권한이 있습니다.

JavaScript

이름이 index.js인 파일을 만들고 다음 코드를 추가합니다.

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

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

C#

Program.cs 파일을 편집하고 다음 코드를 추가합니다.

using Azure.Messaging.WebPubSub.Clients;

// Instantiate the client object. 
// <client-access-uri> is copied from Azure portal mentioned above.
var client = new WebPubSubClient(new Uri("<client-access-uri>"));

그룹 구독

그룹에서 메시지를 받으려면 클라이언트는

• 메시지를 수신하려는 그룹에 조인해야 합니다.
• group-message 이벤트를 처리하는 콜백이 있습니다.

다음 코드는 클라이언트가 group1이라는 그룹의 메시지를 구독하는 것을 보여 줍니다.

JavaScript

// ...code from the last step

// Provide callback to the "group-message" event. 
client.on("group-message", (e) => {
  console.log(`Received message: ${e.message.data}`);
});

// Before joining group, you must invoke start() on the client object.
client.start();

// Join a group named "group1" to subscribe message from this group.
// Note that this client has the permission to join "group1", 
// which was configured on Azure portal in the step of generating "Client Access URL".
client.joinGroup("group1");

C#

// ...code from the last step

// Provide callback to group messages.
client.GroupMessageReceived += eventArgs =>
{
    Console.WriteLine($"Receive group message from {eventArgs.Message.Group}: {eventArgs.Message.Data}");
    return Task.CompletedTask;
};

// Before joining group, you must invoke start() on the client object.
await client.StartAsync();

// Join a group named "group1" to subscribe message from this group.
// Note that this client has the permission to join "group1", 
// which was configured on Azure portal in the step of generating "Client Access URL".
await client.JoinGroupAsync("group1");

그룹에 메시지 게시

이전 단계에서는 group1에서 메시지를 받는 데 필요한 모든 항목을 설정했습니다. 이제 해당 그룹으로 메시지를 보냅니다.

JavaScript

// ...code from the last step

// Send message "Hello World" in the "text" format to "group1".
client.sendToGroup("group1", "Hello World", "text");

C#

// ...code from the last step

// Send message "Hello World" in the "text" format to "group1".
await client.SendToGroupAsync("group1", BinaryData.FromString("Hello World"), WebPubSubDataType.Text);

다음 단계

이제 클라이언트 SDK를 사용하여 다음 방법을 알 수 있습니다.

• Web PubSub 리소스에 연결
• 그룹 메시지 구독
• 그룹에 메시지 게시

다음으로, 애플리케이션 서버에서 클라이언트로 실시간으로 메시지를 푸시하는 방법을 알아봅니다.

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