Czy zauważyłeś, że powiadomienia na pulpicie stały się niezbędną funkcją w aplikacjach działających w czasie rzeczywistym, opartych na zdarzeniach. Usługi sieciowe muszą powiadamiać użytkowników o sygnałach z zaplecza lub wiadomościach od innych użytkowników w miarę ich występowania.

Jeśli jesteś inżynierem oprogramowania lub programistą full-stack, który chce zbudować aplikację Windows Desktop przy użyciu C# i WPF, Windows Forms lub UWP, ten przewodnik przeprowadzi Cię przez tworzenie kodu front-end i back-end dla powiadomień push na pulpicie przy użyciu wzorca projektowego MVVM.

Główną rolę odgrywa tutaj interfejsAPI PubNub doprzesyłania wiadomości w czasie rzeczywistym, który umożliwia klientom lub serwerom wysyłanie sygnałów w czasie rzeczywistym do dowolnej liczby urządzeń, aplikacji internetowych i aplikacji mobilnych z dowolnego miejsca na świecie.

Przegląd języków programowania potrzebnych do obsługi powiadomień toastowych

W tym samouczku będziemy używać różnych języków kodowania i algorytmów. Na początek podamy krótką definicję tych języków programowania, a następnie zagłębimy się w proces przepływu pracy.

Czym jest WPF?

Przykład kodu, który zamierzamy wspólnie przeanalizować, został napisany przy użyciu Windows Presentation Foundation lub WPF. Przez ostatnią dekadę WPF był najlepszym podsystemem do tworzenia aplikacji internetowych Windows Desktop z C# i .NET Framework. Przypomina Windows Forms z wykorzystaniem XAML do tworzenia interfejsu użytkownika i C# Code Behinds dla każdego widoku.

Szybka wskazówka:

W tym samouczku zamierzamy zachować jak najwięcej kodu poza Code Behind, ponieważ będziemy używać wzorca MVVM. Z tego powodu kod, który normalnie pojawiłby się w klasach Code Behind, zostanie zamiast tego umieszczony w klasach ViewModel.

Czym jest architektura MVVM?

Model-View-ViewModel lub MVVM to wzorzec projektowy służący do oddzielenia rozwoju interfejsu użytkownika od rozwoju zaplecza w aplikacji skierowanej do użytkownika. Istnieją trzy komponenty, które składają się na ten wzorzec.

Jakie są komponenty WPFApps?

W przypadku WPFapps są to następujące komponenty:

• Widoki - XAML i CodeBehinds

• ViewModels - kod C# do zarządzania stanem i kontrolowania danych, które przemieszczają się między modelem a widokiem.

• Modele - klasy C#, przechowywanie danych, logika biznesowa.

Powiadomienia pulpitu w języku C#

Rozwiązaniem Windows Desktop dla powiadomień uwzględniających system operacyjny jest klasa Toast Notification. Powiadomienia Toast są zintegrowane z klasą Windows UI Notification.

Czym jest powiadomienie Toast?

W tym przykładzie użyjemy powiadomienia Toast. Powiadomienie Toast to małe wyskakujące okienko, które jest zaprogramowane tak, aby pojawiało się i wygasało automatycznie. Zazwyczaj nie rzuca się w oczy i nie wymaga żadnych działań ze strony użytkownika. Nie zatrzymuje również aktywności użytkownika.

Ten typ automatycznych powiadomień push jest idealny dla wyskakujących okienek na pulpicie. Jednak wsparcie dla Toast w WPF nie jest obfite.

Wskazówka pro powiadomienia Toast:

Obejściem dla tego scenariusza jest zbudowanie własnego interfejsu użytkownika powiadomień na pulpicie, aby aplikacja WPF mogła zawierać powiadomienia. Takie powiadomienie może zostać uruchomione w dowolnym momencie za pomocą konwencjonalnego zdarzenia C# w kodzie ViewModel.

Przykład, który wspólnie zbudujemy, to aplikacja WPFapp z powiadomieniami C#.

Będzie jedno okno nadrzędne z jednym przyciskiem. Kliknięcie przycisku wywoła PubNub publikujący dane JSON do sieci. Aplikacja będzie również subskrybować PubNub przy użyciu tego samego kanału i kluczy API, co kod publikowania (bezpłatne klucze PubNubAPI).

Kod subskrypcji PubNub wywoła zdarzenie C#, które utworzy wyskakujące powiadomienie push na pulpicie za każdym razem, gdy zostanie opublikowana nowa wiadomość. Opóźnienie dla wiadomości PubNub wynosi zazwyczaj od 80 do 100 milisekund, niezależnie od odległości wydawcy i subskrybenta.

PubNub posiada ponad 70 klienckich zestawów SDK, więc każde urządzenie z dostępem do Internetu może zostać włączone do tego schematu.

Projekt samouczka powiadomień WPFTutorial z C# i MVVM

Zamierzamy zbudować własną aplikację powiadomień w języku C#, aby zademonstrować moc komunikatów PubNub i rozwiązanie dla powiadomień pulpitu WPF. Oto struktura plików projektu MVVM:

Cały kod, do którego odwołuje się ten poradnik , jest dostępny jako*open source w serwisie* GitHub.

Aby uruchomićaplikację , należy uzyskaćna zawsze bezpłatneklucze PubNubAPI.

Pamiętaj, aby dodać klucze Publish i Subscribe do kodu źródłowego!

Tworzenie powiadomienia na pulpicie zaczynając od MVVM

1. Jeśli zaczynasz od zera, otwórz Visual*Studio(za darmo) i utwórz nową aplikację **WPFweb. Kliknij **Plik -> Nowy -> Projekt*.

2. Kliknij prawym przyciskiem myszy plik nowego projektu w Solution Explorer i kliknij Manage NuGet Packages. Aby kontynuować, musimy zainstalować PubNub.

3. Utwórz foldery w katalogu głównym projektu, jak pokazano na wcześniejszym zrzucie ekranu. Te foldery to Model, View i ViewModel. W folderze View utwórz 2 nowe okna XAML, Main Window i Notification Window.

Kontynuacja tworzenia powiadomień za pomocą XAML

Oto XAML dla 2 utworzonych plików widoku. Stworzy to interfejs użytkownika naszego okna nadrzędnego i okna powiadomień.

MainWindow.xaml

<Window x:Class="WPF_PubNub.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:WPF_PubNub.VM" xmlns:local="clr-namespace:WPF_PubNub" mc:Ignorable="d"

    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" Title="{Binding WindowName}" Height="300" Width="400"> <Window.DataContext> <vm:PubNubVM /> </Window.DataContext> <i:Interaction.Triggers> <i:EventTrigger EventName="Loaded"> <ei:CallMethodAction TargetObject="{Binding}" MethodName="MainWindowLoaded"/> </i:EventTrigger> </i:Interaction.Triggers> <!--Loaded="{Binding OnWindowLoaded}"--> <Grid > <StackPanel Name="stackPanel2" Grid.Column="1" Grid.Row="0" Background="White" > <Border CornerRadius="5" BorderBrush="Gray" BorderThickness="2" HorizontalAlignment="Center" > <Button Width="{Binding ButtonWidth}" 
            Height="{Binding ButtonHeight}" Content="{Binding ButtonContent}" Background="#FFF3F0F0"> <i:Interaction.Triggers> <i:EventTrigger EventName="Click"> <ei:CallMethodAction TargetObject="{Binding}" MethodName="PublishMessage"/> </i:EventTrigger> </i:Interaction.Triggers> </Button> </Border> </StackPanel> </Grid> </Window>.

NotificationWindow.xaml

Height="116.783" Width="319.93" Background="#FF110505" > <!-- Animation --> <!-- Obszar powiadomień -->

Przykład kodu okna powiadomień w języku C

Poniżej znajduje się kod C# dla okna powiadomień. Cały kod jest specyficzny dla interfejsu użytkownika. Ma on przypominać powiadomienie "Toast".

using System; using System.Windows; using System.Windows.Threading; namespace Toast { /// /// Logika interakcji dla NotificationWindow.xaml /// public partial class NotificationWindow : Window { public NotificationWindow() { InitializeComponent(); Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() => { var workingArea = System.Windows.Forms.Screen.PrimaryScreen.WorkingArea; var transform = PresentationSource.FromVisual(this).CompositionTarget.TransformFromDevice; var corner = transform.Transform(new Point(workingArea.Right, workingArea.Bottom)); Left = corner.X - ActualWidth; Top = corner.Y - ActualHeight; }); } //Close the notification window private void Button_Click_Close(object sender, RoutedEventArgs e) { Close(); } } }

Ostatni krok do stworzenia powiadomienia w C#, WPF i MVVM

1. W folderze ViewModel utwórz klasę PubNubVM.cs, która będzie pośrednikiem między kodem modelu a kodem widoku. Kod tego pliku można znaleźć tutaj.

2. W folderze Model utwórz klasę PubNubHelper. cs do interakcji z PubNub publish/subscribe API. Pamiętaj, aby wprowadzić własne klucze PubNubAPI w kodzie inicjalizacyjnym PubNub.

3. Możesz zobaczyć "__YOUR_PUBNUB_PUBLISH_KEY_HERE__" i "__YOUR_PUBNUB_SUBSCRIBE_KEY_HERE__" w pliku. Zastąp te literały łańcuchowe swoimi kluczami.

using Newtonsoft.Json; using PubnubApi; using System; using System.Windows; using Toast; namespace WPF_PubNub.Model { public class PubNubHelper { Pubnub pubnub; private readonly string ChannelName = "win-notification";
public void Init() { //Init PNConfiguration pnConfiguration = new PNConfiguration { PublishKey = "__YOUR_PUBNUB_PUBLISH_KEY_HERE__", SubscribeKey = "__YOUR_PUBNUB_SUBSCRIBE_KEY_HERE__", Secure = true }; pubnub = new Pubnub(pnConfiguration); //Subscribe pubnub.Subscribe() .Channels(new string[] { ChannelName }) .WithPresence() .Execute(); } //Publish a message public void Publish() { JsonMsg Person = new JsonMsg { Name = "John Doe", Description = "Description", Date = DateTime.Now.ToString() }; //Convert to string string arrayMessage = JsonConvert.SerializeObject(Person); pubnub.Publish() .Channel(ChannelName) .Message(arrayMessage) .Async(new PNPublishResultExt((result, status) => {})); } //listen to the channel public void Listen() { SubscribeCallbackExt listenerSubscribeCallack = new SubscribeCallbackExt( (pubnubObj, message) => { //Call the notification windows from the UI thread Application.Current.Dispatcher.Invoke(new Action() => { //Show the message as a WPF window message like WIN-10 toast NotificationWindow ts = new NotificationWindow(); //Convert the message to JSON JsonMsg bsObj = JsonConvert.DeserializeObject(message.Message.ToString()); string messageBoxText = "Name: " + bsObj.Name + Environment.NewLine + "Description: " + bsObj.Description + Environment.NewLine + "Date: " + bsObj.Date; ts.NotifText.Text = messageBoxText; ts.Show(); })); }, (pubnubObj, presence) => { // obsługuj przychodzące dane obecności }, (pubnubObj, status) => { // zwracany obiekt statusu jest zawsze związany z subskrypcją, ale może zawierać // informacje o subskrypcji, bicie serca lub błędy // użyj PNOperationType, aby włączyć różne opcje }); pubnub.AddListener(listenerSubscribeCallack); } } }

Pro Tip: W folderze Model potrzebna będzie również klasa JsonMsg.cs, którą można znaleźćtutaj. Pamiętaj, aby dodać wszystkie pakiety NuGet, do których odwołuje się plik projektu WPF. Istnieje również kilka plików graficznych JPG dla folderu View. Obrazy te pojawiają się w niestandardowym oknie powiadomień. Pamiętaj, aby dodać je do folderu View projektu.

4. Uruchom projekt! Kliknij przycisk "Trigger Notification Window". W prawym dolnym rogu pulpitu pojawi się niestandardowe powiadomienie! Jest to obsługiwane przez PubNub, więc jeśli ta aplikacja działa na wielu komputerach, powiadomienie pojawi się na każdym komputerze, dla każdego kliknięcia przycisku.

Dzięki wykorzystaniu innych PubNubSDK i urządzeń klienckich, system powiadomień jest niezależny od języka/urządzenia.

Pierwsze kroki z powiadomieniami Desktop Toast

Ten wzorzec powiadomień na pulpicie można zmodyfikować w celu uzyskania niestandardowych powiadomień push mających na celu poprawę komfortu użytkowania. Można to osiągnąć za pomocą wielu kanałów, a także za pomocą Menedżera dostępu, aby zabezpieczyć, kto może odczytywać/zapisywać na określonych kanałach.

Aby uzyskać więcej przykładów kodu C#, skontaktuj się z devrel@pubnub.com lub zapoznaj się z naszą dokumentacją i zasobami dla programistów, aby przyspieszyć tworzenie aplikacji!

Jak PubNub może ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Podstawą naszej platformy jest największa w branży i najbardziej skalowalna sieć komunikacyjna w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub

Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację

Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij

Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.