下载nuget包,按照readme在Startup.cs中ConfigureServices
方法中增加services.AddSignalR();
在Configure
增加app.UseSignalR(u => u.MapHub<Chat>("/chathub"));
npm install @aspnet/signalr 通过npm把signalr.js下到本地,然后添加到项目中。
然后创建hub类(集线器类)
public class Chat : Hub
{
/// <summary>
/// 向所有人推送消息
/// </summary>
/// <param name="user"></param>
/// <param name="message"></param>
/// <returns></returns>
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", Context.ConnectionId, message);
}
}
创建index页面,用以下内容覆盖
@page
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-6"> </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"> </div>
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
@*
If you need a version of the chat script that is compatible with IE 11, replace the above <script> tag that imports chat.js with this one
<script src="~/js/es5-chat.js"></script>
*@
<script src="~/lib/SingnlR/signalr.js"></script>
<script type="text/javascript">
const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
connection.on("ReceiveMessage", (user, message) => {
debugger;
const encodedMsg = user + " says " + message;
const li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
document.getElementById("sendButton").addEventListener("click", event => {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
event.preventDefault();
});
connection.start().catch(err => console.error(err.toString()));
</script>
上面是客户端如何调用signalR的服务器端,同时也会存在controller需要访问服务器端,这么实现
[Route("api")]
[ApiController]
public class ApiController : ControllerBase
{
private readonly IHubContext<Chat> _hubContext;
public ApiController(IHubContext<Chat> hubContext)
{
_hubContext = hubContext;
}
[HttpPost,Route("send")]
public string Create([FromBody] string value)
{
if (value == "gift")
{
_hubContext.Clients.All.SendCoreAsync("ReceiveMessage", new object[] { "giftCoupon", "Start" });
Thread.Sleep(20000);
return value;
}
else if (value == "end")
{
_hubContext.Clients.All.SendCoreAsync("ReceiveMessage", new object[] { "giftCoupon","Over"});
}
return "error";
}
}