<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>
后台代码
[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; } }
PS:
类似这种 chat.client.showMessage 这是后台调用前台
类似这种 chat.server.getName 则是前台调用后台