asp.net SignalR 一对一聊天

时间:2022-05-06 00:14:25
asp.net SignalR 一对一聊天asp.net SignalR 一对一聊天
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>
<script type="text/javascript">
    var clients = [];
    var chat;
    $(function () {

        chat = $.connection.ViewDataHub;
        console.info(chat);
        //显示提示方法
        chat.client.showMessage = function (message) {
            alert(message);
        }
        //注册显示信息的方法
        chat.client.addMessage = function (message, connectionId) {
       
            if ($.inArray(connectionId, clients) == -1) {
                showWin(connectionId);
            }
            $("#" + connectionId).find("ul").each(function () {
                $(this).append('<li>' + message + '</li>');
            })
        }
        //注册显示所有用户的方法
        chat.client.getUsers = function (data) {

            if (data) {
                var json = $.parseJSON(data);

                console.info(json);
                $("#users").html(" ");
                for (var i = 0; i < json.length; i++) {
                    var html = '<li>用户名:' + json[i].Name + '<button connectionId="' + json[i].ConnectionID + '" onclick="userChat(this)">聊天</button>';
                    $("#users").append(html);
                }
            }
        }
        //注册显示推出聊天提示的方法
        chat.client.exitUser = function (data) {
            alert(data);
        }
        //注册显示个人信息的方法
        chat.client.showId = function (data) {
            $("#conId").html(data);
            clients.push(data);
        }
        //获取用户名称
        $('#userName').html(prompt('请输入您的名称', ''));

        //连接成功后获取自己的信息
        $.connection.hub.start().done(function () {
            chat.server.getName($('#userName').html());
        });
    });
    //开始聊天
    function userChat(obj) {
        var connectionId = $(obj).attr('connectionId');
        showWin(connectionId);
    }
    function showWin(connectionId) {
        //var connectionId = $(obj).attr('connectionId');
        clients.push(connectionId);
        var html = '<div style="float:left;margin-left:30px;border:double" id="' + connectionId + '" connectionId="' + connectionId + '">' + connectionId + '"的房间聊天记录如下:<button onclick="exitChat(this)">退出</button><ul></ul><input type="text" /> <button onclick="sendMessage(this)">发送</button></div>';
        $("#userBox").append(html);
    }
    function exitChat(btnObj) {

        //  var connectionId = $(btnObj).parent().attr("connectionId");
        $(btnObj).parent().remove();
        //chat.server.exitChat(connectionId);
    }
    //发送消息
    function sendMessage(data) {
        var message = $(data).prev().val();
        var userObj = $(data).parent();
        var username = $("#userName").html();
        message = username + ":" + message;
        console.info($(userObj).attr("connectionId"));
        var targetConnectionId = $(userObj).attr("connectionId");
        chat.server.sendMessage(targetConnectionId, message);
        $(data).prev().val("");
    }
</script>
<div>
    <div>名称:<p id="userName"></p></div>
    <div>ConnectionID:<p id="conId"></p></div>

    <div style="width:25%;border:1px solid #ff0000">
        <div>在线用户列表</div>
        <ul id="users"></ul>
    </div>
    <div id="userBox">
    </div>
</div>  
View Code

后台代码

asp.net SignalR 一对一聊天asp.net SignalR 一对一聊天
 [HubName("ViewDataHub")]
    public class ViewDataHub:Hub{
    
        public static List<User> users = new List<User>();  
  
        //发送消息  
        public void  SendMessage(string  connectionId ,string   message)  
        {  
            Clients.All.hello();  
            var user = users.Where(s => s.ConnectionID == connectionId).FirstOrDefault();  
            if (user != null)  
            {  
                Clients.Client(connectionId).addMessage(message + "" + DateTime.Now, Context.ConnectionId);  
                //给自己发送,把用户的ID传给自己  
                Clients.Client(Context.ConnectionId).addMessage(message + "" + DateTime.Now, connectionId);  
            }  
            else  
            {  
                Clients.Client(Context.ConnectionId).showMessage("该用户已离线");  
            }  
        }  
        [HubMethodName("exitChat")]  
        public void GetName(string name)  
        {  
            //查询用户  
            var user = users.SingleOrDefault(u => u.ConnectionID == Context.ConnectionId);  
            if (user != null)  
            {  
                user.Name = name;  
                Clients.Client(Context.ConnectionId).showId(Context.ConnectionId);  
            }  
            GetUsers();  
        }  
  
        /// <summary>  
        /// 重写连接事件  
        /// </summary>  
        /// <returns></returns>  
        public override Task OnConnected()  
        {  
            //查询用户  
            var user = users.Where(w => w.ConnectionID == Context.ConnectionId).SingleOrDefault();  
            //判断用户是否存在,否则添加集合  
            if (user == null)  
            {  
                user = new User("", Context.ConnectionId);  
                users.Add(user);  
            }  
            return base.OnConnected();  
        }  
        public override Task OnDisconnected(bool stopCalled)  
        {  
            var user = users.Where(p => p.ConnectionID == Context.ConnectionId).FirstOrDefault();  
            //判断用户是否存在,存在则删除  
            if (user != null)  
            {  
                //删除用户  
                users.Remove(user);  
            }  
            GetUsers();//获取所有用户的列表  
            return base.OnDisconnected(stopCalled);  
        }  
        //获取所有用户在线列表  
        private void GetUsers()  
        {  
            var list = users.Select(s => new { s.Name, s.ConnectionID }).ToList();  
            string jsonList = JsonConvert.SerializeObject(list);  
            Clients.All.getUsers(jsonList);  
        }  
    }  
    public class User  
    {  
        [Key]  
        public string ConnectionID { get; set; }  
        public string Name { get; set; }  
        public User(string name, string connectionId)  
        {  
            this.Name = name;  
            this.ConnectionID = connectionId;  
        }  
    }  
View Code

PS:

类似这种 chat.client.showMessage 这是后台调用前台

类似这种 chat.server.getName 则是前台调用后台