[SignalR Learning Series] 2. The first SignalR program and the first signalr
Create a project
1. Create a Web project using Visual Studio 2015
2. Select an empty Template
3. Add a new SignalR Hub Class (v2) file and change the Class name to ChatHub.
4. Modify the ChatHub code
using System;using System.Collections.Generic;using System.Linq;using System.Web;using Microsoft.AspNet.SignalR;namespace SignalRDemo{ public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } }}
5. Add the OWIN Startup Class in the project and change it to Startup.
6. Modify the class Startup code
using System;using System.Threading.Tasks;using Microsoft.Owin;using Owin;[assembly: OwinStartup(typeof(SignalRDemo.Startup))]namespace SignalRDemo{ public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR(); } }}
7.20.index.html page and set it to start page
8. Upgrade jQuery and SignalR to the latest version in Nuget. jQuery and SignalR in the default template may be of the old version.
8.edit the content of the index.html page. Pay attention to the jQuery and SignalR versions.
<!DOCTYPE html>9. Start debugging, enter the name, and then you can start the conversation. In this case, open another browser, enter the name, and the two clients can talk to each other. A simple chat room is ready.
Code explanation
SignalR Hubs
ChatHub inherits from Microsoft. AspNet. SignalR. Hub.
The client sends information by calling ChatHub. Send, and the hub sends information to the client by calling Clients. All. broadcastMessage.
The Send method embodies several Hub concepts:
broadcastMessageMethod) to update the client.
SignalR and jQuery
First, declare a hub proxy.
var chat = $.connection.chatHub;
Create a callback function in the js script. The Hub class of the server will call this method to update each client.
chat.client.broadcastMessage = function (name, message) { // Html encode display name and message. var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page. $('#discussion').append('<li><strong>' + encodedName + '</strong>: ' + encodedMsg + '</li>'); };
Start a connection and create a function to process the Send button event on the page.
$. Connection. hub. start (). done (function () {$ ('# sendmessage '). click (function () {// call the send method chat on the Hub. server. send ($ ('# displayname '). val (), $ ('# message '). val (); // clear the textbox and focus on the textbox $ ('# message '). val (''). focus ();});});
Source code link:
Https://pan.baidu.com/s/1eSP91GA password: r67v
Reference link:
Https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
