.net Core 中signalR的实现

下载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">&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>
@*
    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";
        }
    }

猜你喜欢

转载自blog.csdn.net/qq_24405919/article/details/82801518