摘要：
npminit-ynpminstall@aspnet/signalr˂!
1、新建WebApi
2、安装Microsoft.AspNetCore.SignalR
3、新建一个集线器和消息类
usingMicrosoft.AspNetCore.SignalR; usingSystem.Threading.Tasks; namespaceWebApi.Chat { public classChatHub : Hub { //SendMsg用于前端调用 publicTask SendMsg(ChatMessageInfo info) { //在客户端实现此处的Show方法 return Clients.All.SendAsync("Show", info.UserName + ":" +info.Message); } } }
namespaceWebApi.Chat { public classChatMessageInfo { public string UserName { get; set; } public string Message { get; set; } } }
4、配置Startup
5、新建html，并发布到iis下
注：signalr.min.js不依赖jquery，此处只是方便编码，通过以下两个命令在node_modules @aspnetsignalrdistrowser中获得signalr的js文件。
npm init -y
npm install @aspnet/signalr<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text"id="userid"placeholder="Enter user name" /> <br> <input type="text"id="message"placeholder="Enter sned message" /> <input type="button"id="btnSend"value="Send" /> <ul id="msglist"></ul> <script type="text/javascript"src="jquery.min.js"></script> <script type="text/javascript"src="signalr.min.js"></script> <script> $(function() { //服务地址 let hubUrl = 'http://localhost:50432/chathub'; let httpConnection = newsignalR.HttpConnection(hubUrl); let hubConnection = newsignalR.HubConnection(httpConnection); $("#btnSend").click(function() { //新建对象 let obj = newObject(); obj.UserName =$('#userid').val(); obj.Message =$('#message').val(); //调用服务器方法 hubConnection.invoke('SendMsg', obj); }); //服务器回调方法 hubConnection.on('Show', data =>{ $('#msglist').append($('<li>').text(data)); }); hubConnection.start(); }); </script> </body> </html>
6、效果图
