In this section, you create a Node.js project to convert TypeScript to JavaScript and bundle client-side resources, including HTML and CSS, using Webpack. Replace the code that displays Hello World! with the following code: app.MapHub("/hub") In Program.cs, map the /hub route to the ChatHub hub. The received messages are sent to all clients connected to the hub.Īdd the following using statement at the top of Program.cs to resolve the ChatHub reference: using SignalRWebpack.Hubs A call is made to SendAsync on Clients.All. The C# NewMessage method expects the data sent by the client. In this example, the TypeScript client sends a message identified as newMessage. A method named after the message name is enough. It's unnecessary to have a generic on method to receive all the messages. The preceding code broadcasts received messages to all connected users once the server receives them. Public async Task NewMessage(long username, string message) =>Īwait ("messageReceived", username, message) The file is served whether the user enters its full URL or the root URL of the web app.Ĭreate a new directory named Hubs in the project root, SignalRWebpack/, for the SignalR hub class.Ĭreate a new file, Hubs/ChatHub.cs, with the following code: using The preceding code allows the server to locate and serve the index.html file. In Program.cs, call AddSignalR: var builder = WebApplication.CreateBuilder(args) Īgain, in Program.cs, call UseDefaultFiles and UseStaticFiles: var app = builder.Build() In this section, you configure the ASP.NET Core web app to send and receive SignalR messages. The preceding command adds the package, enabling TypeScript compilation in the project. NET CLI command in the Integrated Terminal: dotnet add package The code command opens the SignalRWebpack directory in the current instance of Visual Studio Code.The dotnet new command creates an empty ASP.NET Core web app in a SignalRWebpack directory.Run the following commands in the Integrated Terminal: dotnet new web -o SignalRWebpack Visual Studio adds the NuGet package under the Dependencies node in Solution Explorer, enabling TypeScript compilation in the project. In the Browse tab, search for and then select Install on the right to install the package. In Solution Explorer, right-click the project node and select Manage NuGet Packages.Select Create.Īdd the NuGet package to the project: NET 6.0 (Long-term support) from the Framework drop-down. Name the project SignalRWebpack, and select Create.Use the File > New > Project menu option and choose the ASP.NET Core Empty template.Select the up arrow to move the entry to the second position in the list, and select OK: Navigate to Tools > Options > Projects and Solutions > Web Package Management > External Web Tools. At the start window, select Continue without code. To configure Visual Studio to look for npm in the PATH environment variable: By default, Visual Studio uses the version of npm found in its installation directory.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |