demo 6 (WIP) - manage state with vuex

Author: cecilphillip

src/demo5/client/stream-adapter.ts

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

src/demo6/Controllers/MessageController.cs

@@ -0,0 +1,27 @@
+using System.Threading.Tasks;
+using demo6.Hubs;
+using demo6.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SignalR;
+
+namespace demo6.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/demo6/Hubs/ApplicationHub.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.SignalR;
+using System.Threading.Tasks;
+using demo6.Models;
+using System.Threading.Channels;
+using System;
+
+namespace demo6.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/demo6/Models/ChatMessage.cs

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

src/demo6/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 demo6
+{
+    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/demo6/Properties/launchSettings.json

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

src/demo6/Startup.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using demo6.Hubs;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace demo6
+{
+    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/demo6/client/main-component/main-component.ts

@@ -0,0 +1,84 @@
+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 {
+  connection: HubConnection = null;
+
+  get messages(): string[] {
+    return this.$store.state.messages;
+  }
+
+ get newMessage():string {
+   return this.$store.state.newMessage;
+ }
+
+ set newMessage(value: string) {
+   this.$store.commit('updateNewMessage', value);
+ }
+
+ get newRestMessage():string {
+   return this.$store.state.newRestMessage;
+ }
+
+ set newRestMessage(value: string) {
+   this.$store.commit('updateNewRestMessage', value);
+ }
+
+ get number():string {
+   return this.$store.state.number;
+ }
+
+ set number(value: string) {
+   this.$store.commit('updateNumber', value);
+ }
+
+  created() {
+    this.connection = new HubConnectionBuilder()
+      .configureLogging(LogLevel.Information)
+      .withUrl("/app")
+      .withHubProtocol(new MessagePackHubProtocol())
+      .build();
+
+    console.log(this.connection);
+
+    this.connection.on("Send", message => {
+       this.$store.commit("addNewMessage",message);
+    });
+
+    this.connection.start().catch(error => console.error(error));
+  }
+
+  async addMessage() {
+    await this.connection.invoke("Send", { Message: this.newMessage });
+      this.$store.commit("updateNewMessage", null);
+  }
+
+  async addRestMessage() {
+    await fetch("/message", {
+      method: "post",
+      body: JSON.stringify({ Message: this.newRestMessage }),
+      headers: {
+        "content-type": "application/json"
+      }
+    });
+    this.$store.commit("updateNewMessage", null);
+  }
+
+  async countDown() {
+    var stream = this.connection.stream<string>("CountDown", parseInt(this.number));
+    var store = this.$store;
+
+    adapt(stream).pipe(
+      filter(x => parseInt(x) % 2 === 0)
+    ).subscribe(x =>  store.commit("addNewMessage",x));
+
+    this.number = null;
+  }
+}

src/demo6/client/main-component/main-component.vue

@@ -0,0 +1,27 @@
+<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" src="./main-component.ts"></script>

src/demo6/client/main.ts

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

src/demo6/client/store.ts

@@ -0,0 +1,37 @@
+import Vue from "vue";
+import Vuex, { Store } from "vuex";
+
+export interface StoreState {
+    messages: string[];
+    newMessage: string;
+    newRestMessage: string;
+    number: string;
+}
+
+Vue.use(Vuex);
+
+export const store = new Store<StoreState>({
+    state: {
+        messages: [],
+        newMessage: "",
+        newRestMessage: "",
+        number: ""
+    },
+    mutations: {
+        addNewMessage(state: StoreState, message: string) {
+            state.messages.push(message);
+        },
+
+        updateNewMessage(state: StoreState, newMessage: string) {
+            state.newMessage = newMessage;
+        },
+
+        updateNewRestMessage(state: StoreState, newRestMessage: string) {
+            state.newRestMessage = newRestMessage;
+        },
+
+        updateNumber(state: StoreState, number: string) {
+            state.number = number;
+        }
+    }
+});

src/demo6/client/stream-adapter.ts

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

src/demo6/custom.d.ts

@@ -0,0 +1,9 @@
+declare module '*.html' {
+    var _: string;
+    export default  _;
+}
+
+declare module "*.vue" {
+    import Vue from 'vue'
+    export default Vue
+  }

src/demo6/demo6.csproj

@@ -0,0 +1,16 @@
+<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>