Megosztás a következőn keresztül:

Oktatóanyag: Fájlmelléklet-támogatás engedélyezése a csevegőalkalmazásban

  • Cikk

A Csevegő SDK zökkenőmentesen működik együtt a Microsoft Teamsszel egy értekezlet kontextusában. Csak a Teams-felhasználók küldhetnek fájlmellékleteket egy Azure Communication Services-felhasználónak. Az Azure Communication Services-felhasználók nem küldhetnek fájlmellékleteket egy Teams-felhasználónak. Az aktuális képességekért lásd : Teams interop Chat.

Fájlmelléklet-támogatás hozzáadása

A Csevegő SDK minden fájlmelléklethez biztosítja a previewUrl tulajdonságot. Konkrétan egy SharePoint-weblapra mutató hivatkozások, previewUrl ahol a felhasználó megtekintheti a fájl tartalmát, szerkesztheti a fájlt, és letöltheti a fájlt, ha az engedély lehetővé teszi.

A szolgáltatáshoz néhány korlátozás van társítva:

  • A küldő bérlőjének Teams-rendszergazdája olyan szabályzatokat írhat elő, amelyek teljes mértékben korlátozzák vagy letiltják ezt a funkciót. A Teams rendszergazdája például letilthat bizonyos engedélyeket (például Anyone) a fájlmelléklet URL-címének (previewUrl) elérhetetlenné válásához.

  • Jelenleg csak két fájlengedélyt támogatunk:

    • Anyone
    • People you choose (e-mail-címmel)

    Tájékoztassa a Teams-felhasználókat, hogy az összes többi engedély (például People in your organization) nem támogatott. A Teams-felhasználóknak ellenőrizniük kell, hogy az alapértelmezett engedély támogatott-e, miután feltöltötték a fájlt a Teams-ügyfélre.

  • A közvetlen letöltés URL-címe (url) nem támogatott.

A normál fájlok mellett (azokkal fileegyüttAttachmentType) a Csevegő SDK is biztosítja a AttachmentType tulajdonságátimage. Az Azure Communication Services felhasználói olyan képeket csatolhatnak, amelyek tükrözik a Microsoft Teams-ügyfél által a képmellékletek felhasználói felületi rétegbeli beágyazott képekké alakításának viselkedését. További információ: Képmellékletek kezelése.

Az Azure Communication Services felhasználói a Feltöltés funkcióval adhatnak hozzá képeket az eszközről, amely a Teams oldalán jelenik meg, a Csevegő SDK pedig olyan mellékleteket ad vissza, mint a image. A felhőfájlok csatolásával feltöltött képek esetében a rendszer a Teams oldalán normál fájlként kezeli a képeket, így a Csevegő SDK olyan mellékleteket ad vissza, mint a file.

Azt is vegye figyelembe, hogy az Azure Communication Services felhasználói csak húzással vagy a melléklet menüparancsok segítségével tölthetnek fel fájlokat az eszközről , és csatolhatnak felhőfájlokat. A beágyazott médiatartalmakkal (például videoklipekkel, hangüzenetekkel és időjárási kártyákkal) rendelkező üzenetek bizonyos típusai jelenleg nem támogatottak.

Ez az oktatóanyag bemutatja, hogyan engedélyezheti a fájlmellékletek támogatását az Azure Communication Services Chat SDK for JavaScript használatával.

Mintakód

Keresse meg az oktatóanyag véglegesített kódját a GitHubon.

Előfeltételek

Célok

  • Fájlmelléklet megjelenítése az üzenetszálban. Minden fájlmelléklet-kártya rendelkezik Megnyitás gombbal.
  • Képmellékletek megjelenítése beágyazott képekként.

Fájlmellékletek kezelése

A JavaScripthez készült Csevegő SDK visszaadja ChatAttachmentType file a normál fájlmellékletek és image az üzenetbe ágyazott képek tulajdonságát.

export interface ChatMessageReceivedEvent extends BaseChatMessageEvent {
  /**
   * Content of the message.
   */
  message: string;

  /**
   * Chat message attachment.
   */
  attachments?: ChatAttachment[];
  
  ...
}

export interface ChatAttachment {
  /** Id of the attachment */
  id: string;
  /** The type of attachment. */
  attachmentType: AttachmentType;
  /** The name of the attachment content. */
  name?: string;
  /** The URL that is used to provide the original size of the inline images */
  url?: string;
  /** The URL that provides the preview of the attachment */
  previewUrl?: string;
}

/** Type of supported attachments. */
export type ChatAttachmentType = "image" | "file" | "unknown";

Az alábbi JSON például egy képmelléklet és egy fájlmelléklet megjelenését mutatja ChatAttachment be:

"attachments": [
    {
        "id": "08a182fe-0b29-443e-8d7f-8896bc1908a2",
        "attachmentType": "file",
        "name": "business report.pdf",
        "previewUrl": "https://contoso.sharepoint.com/:u:/g/user/h8jTwB0Zl1AY"
    },
    {
        "id": "9d89acb2-c4e4-4cab-b94a-7c12a61afe30",
        "attachmentType": "image", 
        "name": "Screenshot.png",
        "url": "https://contoso.communication.azure.com/chat/threads/19:9d89acb29d89acb2@thread.v2/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/original?api-version=2023-11-15-preview",
        "previewUrl": "https://contoso.communication.azure.com/chat/threads/19:9d89acb29d89acb2@thread.v2/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/small?api-version=2023-11-15-preview"
      }
]

Most térjünk vissza a rövid útmutatóban létrehozott eseménykezelőhöz: Csatlakozzon a csevegőalkalmazáshoz egy Teams-értekezlethez , és adjon hozzá néhány további logikát a mellékletek kezeléséhez a attachmentType következő tulajdonsággal file:

chatClient.on("chatMessageReceived", (e) => {
  console.log("Notification chatMessageReceived!");
  // Check whether the notification is intended for the current thread
  if (threadIdInput.value != e.threadId) {
     return;
  }
   
  if (e.sender.communicationUserId != userId) {
    renderReceivedMessage(e);
  } else {
    renderSentMessage(e.message);
  }
});

async function renderReceivedMessage(event) {
    messages += `<div class="container lighter"> ${event.message} </div>`;
    messagesContainer.innerHTML = messages;

    // Get the list of attachments and calls renderFileAttachments to construct a file attachment card
    var attachmentHtml = event.attachments
        .filter(attachment => attachment.attachmentType === "file")
        .map(attachment => renderFileAttachments(attachment))
        .join('');
    messagesContainer.innerHTML += attachmentHtml;
}

function renderFileAttachments(attachment) {
    var re = /(?:\.([^.]+))?$/;
    var fileExtension = re.exec(attachment.name)[1];  
    return '<div class="attachment-container">' +
        '<img class="attachment-icon" alt="attachment file icon" />' +
        '<div>' +
        '<p class="attachment-type">' + fileExtension + '</p>' +
        '<p>' + attachment.name + '</p>' +
        '<a href=' + attachment.previewUrl + ' target="_blank" rel="noreferrer">Open</a>' +
        '</div>' +
        '</div>';
}

Győződjön meg arról, hogy hozzáad néhány CSS-t a mellékletkártyához:

  /* Let's make the chat popup scrollable */
  .chat-popup {

     ...

     max-height: 650px;
     overflow-y: scroll;
}

 .attachment-container {
     overflow: hidden;
     background: #f3f2f1;
     padding: 20px;
     margin: 0;
     border-radius: 10px;
}
 .attachment-container img {
     width: 50px;
     height: 50px;
     float: left;
     margin: 0;
}
 .attachment-container p {
     font-weight: 700;
     margin: 0 5px 20px 0;
}
 .attachment-container {
     display: grid;
     grid-template-columns: 100px 1fr;
     margin-top: 5px;
}
 .attachment-icon {
     content: url("data:image/svg+xml;base64, ...");
}
 .attachment-container a {
     background-color: #dadada;
     color: black;
     font-size: 12px;
     padding: 10px;
     border: none;
     cursor: pointer;
     border-radius: 5px;
     text-align: center;
     margin-right: 10px;
     text-decoration: none;
     margin-top: 10px;
}
 .attachment-container a:hover {
     background-color: black;
     color: white;
}
 .attachment-type {
     position: absolute;
     color: black;
     border: 2px solid black;
     background-color: white;
     margin-top: 50px;
     font-family: sans-serif;
     font-weight: 400;
     padding: 2px;
     text-transform: uppercase;
     font-size: 8px;
}

Ez minden, ami a fájlmellékletek kezeléséhez szükséges. Ezután futtassa a kódot.

A kód futtatása

A Webpack esetében a webpack-dev-server tulajdonság használatával hozhatja létre és futtathatja az alkalmazást. Futtassa az alábbi parancsot az alkalmazás gazdagépének helyi webkiszolgálón való kötegeléséhez:

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Vagy:

npm start

Fájlmelléklet bemutatója

  1. Nyissa meg a böngészőt, és nyissa meg a kívánt elemet http://localhost:8080/. Adja meg az értekezlet URL-címét és a szálazonosítót.

  2. Küldjön néhány fájlmellékletet a Teams-ügyfélről.

    Képernyőkép a Teams-ügyfélről egy elküldött üzenettel három fájlmelléklettel.

  3. Az új üzenetnek a fájlmellékletekkel együtt kell megjelennie.

    Képernyőkép egy fogadott bejövő üzenettel rendelkező mintaalkalmazásról három fájlmelléklettel.

Képmellékletek kezelése

A képmellékleteket másképp kell kezelni, mint a normál file mellékleteket. A képmellékletek tulajdonsága imageazattachmentType, amelyhez a kommunikációs jogkivonat az előnézeti vagy teljes méretű képek lekéréséhez szükséges.

A folytatás előtt végezze el azt az oktatóanyagot, amely bemutatja , hogyan engedélyezheti a beágyazott képtámogatást a csevegőalkalmazásban. Ez az oktatóanyag bemutatja, hogyan kérhet le olyan képeket, amelyek kommunikációs jogkivonatot igényelnek a kérés fejlécében. Miután megkapta a képblobot, létre kell hoznia egy ObjectUrl tulajdonságot, amely erre a blobra mutat. Ezután ezt az URL-címet az egyes beágyazott rendszerképek attribútumába src szúrja be.

Most, hogy már ismeri a beágyazott képek működését, megjelenítheti a képmellékleteket, például egy normál beágyazott képet.

Először szúrja be a címkét az image üzenet tartalmába, amikor képmelléklet van:

async function renderReceivedMessage(event) {
    messages += `<div class="container lighter"> ${event.message} </div>`;
    messagesContainer.innerHTML = messages;
    console.log(event);
    // Filter out inline images from attachments
    const imageAttachments = event.attachments?.filter(
        (attachment) =>
        attachment.attachmentType === "image" && !messages.includes(attachment.id)
    );
    // Inject image tag for all image attachments
    var imageAttachmentHtml =
        imageAttachments
        .map((attachment) => renderImageAttachments(attachment))
        .join("") ?? "";
    messagesContainer.innerHTML += imageAttachmentHtml;

    // Get list of attachments and calls renderFileAttachments to construct a file attachment card
    var attachmentHtml =
        event.attachments
        ?.filter((attachment) => attachment.attachmentType === "file")
        .map((attachment) => renderFileAttachments(attachment))
        .join("") ?? "";
    messagesContainer.innerHTML += attachmentHtml;

    // Fetch and render preview images
    fetchPreviewImages(imageAttachments);
}

function renderImageAttachments(attachment) {
    return `<img alt="image" src="" itemscope="png" id="${attachment.id}" style="max-width: 100px">`
}

Most vegyük fel a következő fetchPreviewImages() oktatóanyagot: Engedélyezze a beágyazott rendszerképek támogatását , és használja azt úgy, ahogy van, módosítások nélkül:

function fetchPreviewImages(attachments) {
    if (!attachments.length > 0) {
        return;
    }
    Promise.all(
        attachments.map(async (attachment) => {
            const response = await fetch(attachment.previewUrl, {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + tokenString,
                },
            });
            return {
                id: attachment.id,
                content: await response.blob(),
            };
        }),
    ).then((result) => {
        result.forEach((imageRef) => {
            const urlCreator = window.URL || window.webkitURL;
            const url = urlCreator.createObjectURL(imageRef.content);
            document.getElementById(imageRef.id).src = url;
        });
    }).catch((e) => {
        console.log('error fetching preview images');
    });
}

Ennek a függvénynek tulajdonságra tokenString van szüksége, ezért a következő kódrészletben látható módon inicializálva init()kell lennie egy globális példánynak:

var tokenString = '';

async function init() {
    ...
    const {
        token,
        expiresOn
    } = tokenResponse;
    
    tokenString = token;
    ...
}

Most már rendelkezik képmelléklet-támogatással. Futtassa a kódot, és tekintse meg működés közben.

Képmelléklet bemutatója

  1. Küldjön néhány képmellékletet a Teams-ügyfélről.

    Képernyőkép a Teams-ügyfélről, amely egy feltöltött képmelléklettel rendelkező küldési mezőt jelenít meg.

  2. A képmelléklet elküldése után figyelje meg, hogy beágyazott rendszerkép lesz a Teams ügyféloldalán.

    Képernyőkép a Teams-ügyfélről, amely egy üzenetet jelenít meg a másik résztvevőnek küldött képmelléklettel.

  3. Térjen vissza a mintaalkalmazáshoz, és győződjön meg arról, hogy ugyanaz a kép jelenik meg.

    Képernyőkép egy mintaalkalmazásról, amely egy bejövő üzenetet jelenít meg egy beágyazott képpel.

Ez az oktatóanyag bemutatja, hogyan engedélyezheti a fájlmellékletek támogatását az Azure Communication Services Chat SDK for C# használatával.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Fájlmellékletek kezelése.
  • Képmellékletek kezelése.

Előfeltételek

  • Tekintse át a Csevegőalkalmazás csatlakoztatása Teams-értekezlethez című rövid útmutatót.
  • Hozzon létre egy Azure Communication Services-erőforrást az Azure Communication Services-erőforrás létrehozása című cikkben leírtak szerint. Ehhez az oktatóanyaghoz rögzítenie kell a kapcsolati sztring.
  • Állítson be egy Teams-értekezletet az üzleti fiókjával, és készítse elő az értekezlet URL-címét.
  • Töltse le a C# (@azure/communication-chat) 1.3.0-s vagy legújabb csevegő SDK-t. További információ: Azure Communication Chat ügyfélkódtár.

Mintakód

Az oktatóanyag véglegesített kódjának megkeresése a GitHubon.

Fájlmellékletek kezelése

A C#-hoz készült Csevegő SDK a normál fájlmellékletek ChatAttachmentType és image a beágyazott képek tulajdonságát file adja vissza.

public readonly partial struct ChatAttachmentType : IEquatable<ChatAttachmentType>
{
        private const string ImageValue = "image";
        private const string FileValue = "file";
        /// <summary> image. </summary>
        public static ChatAttachmentType Image { get; } = new ChatAttachmentType(ImageValue);
        /// <summary> file. </summary>
        public static ChatAttachmentType File { get; } = new ChatAttachmentType(FileValue);
}

Az alábbi JSON például egy képmelléklet és egy fájlmelléklet megjelenését mutatja ChatAttachment be, amikor kéréseket kap a kiszolgálóoldalról:

"attachments": [
    {
        "id": "08a182fe-0b29-443e-8d7f-8896bc1908a2",
        "attachmentType": "file",
        "name": "business report.pdf",
        "previewUrl": "https://contoso.sharepoint.com/:u:/g/user/h8jTwB0Zl1AY"
    },
    {
        "id": "9d89acb2-c4e4-4cab-b94a-7c12a61afe30",
        "attachmentType": "image", 
        "name": "Screenshot.png",
        "url": "https://contoso.communication.azure.com/chat/threads/19:9d89acb29d89acb2@thread.v2/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/original?api-version=2023-11-15-preview",
        "previewUrl": "https://contoso.communication.azure.com/chat/threads/19:9d89acb29d89acb2@thread.v2/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/small?api-version=2023-11-15-preview"
      }
]

Most térjen vissza az előző rövid útmutatóban létrehozott eseménykezelőhöz, és adjon hozzá néhány további logikát a mellékletek kezeléséhez a ChatAttachmentType következő tulajdonsággal file:


await foreach (ChatMessage message in allMessages)
{
    // Get message attachments that are of type 'file'
    IEnumerable<ChatAttachment> fileAttachments = message.Content.Attachments.Where(x => x.AttachmentType == ChatAttachmentType.File);
    var chatAttachmentFileUris = new List<Uri>();
    foreach (var file in fileAttachments) 
    {
        chatAttachmentFileUris.Add(file.PreviewUri);
    }

    // Build message list
    if (message.Type == ChatMessageType.Html || message.Type == ChatMessageType.Text)
    {
        textMessages++;
        var userPrefix = message.Sender.Equals(currentUser) ? "[you]:" : "";
        var strippedMessage = StripHtml(message.Content.Message);
      


        var chatAttachments = fileAttachments.Count() > 0 ? "[Attachments]:\n" + string.Join(",\n", chatAttachmentFileUris) : "";
        messageList.Add(long.Parse(message.SequenceId), $"{userPrefix}{strippedMessage}\n{chatAttachments}");
    }
}

Konkrétan minden fájlmelléklethez lekérheti a previewUrl tulajdonságot, és összeállíthatja az URL-címek listáját a for loop. Ezután beágyazza a sztringet a csevegőüzenet tartalmával együtt.

Képmellékletek kezelése

A képmellékleteket a szokásos file mellékletek helyett másképpen kell kezelnie. A képmellékletek tulajdonsága imageazChatAttachmentType, amelyhez a kommunikációs jogkivonat az előnézeti vagy teljes méretű képek lekéréséhez szükséges.

A folytatás előtt fejezze be a beágyazott képtámogatási oktatóanyagot. Az identitás képmellékleteihez meg kell tudnia, hogy az üzenet tartalma ugyanazt a képazonosítót tartalmazza-e a mellékletekből.

bool isImageAttachment = message.Content.Message.Contains(x.Id);

Ha ez a jelző igaz, akkor beágyazott képlogikát alkalmaz a rendereléshez:

IEnumerable<ChatAttachment> imageAttachments = message.Content.Attachments.Where(x => x.AttachmentType == ChatAttachmentType.Image);
// Fetch image and render
var chatAttachmentImageUris = new List<Uri>();
foreach (ChatAttachment imageAttachment in imageAttachments)
{
    client.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", communicationTokenCredential.GetToken().Token);
    var response = await client.GetAsync(imageAttachment.PreviewUri);
    var randomAccessStream = await response.Content.ReadAsStreamAsync();
    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
    {
        var bitmapImage = new BitmapImage();
        await bitmapImage.SetSourceAsync(randomAccessStream.AsRandomAccessStream());
        InlineImage.Source = bitmapImage;
    });
    chatAttachmentImageUris.Add(imageAttachment.PreviewUri);
}

Az alkalmazás mostantól támogatja a képmellékleteket.

Következő lépések