Skip to content

Commit

Permalink
WIP Update doc with another sample for Es5 JS (#5994)
Browse files Browse the repository at this point in the history
Update doc with another sample for Es5 JS
  • Loading branch information
rachelappel authored Apr 16, 2018
1 parent b3105af commit 253210f
Show file tree
Hide file tree
Showing 19 changed files with 163 additions and 82 deletions.
34 changes: 17 additions & 17 deletions aspnetcore/signalr/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,32 +31,29 @@ This tutorial demonstrates the following SignalR development tasks:
[View or download sample code](https://github.com/aspnet/Docs/tree/master/aspnetcore/signalr/get-started/sample/) ([how to download](xref:tutorials/index#how-to-download-a-sample))

> [!NOTE]
> The sample code in this article uses modern ECMAScript 6 features that aren't supported in Internet Explorer 11.
> To convert the sample for environments that do not support ECMAScript 6, such as Internet Explorer 11, use a transpiler such as [Babel](http://babeljs.io/).
# Prerequisites

Install the following software:

# [Visual Studio](#tab/visual-studio)

* [.NET Core 2.1.0 Preview 1 SDK](https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1) or later
* [Visual Studio 2017](https://www.visualstudio.com/downloads/) version 15.6 or later with the **ASP.NET and web development** workload
* [.NET Core 2.1.0 Preview 2 SDK](https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview2) or later
* [Visual Studio 2017](https://www.visualstudio.com/downloads/) version 15.7 or later with the **ASP.NET and web development** workload
* [npm](https://www.npmjs.com/get-npm)

# [Visual Studio Code](#tab/visual-studio-code)

* [.NET Core 2.1.0 Preview 1 SDK](https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1) or later
* [Visual Studio Code](https://code.visualstudio.com/download)
* [.NET Core 2.1.0 Preview 2 SDK](https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview2) or later
* [Visual Studio Code](https://code.visualstudio.com/download)
* [C# for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
* [npm](https://www.npmjs.com/get-npm)

-----

## Create an ASP.NET Core project that hosts SignalR client and server

#### [Visual Studio](#tab/visual-studio/)
# [Visual Studio](#tab/visual-studio/)

1. Use the **File** > **New Project** menu option and choose **ASP.NET Core Web Application**. Name the project *SignalRChat*.

![New Project dialog in Visual Studio](get-started/_static/signalr-new-project-dialog.png)
Expand All @@ -74,7 +71,8 @@ Install the following software:
```
5. Copy the <em>signalr.js</em> file from <em>node_modules\\@aspnet\signalr\dist\browser</em> to the <em>wwwroot\lib</em> folder in your project.

#### [Visual Studio Code](#tab/visual-studio-code/)
# [Visual Studio Code](#tab/visual-studio-code/)

1. From the **Integrated Terminal**, run the following command:

```console
Expand All @@ -88,23 +86,24 @@ Install the following software:
npm install @aspnet/signalr
```

* * *
-----

## Create the SignalR Hub

A hub is a class that serves as a high-level pipeline that allows the client and server to call methods on each other.

#### [Visual Studio](#tab/visual-studio/)
# [Visual Studio](#tab/visual-studio/)

1. Add a class to the project by choosing **File** > **New** > **File** and selecting **Visual C# Class**.

2. Inherit from `Microsoft.AspNetCore.SignalR.Hub`. The `Hub` class contains properties and events for managing connections and groups, as well as sending and receiving data.

3. Create the `SendMessage` method that sends a message to all connected chat clients. Notice it returns a [Task](https://msdn.microsoft.com/en-us/library/system.threading.tasks.task(v=vs.110).aspx), because SignalR is asynchronous. Asynchronous code scales better.

3. Create the `SendMessage` method that sends a message to all connected chat clients. Notice it returns a [Task](https://msdn.microsoft.com/library/system.threading.tasks.task(v=vs.110).aspx), because SignalR is asynchronous. Asynchronous code scales better.

[!code-csharp[Startup](get-started/sample/Hubs/ChatHub.cs)]

# [Visual Studio Code](#tab/visual-studio-code/)

#### [Visual Studio Code](#tab/visual-studio-code/)
1. Open the *SignalRChat* folder in Visual Studio Code.

2. Add a class to the project by selecting **File** > **New File** from the menu.
Expand All @@ -113,9 +112,10 @@ A hub is a class that serves as a high-level pipeline that allows the client and

4. Add a `SendMessage` method to the class. The `SendMessage` method sends a message to all connected chat clients. Notice it returns a [Task](/dotnet/api/system.threading.tasks.task), because SignalR is asynchronous. Asynchronous code scales better.

[!code-csharp[Startup](get-started/sample/Hubs/ChatHub.cs?range=7-14)]
[!code-csharp[Startup](get-started/sample/Hubs/ChatHub.cs?range=6-12)]

-----

* * *
## Configure the project to use SignalR

The SignalR server must be configured so that it knows to pass requests to SignalR.
Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/signalr/get-started/sample/Hubs/ChatHub.cs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRCoreChat.Hubs
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
Expand Down
13 changes: 10 additions & 3 deletions aspnetcore/signalr/get-started/sample/Pages/About.cshtml
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
@page
@model AboutModel
@{
ViewData["Title"] = "About";
ViewData["Title"] = "About SignalRChat";
}
<h2>@ViewData["Title"]</h2>
<h3>@Model.Message</h3>

<p>Use this area to provide additional information.</p>
<p>This is a simple ASP.NET Core SignalR Chat example</p>
<p>
This example demonstrates:
<ul>
<li>SignalR Startup</li>
<li>Hubs</li>
<li>JavaScript Client</li>
</ul>
</p>
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SignalRCoreChat.Pages
namespace SignalRChat.Pages
{
public class AboutModel : PageModel
{
Expand Down
7 changes: 1 addition & 6 deletions aspnetcore/signalr/get-started/sample/Pages/Contact.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,4 @@
Redmond, WA 98052-6399<br />
<abbr title="Phone">P:</abbr>
425.555.0100
</address>

<address>
<strong>Support:</strong> <a href="mailto:[email protected]">Support@example.com</a><br />
<strong>Marketing:</strong> <a href="mailto:[email protected]">Marketing@example.com</a>
</address>
</address>
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SignalRCoreChat.Pages
namespace SignalRChat.Pages
{
public class ContactModel : PageModel
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SignalRCoreChat.Pages
namespace SignalRChat.Pages
{
public class ErrorModel : PageModel
{
Expand Down
45 changes: 25 additions & 20 deletions aspnetcore/signalr/get-started/sample/Pages/Index.cshtml
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
@page
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-12">
User..........<input type="text" id="userInput" />
<br />
Message...<input type="text" id="messageInput" />
<input type="button" id="sendButton" value="Send Message" />
<div class="container">
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-6">&nbsp;</div>
<div class="col-6">
User..........<input type="text" id="userInput" />
<br />
Message...<input type="text" id="messageInput" />
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">&nbsp;</div>
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-12">
<ul id="messagesList"></ul>
</div>
</div>
<script src="~/lib/signalr/signalr.js"></script>
<script src="~/js/chat.js"></script>
<script src="~/lib/signalr/signalr.js"></script>
<script src="~/js/chat.js"></script>
@*<script src="~/js/es5-chat.js"></script>*@
2 changes: 0 additions & 2 deletions aspnetcore/signalr/get-started/sample/Pages/_Layout.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
Expand All @@ -66,7 +65,6 @@
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
Expand Down
17 changes: 16 additions & 1 deletion aspnetcore/signalr/get-started/sample/SignalRChat.csproj
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>netcoreapp2.1</TargetFramework>
<TypeScriptToolsVersion>2.8</TypeScriptToolsVersion>
</PropertyGroup>

<ItemGroup>
<None Remove="Properties\PublishProfiles\SignalRChat20180409114932 - Web Deploy.pubxml" />
<None Remove="Properties\PublishProfiles\SignalRChat20180410122408 - Web Deploy.pubxml" />
<None Remove="Properties\PublishProfiles\SignalRChattR - Web Deploy.pubxml" />
<None Remove="Properties\PublishProfiles\SignalRChattRR - Web Deploy.pubxml" />
</ItemGroup>


<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.0-preview1-final" />
<PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="2.1.0-preview1-final" />
</ItemGroup>


<ItemGroup>
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.1.0-preview1-28291" />
</ItemGroup>


<ItemGroup>
<Folder Include="Properties\PublishProfiles\" />
</ItemGroup>
Expand Down
20 changes: 9 additions & 11 deletions aspnetcore/signalr/get-started/sample/Startup.cs
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRCoreChat.Hubs;
using SignalRChat.Hubs;


namespace SignalRCoreChat
namespace SignalRChat
{
public class Startup
{
Expand All @@ -27,12 +26,12 @@ public void ConfigureServices(IServiceCollection services)

services.AddMvc();

services.AddCors(options => options.AddPolicy("CorsPolicy",
builder =>
{
builder.AllowAnyMethod().AllowAnyHeader()
.WithOrigins("http://localhost:55830");
}));
//services.AddCors(options => options.AddPolicy("CorsPolicy",
//builder =>
//{
// builder.AllowAnyMethod().AllowAnyHeader()
// .WithOrigins("http://localhost:55830");
//}));

services.AddSignalR();
}
Expand All @@ -51,10 +50,9 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseCookiePolicy();
app.UseCors("CorsPolicy");
//app.UseCors("CorsPolicy");
app.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("/chathub");
Expand Down

This file was deleted.

7 changes: 0 additions & 7 deletions aspnetcore/signalr/get-started/sample/appsettings.json

This file was deleted.

10 changes: 9 additions & 1 deletion aspnetcore/signalr/get-started/sample/wwwroot/js/chat.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
const connection = new signalR.HubConnection(
// The following sample code uses modern ECMAScript 6 features
// that aren't supported in Internet Explorer 11.
// To convert the sample for environments that do not support ECMAScript 6,
// such as Internet Explorer 11, use a transpiler such as
// Babel at http://babeljs.io/.
//
// See Es5-chat.js for a Babel transpiled version of the following code:

const connection = new signalR.HubConnection(
"/chathub", { logger: signalR.LogLevel.Information });

connection.on("ReceiveMessage", (user, message) => {
Expand Down
28 changes: 28 additions & 0 deletions aspnetcore/signalr/get-started/sample/wwwroot/js/es5-chat.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// To use the following code sample:
// In Pages\Index.cshtml,
// comment line #26: "<script src="~/js/chat.js"></script>"
// uncomment line #27: "<script src="~/js/es5-chat.js"></script>"

"use strict";

var connection = new signalR.HubConnection("/chathub", { logger: signalR.LogLevel.Information });

connection.on("ReceiveMessage", function (user, message) {
var encodedMsg = user + " says " + message;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});

document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error;
});
event.preventDefault();
});

connection.start().catch(function (err) {
return console.error;
});
1 change: 0 additions & 1 deletion aspnetcore/signalr/get-started/sample/wwwroot/js/site.js

This file was deleted.

Empty file.
21 changes: 21 additions & 0 deletions aspnetcore/signalr/get-started/sample/wwwroot/ts/chat.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// The following sample code uses modern ECMAScript 6 features
// that aren't supported in Internet Explorer 11.
// To convert the sample for environments that do not support ECMAScript 6,
// such as Internet Explorer 11, use a transpiler such as
// Babel at http://babeljs.io/.
//
// See Es5-chat.js for a Babel transpiled version of the following code:
var connection = new signalR.HubConnection("/chathub", { logger: signalR.LogLevel.Information });
connection.on("ReceiveMessage", function (user, message) {
var encodedMsg = user + " says " + message;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) { return console.error; });
event.preventDefault();
});
connection.start().catch(function (err) { return console.error; });
Loading

0 comments on commit 253210f

Please sign in to comment.