demo5 - rxjs 6

Author: cecilphillip

src/demo5/Controllers/MessageController.cs

@@ -0,0 +1,27 @@
+using System.Threading.Tasks;
+using demo5.Hubs;
+using demo5.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SignalR;
+
+namespace demo4.Controllers
+{
+
+    [ApiController]
+    [Route("/message")]
+    public class MessageController : Controller
+    {
+        public IHubContext<ApplicationHub> _hubContext { get; }
+
+        public MessageController(IHubContext<ApplicationHub> hubContext)
+        {
+            _hubContext = hubContext;
+        }
+
+        [HttpPost]
+        public Task PostMessage(ChatMessage message)
+        {
+            return _hubContext.Clients.All.SendAsync("Send", message.Message);
+        }
+    }
+}

src/demo5/Hubs/ApplicationHub.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.SignalR;
+using System.Threading.Tasks;
+using demo5.Models;
+using System.Threading.Channels;
+using System;
+
+namespace demo5.Hubs
+{
+    public class ApplicationHub : Hub
+    {
+         public Task Send(ChatMessage message){
+            return Clients.All.SendAsync("Send", message.Message);
+        }
+
+        public ChannelReader<int> CountDown(int count) {
+            var channel = Channel.CreateUnbounded<int>();
+
+            _ = WriteToChannel(channel.Writer, count);
+
+            return channel.Reader;
+
+            async Task WriteToChannel(ChannelWriter<int> writer, int thing) {
+                for (int i = thing; i >= 0 ; i--)
+                {
+                    await writer.WriteAsync(i);
+                    await Task.Delay(TimeSpan.FromSeconds(0.75));
+                }
+
+                writer.Complete();
+            }
+        }
+    }
+}

src/demo5/Models/ChatMessage.cs

@@ -0,0 +1,7 @@
+namespace demo5.Models
+{
+    public class ChatMessage
+    {
+        public string Message { get; set; }
+    }
+}

src/demo5/Program.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace demo5
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateWebHostBuilder(args).Build().Run();
+        }
+
+        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
+            WebHost.CreateDefaultBuilder(args)
+                .UseStartup<Startup>();
+    }
+}

src/demo5/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:9016",
+      "sslPort": 44344
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "demo5": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

src/demo5/Startup.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using demo5.Hubs;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace demo5
+{
+    public class Startup
+    {
+        // This method gets called by the runtime. Use this method to add services to the container.
+        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
+        public void ConfigureServices(IServiceCollection services)
+        {
+            services.AddMvc();
+            services.AddSignalR()
+                .AddMessagePackProtocol() ;
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
+        {
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+
+            app.UseFileServer();
+            app.UseMvc();
+            app.UseSignalR(routes =>
+            {
+                routes.MapHub<ApplicationHub>("/app");
+            });
+        }
+    }
+}

src/demo5/client/main-component.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <h2>Hub API</h2>
+    <form v-on:submit.prevent="addMessage">
+        <input type="text" v-model="newMessage">
+        <input type="submit" value="Send">
+    </form>
+
+    <h2>REST API</h2>
+    <form v-on:submit.prevent="addRestMessage">
+        <input type="text" v-model="newRestMessage">
+        <input type="submit" value="Send">
+    </form>
+
+    <h2>Streaming Hub</h2>
+    <form v-on:submit.prevent="countDown">
+        <input type="text" v-model="number">
+        <input type="submit" value="Send">
+    </form>
+
+    <ul>
+        <li v-for="(message, index) in messages" :key="index">{{message}}</li>
+    </ul>
+</div>
+</template>
+
+<script lang="ts">
+import { HubConnectionBuilder, HubConnection, LogLevel } from "@aspnet/signalr";
+import { MessagePackHubProtocol } from "@aspnet/signalr-protocol-msgpack";
+
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+
+import { map, filter, switchMap } from 'rxjs/operators';
+import {adapt} from './stream-adapter';
+
+@Component({})
+export default class MainComponent extends Vue {
+  messages: string[] = [];
+  newMessage: string = "";
+  newRestMessage: string = "";
+  number: string = "";
+  connection: HubConnection = null;
+
+  created() {
+    this.connection = new HubConnectionBuilder()
+      .configureLogging(LogLevel.Information)
+      .withUrl("/app")
+      .withHubProtocol(new MessagePackHubProtocol())
+      .build();
+
+    console.log(this.connection);
+
+    this.connection.on("Send", message => {
+      this.messages.push(message);
+    });
+
+    this.connection.start().catch(error => console.error(error));
+  }
+
+  async addMessage() {
+    await this.connection.invoke("Send", { Message: this.newMessage });
+    this.newMessage = null;
+  }
+  async addRestMessage() {
+    await fetch("/message", {
+      method: "post",
+      body: JSON.stringify({ Message: this.newRestMessage }),
+      headers: {
+        "content-type": "application/json"
+      }
+    });
+    this.newRestMessage = null;
+  }
+
+  async countDown() {
+    var stream = this.connection.stream<string>("CountDown", parseInt(this.number));
+    var messages = this.messages;
+    
+    adapt(stream).pipe(
+      filter(x => parseInt(x) % 2 === 0)
+    ).subscribe(x => messages.push(x));
+
+    this.number = null;
+  }
+}
+</script>

src/demo5/client/main.ts

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import MainComponent from './main-component.vue';
+
+new Vue({ el: "#app", components: { MainComponent } });

src/demo5/client/stream-adapter.ts

@@ -0,0 +1,8 @@
+import { IStreamResult } from "@aspnet/signalr";
+import { Subject, Observable } from "rxjs";
+
+export function adapt<T = any>(stream: IStreamResult<T>): Observable<T> {
+    const subject = new Subject<T>();
+    stream.subscribe(subject);
+    return subject.asObservable();
+}

src/demo5/demo5.csproj

@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>netcoreapp2.1</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Folder Include="wwwroot\" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.App" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.MessagePack" Version="1.0.0-rc1-final" />
+  </ItemGroup>
+</Project>