zoukankan      html  css  js  c++  java
  • C# SignalR的简单实现

     简单的实现了广播和私聊;下面是效果图:

     实现过程:

    首先通过NeGet 在项目中安装Signalr

    然后在文件App_Start 下面添加一个启动类=>Startup;并且在Web.config 里面添加配置

    using Microsoft.Owin;
    using Owin;
    
    [assembly: OwinStartup(typeof(WebApplication.Startup))]
    
    namespace WebApplication
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
     <appSettings>
        <!--<add key="owin:AppStartup" value="WebApplication.Startup" />-->
        <add key="owin:AutomaticAppStartup" value="true" />
      </appSettings>
    到这里准备工作就完成了; 这里的 Startup.cs 和 Web.config里面的配置 有点麻烦 第一次实现没有经验 导致后面代码总是没有生成前台页面的引用【~/signalr/hubs】,导致运行以后报404错误;
    他们的关系是这样的

     具体地址:http://www.voidcn.com/article/p-rzbdznjc-byu.html

    实现代码:

    后台代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    using Microsoft.AspNet.SignalR.Hubs;
    
    namespace WebApplication
    {
        [HubName("ChatRoomHub")]
        public class SignalR : Hub
        {
    
            static List<UserEntity> users = new List<UserEntity>();
    
            /// <summary>
            /// 添加用户
            /// </summary>
            /// <param name="nickName"></param>
            public void UserEnter(string nickName)
            {
                UserEntity userEntity = new UserEntity
                {
                    NickName = nickName,
                    ConnectionId = Context.ConnectionId
                };
    
                users.Add(userEntity);
                Clients.All.NotifyUserEnter(nickName, users);//调用前台NotifyUserEnter方法
            }
            List<string> userIdList = new List<string>();
            /// <summary>
            /// 发送消息
            /// </summary>
            /// <param name="nickName"></param>
            /// <param name="message"></param>
            /// <param name="selectUserId"></param>
            public void SendMessage(string nickName, string message, string selectUserId)
            {
                if (!string.IsNullOrEmpty(selectUserId))
                {
                    userIdList = selectUserId.Split(',').ToList();
                    foreach (string str in userIdList)
                    {
                        if (users.Any(c => c.ConnectionId == str))
                        {
                            //只发送用户选中的group
                            //Clients.Group(str, new string[0]).NotifySendMessage(nickName, message);
                            Clients.Client(str).NotifySendMessage(nickName, message);
                        }
                    }
                }
                else
                {
                    Clients.All.NotifySendMessage(nickName, message);//调用前台NotifySendMessage方法
                }
            }
    
        }
    
        public class UserEntity
        {
            public string NickName { get; set; }
    
            public string ConnectionId { get; set; }
        }
    }

    前台代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %>
    
    <!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.1.min.js"></script>
        <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
    </head>
    <body>
        <label>在线人数:</label><span id="rs">0</span><br />
        <input type="text" id="name" />
        <input type="button" id="dl" value="登录" /><br />
        <select id="mb">
            <option value="">请选择</option>
        </select>
        <input type="text" id="val" />
        <input type="button" id="fs" value="发送" />
        <br />
        <div id="lt">
        </div>
        <script>
            var chat;
            $(function () {
    chat
    = $.connection.ChatRoomHub; //添加用户 chat.client.NotifyUserEnter = function (nickName, users) { buildUserTemplate(nickName, users); } //用户离开 chat.client.NotifyUserLeft = function (nickName, users) { buildUserTemplate(nickName, users); } chat.client.NotifySendMessage = function (nickName, message) { NotifySendMessage(nickName, message) } //用户列表 function buildUserTemplate(nickName, users) { $("#rs").text(users.length); $("#mb").empty(); var txt = '<option value="">请选择</option>'; $.each(users, function (e, v) { txt += '<option value="' + v.ConnectionId + '">' + v.NickName + '</option>'; }); $("#mb").append(txt); } function NotifySendMessage(nickName, message) { var txt = '<label>' + nickName + ':</label><span id="rs">' + message + '</span><br />'; $("#lt").append(txt); } }) var NameUser; $("#dl").click(function () { var name = $("#name").val(); NameUser = name; $.connection.hub.start().done(function () { chat.server.userEnter(name); }); }) $("#fs").click(function () { var nameId = $("#mb").val(); var txt = $("#val").val(); chat.server.sendMessage(NameUser, txt, nameId); }) </script> </body> </html>
    页面就是引用:<%: ResolveClientUrl("~/signalr/hubs") %> 就是前面说的报404 错误的地方 引用有风险 配置需谨慎!!!

    1. js定义后台调用方法 chat.client.方法名=function(){} 这样定义的方法在后台里面可以用 Clients.属性.方法名()的方式调用 这里的属性有

     All 就是广播;Client就是单个推送;其他的没有尝试。

    2.js调用后台定义的方法:$.connection.ChatRoomHub.server.方法名(),【ChatRoomHub】 便是后台代码里面的“HubName”; 上面将 $.connection.ChatRoomHub 赋值给了chat, 另外js调用后台方法名时首字母小写  列:chat.server.userEnter(name)   不然会找不到方法

    3.   $.connection.hub.start().done(function () {  chat.server.userEnter(name); }); 这个方法应该是连接的意思吧;有时间了试一下 ;

    暂时就写到这里;

    参考文档: https://www.cnblogs.com/cang12138/p/7404124.html

    这里写的比我好可以去看看;

  • 相关阅读:
    使用电脑中发现的一些技巧
    容灾备份技术 (容灾备份的等级和技术 )
    网际风客户端版本更新历史 武胜
    判断用户是否在操作 武胜
    最大子段和 武胜
    金质打印通 示例 zt 武胜
    WCF中的集合类型 zt 武胜
    C# 批量插入Mysql zt 武胜
    程序算法与人生选择 zt 武胜
    网际风的通视接口 武胜
  • 原文地址:https://www.cnblogs.com/pyf97/p/14229769.html
Copyright © 2011-2022 走看看