@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Index</title> <script src="https://www.jb51.net/~/Scripts/jquery-2.2.2.min.js"></script> <script src="https://www.jb51.net/~/Scripts/jquery.signalR-2.2.0.min.js"></script> <script src="https://www.jb51.net/~/Scripts/layer/layer.min.js"></script> <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址--> <script src="https://www.jb51.net/signalr/hubs"></script> <script type="text/javascript"> var chat; var roomcount = 0; $(function() { chat = $.connection.chatRoomHub; chat.client.showMessage = function(message) { alert(message); }; chat.client.sendMessage = function(roomname, message) { $("#" + roomname).find("ul").each(function() { $(this).append('<li>' + message + '</li>'); }); }; chat.client.removeRoom = function(data) { alert(data); }; chat.client.joinRoom = function (roomname) { var html = '<div roomname="' + roomname + '"><button>退出</button>\ ' + roomname + '房间\ 聊天记录如下:<ul>\ </ul>\ <textarea></textarea> <button>发送</button>\ </div>'; $("#RoomList").append(html); }; //注册查询房间列表的方法 chat.client.getRoomlist = function(data) { if (data) { var jsondata = $.parseJSON(data); $("#roomlist").html(" "); for (var i = 0; i < jsondata.length; i++) { var html = ' <li>房间名:' + jsondata[i].RoomName + '<button roomname="' + jsondata[i].RoomName + '">加入</button></li>'; $("#roomlist").append(html); } } }; // 获取用户名称。 $('#username').html(prompt('请输入您的名称:', '')); $.connection.hub.start().done(function() { $('#CreatRoom').click(function() { chat.server.createRoom($("#Roomname").val()); }); }); }); function SendMessage(btn) { var message = $(btn).prev().val(); var room = $(btn).parent(); var username = $("#username").html(); message = username + ":" + message; var roomname = $(room).attr("roomname"); chat.server.sendMessage(roomname, message); $(btn).prev().val('').focus(); } function RemoveRoom(btn) { var room = $(btn).parent(); var roomname = $(room).attr("roomname"); chat.server.removeUserFromRoom(roomname); } function AddRoom(roomname) { var data =$(roomname).attr("roomname"); chat.server.joinRoom(data); } </script> </head> <body> <div> <div>名称:<p></p></div> 输入房间名: <input type="text" value="聊天室1" /> <button>创建聊天室</button> </div> <div> <div>房间列表</div> <ul></ul> </div> <div> </div> </body> </html>
4. 经过上面3步，聊天室的功能就已经完成了，在看具体效果之前，这里附加一个帮助类的代码：