使用SignalR实现简单聊天室和推送广告

所需材料：一个SignalR处理程序、一个前端页面、一个后端推广告服务、配置。

1、SignalR继承自Hub，里面有一个群发消息的方法，可以控制访问权限。

    /// <summary>
    /// 演示用
    /// </summary>
    public class SRDemo : Hub
    {
        //[Authorize]//此属性可禁止没有token的用户使用websocket，因为Program中已经配置了相关限制
        /// <summary>
        ///群发信息
        /// </summary>
        /// <returns></returns>
        public async Task SendMessage(string user, string message)
        {
            string connId = this.Context?.ConnectionId ?? "";
            string msg = $"{connId}:{user}:{DateTime.UtcNow}:{message}";
            if (Clients != null)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, msg);
            }
        }
}

　2、前端页面、所需js文件用添加客户端库的方式添加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="container">
        <div class="row"> </div>
        <div class="row">
            <div class="col-2">User</div>
            <div class="col-4"><input type="text" id="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row"> </div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
    <script src="js/signalr/dist/browser/signalr.min.js"></script>
    <script src="js/chat.js"></script>
</body>
</html>

　3、后端推广告服务，继承BackgroundService，每2秒推一条信息。

    /// <summary>
    /// 后台服务的demo
    /// </summary>
    public class HSDemo : BackgroundService
    {
        /// <summary>
        /// demo 需要在program.cs中注册为sington
        /// </summary>
        /// <param name="stoppingToken"></param>
        /// <returns></returns>
        protected override async Task ExecuteAsync(CancellationToken stoppingToken)
        {
            //连接Signal服务
            var hubConnection = new HubConnectionBuilder().WithUrl("https://localhost:7289/Hubs/Demo").Build();
            await hubConnection.StartAsync();

            try
            {
                while (!stoppingToken.IsCancellationRequested)
                {
                    await Task.Delay(2000);
                    try
                    {
                        await hubConnection.InvokeAsync("SendMessage", "server", Guid.NewGuid().ToString());

                    }
                    catch (Exception ex) { continue; }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.ToString());
            }
        }
    }

　4、配置Program.cs

//配置托管服务
void ConfigureHostedService()
{
    builder.Services.AddHostedService<HSDemo>();//此为演示,定时向Signal聊天者推广告,默认应关闭
}

　　

//映射SignalR
void MapSignalR()
{
    app.MapHub<SRDemo>("/Hubs/Demo");
}

　　可能还需要跨域

app.UseCors();

　　结束

 

posted @ 2023-01-22 10:09  土豆365  阅读(117)  评论(0)    收藏  举报