SignalR2.0开发实例之——私聊

一、前言

继续上一章的补充，这章介绍使用私聊的功能。主要通过一个方法   Clients.Client(Context.ConnectionId).showMessage(msg); SignalR框架就会给你找对对应的集线器客户端并调用客户端注册好的showMessage方法,下面具体实例和注意地方

二、干活实战开始

创建一个User类，记录用户名字和集线器代理ID

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

namespace SignalRTest
{
    public class User
    {
        public string Name { get; set; }

        public string ConnectionId { get; set; }
    }
}

TestHub代码

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

namespace SignalRTest
{
    //Hub的别名,方便前台调用
    [HubName("testHHH")]
    public class TestHub : Hub
    {
        /// <summary>
        /// 用户列表,静态
        /// </summary>
        public static List<User> list = new List<User>();

        /// <summary>
        /// 模拟标示用户身份,静态
        /// </summary>
        ;

        /// <summary>
        /// 重写连接方法,如果用户不存在，则新建用户
        /// </summary>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnConnected()
        {
            var user = list.Where(u => u.ConnectionId == Context.ConnectionId).FirstOrDefault();
            if (user == null)
            {
                //注册用户
                list.Add(new User() { Name = "员工" + i, ConnectionId = Context.ConnectionId });
                ++i;
                UpdatePageUserList();
            }
            GetCurrentClientName();

            return base.OnConnected();
        }

        /// <summary>
        /// 重写断开方法,用户存在则删除用户
        /// </summary>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnDisconnected()
        {
            var user = list.Where(u => u.ConnectionId == Context.ConnectionId).FirstOrDefault();
            if (user != null)
            {
                list.Remove(user);
                UpdatePageUserList();
            }

            return base.OnDisconnected();
        }

        /// <summary>
        /// 更新页面用户列表,新增用户或者删除用户都需要更新一下
        /// </summary>
        public void UpdatePageUserList()
        {
            var json = JsonConvert.SerializeObject(list);
            Clients.All.refreshUserList(json);
        }

        /// <summary>
        /// 私聊对象方法
        /// </summary>
        /// <param name="ConnectionId"></param>
        public void StartChat(string ConnectionId, string content)
        {
            var user = list.Where(u => u.ConnectionId == ConnectionId).FirstOrDefault();

            //判断用户是否存在,存在则发送
            if (user != null)
            {
                //给指定用户发送,把自己的ID传过去用户找到当前哪个私聊对话框，因为可以打开很多个对话框
                Clients.Client(ConnectionId).sendMessage(content + " " + DateTime.Now, Context.ConnectionId);
                //给自己发送,把用户的ID传给自己找到当前哪个私聊对话框，因为可以打开很多个对话框
                Clients.Client(Context.ConnectionId).sendMessage(content + " " + DateTime.Now, ConnectionId);
            }
            else
            {
                Clients.Client(Context.ConnectionId).showMessage("该用户已离线");
            }
        }

        /// <summary>
        /// 得到当前客户端的名字
        /// </summary>
        public void GetCurrentClientName()
        {
            var user = list.Where(u => u.ConnectionId == Context.ConnectionId).FirstOrDefault();

            Clients.Client(Context.ConnectionId).showCurrentClient(user.Name);

        }

    }
}

客户端代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.js"></script>
    <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
    <script src="signalr/hubs"></script>
</head>
<body>
    <div><span>当前用户端名字:</span><span id="kkk"></span></div>
    <div style="width:200px;float:left;border:1px solid black;">
        <ul id="userList"></ul>
    </div>

    <script type="text/javascript">

        $(function () {
            //1.声明一个代理引用集线器，如果集线器没有取别名，则要小写$.connection.testHub;如果有别名则直接写别名就好了
            var chatClient = $.connection.testHHH;
            //注册显示信息方法
            chatClient.client.showMessage = function (msg) {
                alert(msg);
            }
            //注册获取当前客户端名字
            chatClient.client.showCurrentClient = function (name) {
                $("#kkk").html(name);
            }
            //注册刷新用户列表方法
            chatClient.client.refreshUserList = function (data) {
                var json = $.parseJSON(data);
                $("#userList").html("");
                for (var i = 0; i < json.length; i++) {
                    //动态加载内容到ul中
                    $("#userList").append($("<li>" + json[i].Name + " <input type='button' name='" + json[i].Name + "'  class='" + json[i].ConnectionId + "' onclick='privateChat(this)' value='与他私聊' /></li>"));
                }

            }

            //注册发送消息
            chatClient.client.sendMessage = function (msg, id) {

                $("#" + id + " ul").append($("<li>" + msg + "</li>"));
            }

            //3. 必须启动连接
            $.connection.hub.start().done(function () {

            });

        });

        function privateChat(btn) {
            var ConnectionId = $(btn).attr("class");
            var Name = $(btn).attr("name");

            if ($("#" + ConnectionId).length > 0) {
                alert("已打开对话窗口");
            }
            else {
                var str = "<div style='width:400px;float:left;border:1px solid black;' id='" + ConnectionId + "'><div>" +
            "私聊对象：<input type='text' name='name' value='" + Name + "' />" +
            "<div>" +
             "   <ul id='ul'>" +
             "       <li>开始群聊咯。。。。。。。。。。。。。</li>" +
              "  </ul>" +
              "  <input type='text' name='content'  /><input type='button' name='btn'  value='发送' onclick='sendMsg(this)' />" +
           " </div>" +
       " </div>" +
   " </div>";
                $("body").append($(str));

            }
        }

        function sendMsg(btn) {
            var connectionId = $(btn).parent().parent().parent().attr("id");//获取需要发送信息的员工连接ID
            var content = $(btn).siblings("input").val();//发送内容

            var chatClient = $.connection.testHHH; //因为集线程变量作用范围原因，和上面的在$(function(){})中写的chatClient不在一个范围内了，所以在这里重新获取一次才能够调用后台的方法
            chatClient.server.startChat(connectionId, content);
        }

    </script>
</body>
</html>

显示结果：

三、注意事项

代码连接：http://pan.baidu.com/s/1o7oNSue