Zelfstudie: Ondersteuning voor bestandsbijlagen inschakelen in uw Chat-app

Artikel
05/17/2024

De Chat-SDK werkt naadloos samen met Microsoft Teams in de context van een vergadering. Alleen een Teams-gebruiker kan bestandsbijlagen verzenden naar een Azure Communication Services-gebruiker. Een Azure Communication Services-gebruiker kan geen bestandsbijlagen verzenden naar een Teams-gebruiker. Zie Teams-interoperabiliteit voor de huidige mogelijkheden.

Ondersteuning voor bestandsbijlagen toevoegen

De Chat SDK biedt de previewUrl eigenschap voor elke bestandsbijlage. previewUrl Koppelingen naar een webpagina in SharePoint, waar de gebruiker de inhoud van het bestand kan zien, het bestand kan bewerken en het bestand kan downloaden als dit is toegestaan.

Sommige beperkingen zijn gekoppeld aan deze functie:

De Teams-beheerder van de tenant van de afzender kan beleidsregels opleggen die deze functie volledig beperken of uitschakelen. De Teams-beheerder kan bijvoorbeeld bepaalde machtigingen uitschakelen (zoals Anyone) waardoor de URL van de bestandsbijlage (previewUrl) niet toegankelijk is.
Momenteel ondersteunen we slechts twee bestandsmachtigingen:
- Anyone
- People you choose (met e-mailadres)
Laat uw Teams-gebruikers weten dat alle andere machtigingen (zoals People in your organization) niet worden ondersteund. Uw Teams-gebruikers moeten controleren of de standaardmachtiging wordt ondersteund nadat ze het bestand op hun Teams-client hebben geüpload.
De URL voor direct downloaden (url) wordt niet ondersteund.

Naast reguliere bestanden (met van AttachmentType file), biedt de Chat SDK ook de AttachmentType eigenschap van image. Azure Communication Services-gebruikers kunnen afbeeldingen koppelen op een manier die het gedrag weerspiegelt van hoe de Microsoft Teams-client afbeeldingsbijlagen converteert naar inlineafbeeldingen op de gebruikersinterfacelaag. Zie Afbeeldingsbijlagen verwerken voor meer informatie.

Gebruikers van Azure Communication Services kunnen afbeeldingen toevoegen via Uploaden vanaf dit apparaat, dat wordt weergegeven aan de kant van Teams en de Chat SDK retourneert dergelijke bijlagen als image. Voor afbeeldingen die zijn geüpload via Cloudbestanden bijvoegen, worden afbeeldingen behandeld als gewone bestanden aan de kant van Teams, zodat de Chat SDK dergelijke bijlagen retourneert als file.

Houd er ook rekening mee dat Gebruikers van Azure Communication Services alleen bestanden kunnen uploaden met behulp van slepen en neerzetten of via de opdrachten Uploaden vanaf dit apparaat en Cloudbestanden bijvoegen. Bepaalde typen berichten met ingesloten media (zoals videoclips, audioberichten en weerkaarten) worden momenteel niet ondersteund.

In deze zelfstudie wordt beschreven hoe u ondersteuning voor bestandsbijlagen inschakelt met behulp van de Azure Communication Services Chat SDK voor JavaScript.

Voorbeeldcode

Zoek de voltooide code van deze zelfstudie op GitHub.

Vereisten

Bekijk de quickstart Deelnemen aan uw chat-app aan een Teams-vergadering.
Maak een Azure Communication Services-resource. Zie Een Azure Communication Services-resource maken voor meer informatie. U moet uw verbindingsreeks opnemen voor deze zelfstudie.
Stel een Teams-vergadering in met uw zakelijke account en laat de URL van de vergadering gereed zijn.
Gebruik de Chat-SDK voor JavaScript (@azure/communication-chat) 1.5.0 of de nieuwste versie. Zie de Azure Communication Chat-clientbibliotheek voor JavaScript voor meer informatie.

Doelstellingen

Bestandsbijlage weergeven in de berichtenthread. Elke bestandsbijlagekaart heeft een knop Openen .
Afbeeldingsbijlagen weergeven als inlineafbeeldingen.

Bestandsbijlagen verwerken

De Chat-SDK voor JavaScript retourneert een ChatAttachmentType eigenschap van file normale bestandsbijlagen en image voor inline-berichtenafbeeldingen.

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";

In de volgende JSON ziet u bijvoorbeeld hoe ChatAttachment het eruit kan zien voor een afbeeldingsbijlage en een bestandsbijlage:

"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"
      }
]

Nu gaan we terug naar de gebeurtenis-handler die u hebt gemaakt in quickstart: Neem deel aan uw Chat-app aan een Teams-vergadering en voeg extra logica toe om bijlagen af te handelen met de attachmentType eigenschap van 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>';
}

Zorg ervoor dat u css toevoegt voor de bijlagekaart:

  /* 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;
}

Dat is alles wat u nodig hebt voor het verwerken van bestandsbijlagen. Vervolgens gaan we de code uitvoeren.

De code uitvoeren

Voor webpack kunt u de webpack-dev-server eigenschap gebruiken om uw app te bouwen en uit te voeren. Voer de volgende opdracht uit om uw toepassingshost te bundelen op een lokale webserver:

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

Of:

npm start

Demo van bestandsbijlagen

Open uw browser en ga naar http://localhost:8080/. Voer de URL van de vergadering en de thread-id in.
Een aantal bestandsbijlagen verzenden vanaf de Teams-client.
U ziet dat het nieuwe bericht samen met bestandsbijlagen wordt weergegeven.

Afbeeldingsbijlagen verwerken

Afbeeldingsbijlagen moeten anders worden behandeld dan standaardbijlagen file . Afbeeldingsbijlagen hebben de attachmentType eigenschap van image, waarvoor het communicatietoken vereist is om de preview- of volledige afbeeldingen op te halen.

Voordat u doorgaat, voltooit u de zelfstudie die laat zien hoe u ondersteuning voor inline-installatiekopieën inschakelt in uw Chat-app. In deze zelfstudie wordt beschreven hoe u afbeeldingen ophaalt waarvoor een communicatietoken in de aanvraagheader is vereist. Nadat u de afbeeldingsblob hebt ontvangen, moet u een ObjectUrl eigenschap maken die naar deze blob verwijst. Vervolgens injecteert u deze URL in het src kenmerk van elke inlineafbeelding.

Nu u bekend bent met de werking van inlineafbeeldingen, kunt u afbeeldingsbijlagen weergeven zoals een gewone inlineafbeelding.

Voeg eerst een image tag toe aan berichtinhoud wanneer er een afbeeldingsbijlage is:

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">`
}

Nu gaan we lenen fetchPreviewImages() uit de zelfstudie: Ondersteuning voor inline-installatiekopieën inschakelen en gebruiken zoals dat is zonder wijzigingen:

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');
    });
}

Deze functie heeft een tokenString eigenschap nodig, dus u hebt een globale kopie nodig die is geïnitialiseerd in init(), zoals wordt weergegeven in het volgende codefragment:

var tokenString = '';

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

Nu hebt u ondersteuning voor afbeeldingsbijlagen. Ga door met het uitvoeren van de code en bekijk deze in actie.

Demo van afbeeldingsbijlage

Enkele afbeeldingsbijlagen verzenden vanaf de Teams-client.
Nadat u de afbeeldingsbijlage hebt verzonden, ziet u dat deze een inlineafbeelding wordt aan de clientzijde van Teams.
Ga terug naar de voorbeeld-app en zorg ervoor dat dezelfde afbeelding wordt weergegeven.

In deze zelfstudie wordt beschreven hoe u ondersteuning voor bestandsbijlagen inschakelt met behulp van de Azure Communication Services Chat SDK voor C#.

In deze zelfstudie leert u het volgende:

Bestandsbijlagen verwerken.
Afhandelen van afbeeldingsbijlagen.

Vereisten

Bekijk de quickstart Deelnemen aan uw chat-app aan een Teams-vergadering.
Maak een Azure Communication Services-resource zoals beschreven in Een Azure Communication Services-resource maken. U moet uw verbindingsreeks opnemen voor deze zelfstudie.
Stel een Teams-vergadering in met uw zakelijke account en laat de URL van de vergadering gereed zijn.
Download de Chat-SDK voor C# (@azure/communication-chat) 1.3.0 of de nieuwste versie. Zie de Azure Communication Chat-clientbibliotheek voor meer informatie.

Voorbeeldcode

Zoek de voltooide code voor deze zelfstudie op GitHub.

Bestandsbijlagen verwerken

De Chat-SDK voor C# retourneert een ChatAttachmentType eigenschap van file voor normale bestandsbijlagen en image voor inlineafbeeldingen.

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);
}

In de volgende JSON ziet u bijvoorbeeld hoe ChatAttachment het eruit kan zien voor een afbeeldingsbijlage en een bestandsbijlage wanneer u aanvragen van de serverzijde ontvangt:

"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"
      }
]

Ga nu terug naar de gebeurtenis-handler die u in de vorige quickstart hebt gemaakt en voeg extra logica toe om bijlagen af te handelen met de ChatAttachmentType eigenschap van 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}");
    }
}

Voor elke bestandsbijlage krijgt u de previewUrl eigenschap en maakt u een lijst met URL's in de for loop. Vervolgens sluit u de tekenreeks in samen met de inhoud van het chatbericht.

Afbeeldingsbijlagen verwerken

U moet afbeeldingsbijlagen anders afhandelen dan standaardbijlagen file . Afbeeldingsbijlagen hebben de ChatAttachmentType eigenschap van image, waarvoor het communicatietoken vereist is om de preview- of volledige afbeeldingen op te halen.

Voordat u doorgaat, voltooit u de zelfstudie Inline-installatiekopieën inschakelen . Als u bijlagen wilt nagaan of de inhoud van het bericht dezelfde afbeeldings-id van de bijlagen bevat, moet u nagaan of de berichtinhoud dezelfde afbeeldings-id van de bijlagen bevat.

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

Als deze vlag waar is, past u inlineafbeeldingslogica toe om deze weer te geven:

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);
}

Uw app ondersteunt nu afbeeldingsbijlagen.

Volgende stappen

Meer informatie over hoe u ondersteuning voor inline-installatiekopieën kunt inschakelen.
Meer informatie over andere ondersteunde interoperabiliteitsfuncties.
Bekijk ons voorbeeld van chatheld.
Meer informatie over hoe Chat werkt.

Delen via

Zelfstudie: Ondersteuning voor bestandsbijlagen inschakelen in uw Chat-app

Ondersteuning voor bestandsbijlagen toevoegen

Voorbeeldcode

Vereisten

Doelstellingen

Bestandsbijlagen verwerken

De code uitvoeren

Demo van bestandsbijlagen

Afbeeldingsbijlagen verwerken

Demo van afbeeldingsbijlage

Vereisten

Voorbeeldcode

Bestandsbijlagen verwerken

Afbeeldingsbijlagen verwerken

Volgende stappen

Feedback

Aanvullende resources