SignalR 服务器推送+简易聊天室

最新推荐文章于 2019-07-16 06:23:49 发布

weixin_30318645

最新推荐文章于 2019-07-16 06:23:49 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/OleRookie/p/10675150.html

版权

简易聊天室转：忘了...

以下为自动创建代理hub方式

什么时候使用 generated proxy
如果你要给客户端的方法注册多个事件处理器，那么你就不能使用 generated proxy。如果你不使用 generated proxy ，那么你就不能引用 "signalr/hubs" URL。

 

客户端设置
首先需要引用jQuery，SignalR，signalr/hubs
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>
 

如何引用动态的 generated proxy
ASP.NET MVC 4 or 5 Razor 

<script src="~/signalr/hubs"></script>
ASP.NET MVC 3 Razor 

<script src="@Url.Content("~/signalr/hubs")"></script>
ASP.NET Web Forms 

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
/signalr/hubs 是 SignalR 自动生成的，当你启动调试的时候会在Script Documents 看到它

=====================================以下为例子===============================================

1、右键=》添加项目=》OWIN Startup class=》Startup.cs

添加Startup类

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(Demo_SignalR_2._4._0.Models.Startup))]

namespace Demo_SignalR_2._4._0.Models
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

2、右键=》新建项目=》SignalR Hub Class (v2)=》ChatHub.cs

添加ChatHub类

using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace Demo_SignalR_2._4._0.Models
{
    [HubName("chat")]
    public class ChatHub : Hub
    {
        public static ConcurrentDictionary<string, string> OnLineUsers = new ConcurrentDictionary<string, string>();

        [HubMethodName("send")]
        public void Send(string message)
        {
            string clientName = OnLineUsers[Context.ConnectionId];
            message = HttpUtility.HtmlEncode(message).Replace("\r\n", "<br/>").Replace("\n", "<br/>");
            Clients.All.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), clientName, message);
        }

        [HubMethodName("sendOne")]
        public void Send(string toUserId, string message)
        {
            string clientName = OnLineUsers[Context.ConnectionId];
            message = HttpUtility.HtmlEncode(message).Replace("\r\n", "<br/>").Replace("\n", "<br/>");
            Clients.Caller.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("您对 {1}", clientName, OnLineUsers[toUserId]), message);
            Clients.Client(toUserId).receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 对您", clientName), message);
        }
        /// <summary>
        /// 服务器接口推送
        /// </summary>
        /// <param name="message"></param>
        public static void ServerPush(string message)
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
            context.Clients.All.ServerPush(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), message);
        }

        public override System.Threading.Tasks.Task OnConnected()
        {
            string clientName = Context.QueryString["clientName"].ToString();
            OnLineUsers.AddOrUpdate(Context.ConnectionId, clientName, (key, value) => clientName);
            Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 加入了。", clientName), OnLineUsers.ToArray());
            return base.OnConnected();
        }

        public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
        {
            string clientName = Context.QueryString["clientName"].ToString();
            Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 离开了。", clientName), OnLineUsers.ToArray());
            OnLineUsers.TryRemove(Context.ConnectionId, out clientName);
            return base.OnDisconnected(stopCalled);
        }

    }
}

例子：聊天室

创建Index.aspx页

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.4.0.min.js"></script>
　　//这个很重要
    <script src="signalr/hubs" type="text/javascript"></script>
    <style type="text/css">
        #chatbox {
            width: 100%;
            height: 500px;
            border: 2px solid blue;
            padding: 5px;
            margin: 5px 0px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .linfo {
        }

        .rinfo {
            text-align: right;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            var clientName = $("#clientname").val();
            var eChatBox = $("#chatbox");
            var eUsers = $("#users");

            var chat = $.connection.chat;
            $.connection.hub.qs = { "clientName": clientName };
            chat.state.test = "test";
            //聊天
            chat.client.receiveMessage = function (dt, cn, msg) {
                console.log(dt);
                console.log(cn);
                console.log(msg);
                var clsName = "linfo";
                if (cn == clientName || cn.indexOf("您对") >= 0) clsName = "rinfo";
                eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>");
                eChatBox.scrollTop(eChatBox[0].scrollHeight);
            }
            //更新下拉
            chat.client.userChange = function (dt, msg, users) {
                eChatBox.append("<p>" + dt + " " + msg + "</p>");
                eUsers.find("option[value!='']").remove();
                for (var i = 0; i < users.length; i++) {
                    if (users[i].Value == clientName) continue;
                    eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>")
                }
            }
            //服务器推送
            chat.client.ServerPush = function (dt, msg) {
                eChatBox.append("<p>" + dt + " " + msg + "</p>");
                eChatBox.scrollTop(eChatBox[0].scrollHeight);
            }

            $.connection.hub.start().done(function () {

                $("#btnSend").click(function () {
                    var toUserId = eUsers.val();
                    if (toUserId != "") {
                        chat.server.sendOne(toUserId, $("#message").val())
                            .done(function () {
                                //alert("发送成功！");
                                $("#message").val("").focus();
                            })
                            .fail(function (e) {
                                alert(e);
                                $("#message").focus();
                            });
                    }
                    else {
                        chat.server.send($("#message").val())
                            .done(function () {
                                //alert("发送成功！");
                                $("#message").val("").focus();
                            })
                            .fail(function (e) {
                                alert(e);
                                $("#message").focus();
                            });
                    }
                });

            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>大众聊天室</h3>
        <div id="chatbox">
        </div>
        <div>
            <span>聊天名称：</span>
            <asp:TextBox ID="clientname" runat="server" ReadOnly="true" style="width:300px;" ></asp:TextBox>
            <span>聊天对象：</span>
            <select id="users" name="names">
                <% foreach (var item in OnLineUsers)
                    {%>
                <option value="<%= item.Value %>"><%= item.Text %></option>
                <%} %>
            </select>
        </div>
        <div>
            <textarea id="message" name="message" rows="5" style="width: 50%;"></textarea>
            <input type="button" value="发送消息" id="btnSend" />
        </div>
    </form>
</body>
</html>

Index.cs

using Demo_SignalR_2._4._0.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Demo_SignalR_2._4._0
{
    public partial class Index : System.Web.UI.Page
    {
        public List<SelectListItem> OnLineUsers = new List<SelectListItem>();
        protected void Page_Load(object sender, EventArgs e)
        {            
            if (!IsPostBack)
            {   
                clientname.Text = "聊客-" + Guid.NewGuid();
                this.Title = clientname.Text;
            }
            var onLineUserList = ChatHub.OnLineUsers.Select(u => new SelectListItem() { Text = u.Value, Value = u.Key }).ToList();
            onLineUserList.Insert(0, new SelectListItem() { Text = "-所有人-", Value = "" });
            OnLineUsers = onLineUserList;
        }
    }

    public class SelectListItem
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }
}

服务器推送：页面 ToServer.cs

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

namespace Demo_SignalR_2._4._0
{
    public partial class ToServer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string msg = Request["msg"];
            if (!string.IsNullOrWhiteSpace(msg))
            {
                Models.ChatHub.ServerPush("服务器端推送接口:" + msg);
            }
        }
    }
}

Index.aspx 为简易聊天室 ToServer.aspx 为服务器端接口

转载于:https://www.cnblogs.com/OleRookie/p/10675150.html

weixin_30318645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SignalR 服务器推送+简易聊天室

简易聊天室转：忘了...以下为自动创建代理hub方式什么时候使用 generated proxy如果你要给客户端的方法注册多个事件处理器，那么你就不能使用 generated proxy。如果你不使用 generated proxy ，那么你就不能引用 "signalr/hubs" URL。客户端设置首先需要引用jQuery，SignalR，signalr/...
复制链接

扫一扫