Skip to content

Commit c76b352

Browse files
cecilphillipcecilphillip
committed
adding demo7 - (WIP) SignalR VueJS Plugin
1 parent 974bb59 commit c76b352

24 files changed

+8541
-75
lines changed

‎README.MD

+4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ The master branch is currently targeting .NET Core 2.1 RC1, ASP.NET Core 2.1 RC1
2323

2424
- [Demo 5](src/demo5) - NPM for JavaScript. Webpack bundling with TypeScript transpiling to ES2015. Async vue.js component (SFC). RxJS 6 w/ SignalR stream adapter.
2525

26+
- [Demo 6](src/demo6) - NPM for JavaScript. Webpack bundling with TypeScript transpiling. Async vue.js component (SFC) + vuex state management. RxJS 6 w/ SignalR stream adapter.
27+
28+
- [Demo 7](src/demo7) - NPM for JavaScript. Webpack bundling with TypeScript transpiling. Async vue.js component (SFC) + vuex state management + experimental SignalR VueJS plugin. RxJS 6 w/ SignalR stream adapter.
29+
2630
## Useful tools
2731

2832
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=code-github-cephilli)

‎src/demo5/custom.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
declare module '*.html' {
22
var _: string;
3-
export default _;
3+
export default _;
44
}
55

66
declare module "*.vue" {
77
import Vue from 'vue'
88
export default Vue
9-
}
9+
}

‎src/demo6/client/main-component/main-component.ts

+73-73
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,80 @@ import Vue from "vue";
55
import { Component } from "vue-property-decorator";
66

77
import { map, filter, switchMap } from 'rxjs/operators';
8-
import {adapt} from '../stream-adapter';
8+
import { adapt } from '../stream-adapter';
99

1010
@Component({})
1111
export default class MainComponent extends Vue {
12-
connection: HubConnection = null;
13-
14-
get messages(): string[] {
15-
return this.$store.state.messages;
16-
}
17-
18-
get newMessage():string {
19-
return this.$store.state.newMessage;
20-
}
21-
22-
set newMessage(value: string) {
23-
this.$store.commit('updateNewMessage', value);
24-
}
25-
26-
get newRestMessage():string {
27-
return this.$store.state.newRestMessage;
28-
}
29-
30-
set newRestMessage(value: string) {
31-
this.$store.commit('updateNewRestMessage', value);
32-
}
33-
34-
get number():string {
35-
return this.$store.state.number;
36-
}
37-
38-
set number(value: string) {
39-
this.$store.commit('updateNumber', value);
40-
}
41-
42-
created() {
43-
this.connection = new HubConnectionBuilder()
44-
.configureLogging(LogLevel.Information)
45-
.withUrl("/app")
46-
.withHubProtocol(new MessagePackHubProtocol())
47-
.build();
48-
49-
console.log(this.connection);
50-
51-
this.connection.on("Send", message => {
52-
this.$store.commit("addNewMessage",message);
53-
});
54-
55-
this.connection.start().catch(error => console.error(error));
56-
}
57-
58-
async addMessage() {
59-
await this.connection.invoke("Send", { Message: this.newMessage });
60-
this.$store.commit("updateNewMessage", null);
61-
}
62-
63-
async addRestMessage() {
64-
await fetch("/message", {
65-
method: "post",
66-
body: JSON.stringify({ Message: this.newRestMessage }),
67-
headers: {
68-
"content-type": "application/json"
69-
}
70-
});
71-
this.$store.commit("updateNewMessage", null);
72-
}
73-
74-
async countDown() {
75-
var stream = this.connection.stream<string>("CountDown", parseInt(this.number));
76-
var store = this.$store;
77-
78-
adapt(stream).pipe(
79-
filter(x => parseInt(x) % 2 === 0)
80-
).subscribe(x => store.commit("addNewMessage",x));
81-
82-
this.number = null;
83-
}
12+
connection: HubConnection = null;
13+
14+
get messages(): string[] {
15+
return this.$store.state.messages;
16+
}
17+
18+
get newMessage(): string {
19+
return this.$store.state.newMessage;
20+
}
21+
22+
set newMessage(value: string) {
23+
this.$store.commit('updateNewMessage', value);
24+
}
25+
26+
get newRestMessage(): string {
27+
return this.$store.state.newRestMessage;
28+
}
29+
30+
set newRestMessage(value: string) {
31+
this.$store.commit('updateNewRestMessage', value);
32+
}
33+
34+
get number(): string {
35+
return this.$store.state.number;
36+
}
37+
38+
set number(value: string) {
39+
this.$store.commit('updateNumber', value);
40+
}
41+
42+
created() {
43+
this.connection = new HubConnectionBuilder()
44+
.configureLogging(LogLevel.Information)
45+
.withUrl("/app")
46+
.withHubProtocol(new MessagePackHubProtocol())
47+
.build();
48+
49+
console.log(this.connection);
50+
51+
this.connection.on("Send", message => {
52+
this.$store.commit("addNewMessage", message);
53+
});
54+
55+
this.connection.start().catch(error => console.error(error));
56+
}
57+
58+
async addMessage() {
59+
await this.connection.invoke("Send", { Message: this.newMessage });
60+
this.$store.commit("updateNewMessage", null);
61+
}
62+
63+
async addRestMessage() {
64+
await fetch("/message", {
65+
method: "post",
66+
body: JSON.stringify({ Message: this.newRestMessage }),
67+
headers: {
68+
"content-type": "application/json"
69+
}
70+
});
71+
this.$store.commit("updateNewMessage", null);
72+
}
73+
74+
async countDown() {
75+
var stream = this.connection.stream<string>("CountDown", parseInt(this.number));
76+
var store = this.$store;
77+
78+
adapt(stream).pipe(
79+
filter(x => parseInt(x) % 2 === 0)
80+
).subscribe(x => store.commit("addNewMessage", x));
81+
82+
this.number = null;
83+
}
8484
}

‎src/demo7/Controllers/MessageController.cs

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using System.Threading.Tasks;
2+
using demo7.Hubs;
3+
using demo7.Models;
4+
using Microsoft.AspNetCore.Mvc;
5+
using Microsoft.AspNetCore.SignalR;
6+
7+
namespace demo7.Controllers
8+
{
9+
10+
[ApiController]
11+
[Route("/message")]
12+
public class MessageController : Controller
13+
{
14+
public IHubContext<ApplicationHub> _hubContext { get; }
15+
16+
public MessageController(IHubContext<ApplicationHub> hubContext)
17+
{
18+
_hubContext = hubContext;
19+
}
20+
21+
[HttpPost]
22+
public Task PostMessage(ChatMessage message)
23+
{
24+
return _hubContext.Clients.All.SendAsync("Send", message.Message);
25+
}
26+
}
27+
}

‎src/demo7/Hubs/ApplicationHub.cs

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using Microsoft.AspNetCore.SignalR;
2+
using System.Threading.Tasks;
3+
using demo7.Models;
4+
using System.Threading.Channels;
5+
using System;
6+
7+
namespace demo7.Hubs
8+
{
9+
public class ApplicationHub : Hub
10+
{
11+
public Task Send(ChatMessage message){
12+
return Clients.All.SendAsync("Send", message.Message);
13+
}
14+
15+
public ChannelReader<int> CountDown(int count) {
16+
var channel = Channel.CreateUnbounded<int>();
17+
18+
_ = WriteToChannel(channel.Writer, count);
19+
20+
return channel.Reader;
21+
22+
async Task WriteToChannel(ChannelWriter<int> writer, int thing) {
23+
for (int i = thing; i >= 0 ; i--)
24+
{
25+
await writer.WriteAsync(i);
26+
await Task.Delay(TimeSpan.FromSeconds(0.75));
27+
}
28+
29+
writer.Complete();
30+
}
31+
}
32+
}
33+
}

‎src/demo7/Models/ChatMessage.cs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
namespace demo7.Models
2+
{
3+
public class ChatMessage
4+
{
5+
public string Message { get; set; }
6+
}
7+
}

‎src/demo7/Program.cs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.IO;
4+
using System.Linq;
5+
using System.Threading.Tasks;
6+
using Microsoft.AspNetCore;
7+
using Microsoft.AspNetCore.Hosting;
8+
using Microsoft.Extensions.Configuration;
9+
using Microsoft.Extensions.Logging;
10+
11+
namespace demo7
12+
{
13+
public class Program
14+
{
15+
public static void Main(string[] args)
16+
{
17+
CreateWebHostBuilder(args).Build().Run();
18+
}
19+
20+
public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
21+
WebHost.CreateDefaultBuilder(args)
22+
.UseStartup<Startup>();
23+
}
24+
}

‎src/demo7/Properties/launchSettings.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:47333",
7+
"sslPort": 44398
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"demo7": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"applicationUrl": "https://localhost:5001;http://localhost:5000",
22+
"environmentVariables": {
23+
"ASPNETCORE_ENVIRONMENT": "Development"
24+
}
25+
}
26+
}
27+
}

‎src/demo7/Startup.cs

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using demo7.Hubs;
6+
using Microsoft.AspNetCore.Builder;
7+
using Microsoft.AspNetCore.Hosting;
8+
using Microsoft.AspNetCore.Http;
9+
using Microsoft.Extensions.DependencyInjection;
10+
11+
namespace demo7
12+
{
13+
public class Startup
14+
{
15+
// This method gets called by the runtime. Use this method to add services to the container.
16+
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
17+
public void ConfigureServices(IServiceCollection services)
18+
{
19+
services.AddMvc();
20+
services.AddSignalR()
21+
.AddMessagePackProtocol() ;
22+
}
23+
24+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
25+
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
26+
{
27+
if (env.IsDevelopment())
28+
{
29+
app.UseDeveloperExceptionPage();
30+
}
31+
32+
app.UseFileServer();
33+
app.UseMvc();
34+
app.UseSignalR(routes =>
35+
{
36+
routes.MapHub<ApplicationHub>("/app");
37+
});
38+
}
39+
}
40+
}

0 commit comments

Comments
 (0)