Asp.net----SignalR 及时推送

最新推荐文章于 2023-05-26 11:29:50 发布

置顶小钟学Java

最新推荐文章于 2023-05-26 11:29:50 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/BigBossc/article/details/81537409

版权

一.简介:来自微软的介绍

微软文章地址:https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr

二:SignalR 的使用

测试环境:VS2015

在这里我用 SignalR做了一个小的聊天室demo 简单易懂帮助大家理解效果截图

首先:我们新建一个.net MVC的程序打开VS

新建MVC 我这里是用的 VS2015 鼠标右键点击项目名称点击管理NuGet程序包浏览搜索SignalR

点击安装

如果VS版本较低的话,可能会出现安装错误,那可能是因为jQuery版本较低需要卸载之前的版本再安装SiglnaR

注意:版本低的Vs不会自动自动生成Starup.cs类

废话不多说了,直接贴代码:

第一步:创建Startup.cs类(版本高的VS会自动创建MVC时生成)

using Microsoft.Owin;
using Owin;
[assembly: OwinStartupAttribute(typeof(SignalRDemo.Startup))]
namespace SignalRDemo
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

第二步:创建一个集线器类,用来装所有需要使用的方法.

继承Hub类,并且引入命名空间:

using Microsoft.AspNet.SignalR;
using System.Web.Script.Serialization;

using Microsoft.AspNet.SignalR;
using System.Web.Script.Serialization;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SignalRDemo
{
    /// <summary>
    /// TalkHub类集线器类
    /// </summary>
    public class TalkPeople: Hub//继承Hub
    {

        //使用SignalR中 一定要记住 
        //前台即client调用后台方法
        //后台即server调用前台方法
        //要弄清楚 不然很容易迷糊
        public static List<UserInfos> list = new List<UserInfos>();//用户集合
        /// <summary>
        /// 通知上线
        /// </summary>
        /// <param name="name"></param>
        public void OnLine(string name)
        {
            //存放客户信息
            UserInfos s = new UserInfos() { Id =Context.ConnectionId, name = name };
            list.Add(s);
            string json = new JavaScriptSerializer().Serialize(list);
            Clients.All.UserOnlie(s.Id, s.name, json);//调用前台方法UserOnlie()返回用户信息
            //注:UserOnlie();不是后台方法 而是前台声明的方法 
        }



        /// <summary>
        /// 通知下线
        /// </summary>
        /// <param name="stopCalled"></param>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
        {
            UserInfos u = list.Where(s => s.Id == Context.ConnectionId).FirstOrDefault();
            list.Remove(u);
            Clients.Others.UserDrop(u.Id, u.name,list.Count);
            return base.OnDisconnected(stopCalled);
        }

        /// <summary>
        /// 消息群发（通知所有人）
        /// </summary>
        public void SendMsgToAll(string name, string msg)
        {
            string time = DateTime.Now.ToLocalTime().ToString();

            Clients.All.GetAllMsg(name, msg, time);
        }

        /// <summary>
        /// 私聊
        /// </summary>
        public void SendMsgToSomeBody(string name, string uid, string msg)
        {
            string[] array = new string[] { };
            string time = DateTime.Now.ToLocalTime().ToString();
            uid = uid.Substring(0,uid.Length-1);
            array = uid.Split(',').ToArray();

            foreach (var item in array)
            {
                Clients.Client(item).GetSomeBodyMsg(name, msg, time);
            }
        }
    }
}

实体类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SignalRDemo
{
    public class UserInfos
    {
        public string Id { get; set; }
        public string name { get; set; }
    }
}

第三步:前台HTML布局:


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    @*注意:一定要引入signalR.js并且手写  <script src="/signalr/hubs"></script>*@
    <script src="~/Scripts/jquery.signalR-2.4.0.js"></script>
    <script src="/signalr/hubs"></script>
    <style>
       
        #chat_div{
         height: 733px;
        border: 1px solid gray;
        width: 833px;
        }
        #list_user{
            float:right;
            width:30%;
            height:100%;
             
        }
        .list_user_title{
           float: left;
            height: 5%;
            width: 100%;
          
            text-align: center;
            line-height: 38px;
            font-size: 18px;
            font-weight: 1000;
        }
        .list_user_online{
            float: left;
            height: 85%;
            width: 95%;
            border: 1px solid gray;
            overflow: auto;

        }
        .nock{
              border-radius: 6%;
            list-style-type: none;
            height: 25px;
            width: 92%;
            background-color: gray;
            margin-top: 9px;
            margin-left: 3.5%;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            color:white;
        }
         .isck{
              border-radius: 6%;
            list-style-type: none;
            height: 25px;
            width: 92%;
            background-color:#88bda9;
            margin-top: 9px;
            margin-left: 3.5%;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            color:white;
        }
        .list_user_content{
             float: left;
              height: 66%;
             width: 69%;
            border:1px solid gray;
             overflow: auto;
        }
        .list_user_msg{
            float: left;
            height: 32%;
            width: 69%;
          
            margin-top: 1%; 
        }
        .list_user_msg_text textarea{
                float: left;
                height: 164px;
                width: 100%;
              
                margin-top: 1%;
        }
        .list_user_msg_button{
            float:left;
            height: 46px;
            width: 99%;
            margin-top: 3%;
            margin-left: 74%;
        }
        #tatol_div{
            float:left;
            margin-left:20%;
              margin-top:7%;
        }
        .content_name{
            color:#556bee;
        }
        .content_time{
            color:green;
        }
        .content_msg{
            font-size:16px;
            color:gray;
            font-family:'Microsoft PhagsPa';
        }
          .content_msg_per{
            font-size:16px;
            color:red;
            font-family:'Microsoft PhagsPa';
        }
        .msg_div{
            margin-top:27px;
        }
    </style>
</head>
<body>

    <div id="tatol_div">
        <div id="chat_div">

            <div id="list_user">
                @*标题*@
                <div class="list_user_title">
                    大佬聊天室(<span id="num"></span>)
                </div>

                @*右侧用户List*@
                <div class="list_user_online">
                    <ul>
                        
                    </ul>
                </div>
            </div>

            @*聊天内容*@
            <div class="list_user_content">
               
            </div>
            @*发送消息界面*@
            <div class="list_user_msg">

                <div class="list_user_msg_text">
                    <textarea id="msg_text"></textarea>
                </div>
                @*按钮*@
                <div class="list_user_msg_button">
                    <button id="btn_send" >发送</button>
                    <button id="btn_clear">清空</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var username = "";
        $(function () {
            //连接服务器
            var chat = $.connection.talkPeople;//注意:TalkHub首字母一定要小写  方法也是一样
            //第一个参数是提示文字，第二个参数是文本框中默认的内容
             username = prompt("请输入昵称!", "");
                if (username==""||username==null) {
                    alert("请输入昵称!");
                    return;
                }
                //启动服务器
                $.connection.hub.start().done(function ()
                {
                    chat.server.onLine(username);//调用服务端方法 OnLine()通知有人上线了;
                });
            //客户端通知方法 有人上线了
            chat.client.UserOnlie = function (id, name, jsonStr) {
                alert(name+'上线啦! ');
                var strData = eval(jsonStr);
                if (strData.length > 0)
                {
                    var strhtml = "";
                    for (var i = 0; i < strData.length; i++) {
                        strhtml += '<li class="nock" id=' + strData[i].Id + '>' + strData[i].name + '</li>';
                    }
                    $("#num").html("在线人数:"+strData.length);
                    $(".list_user_online ul").html(strhtml);//追加客户
                    $(".nock").click(function () {
                        if ($(this).hasClass("nock")) {
                            $(this).removeClass("nock");
                            $(this).addClass("isck");
                        } else {
                            $(this).removeClass("isck");
                            $(this).addClass("nock");
                        }
                    });
                }
            };
            //发送消息
            $("#btn_send").click(function ()
            {
                var msg = $("#msg_text").val();//获取消息内容
                var userid = "";//获取发消息给谁的userid(支持同时发送消息给几个人) 若为空则群发 
                $(".isck").each(function(){
                    userid += $(this).attr("id")+',';
                });//拼接选中的值
                if (userid!="") {
                    if (msg == "") {
                        layer.msg("内容不能为空!", { icon: 2, time: 3000 });
                    } else {
                        //私聊
                        chat.server.sendMsgToSomeBody(username, userid, msg);
                    }
                } else {
                    //群发
                    chat.server.sendMsgToAll(username, msg);
                }
            });



            //接收所有公共的消息
            chat.client.GetAllMsg = function (name, msg, time) {
                var msgstow = '<span class="content_time">' + time + '</span><br/>&emsp;&emsp;&emsp;&emsp;<span class="content_msg">' + msg + '</span></div>';
                var msgs = '<div class="msg_div">';
                var fina='';
                if (name == username) {
                    fina='<span  style="color:red;">' + name + ':</span>';
                } else {
                    fina='<span class="content_name">' + name + ':</span>';
                }
                fina=msgs+fina+msgstow;
                $(".list_user_content").append(fina);
            }

            //接收私聊信息
            chat.client.getSomeBodyMsg = function (name, msg, time) {
                $(".list_user_content").append('<div class="msg_div"><span class="content_name">' + name + '对我私聊:</span><span class="content_time">' + time + '</span><br/>&emsp;&emsp;&emsp;&emsp;<span class="content_msg_per">' + msg + '</span></div>');
            }
            //下线通知
            chat.client.UserDrop = function (id, username,count) {
                alert(username + '下线啦!');
                $("#num").html("在线人数:" + count);
                $("#" + id + "").remove();
            }
        });
    </script>
</body>
</html>

注释都在其中不懂的可以留言问我.

原文地址:

https://www.zddblog.top/Home/Detail?art_id=NDM=

源码下载:

https://download.csdn.net/download/bigbossc/10925892