<script type="text/javascript"> var systemHub = $.connection.chatHub; / 连接IM服务器成功 // 主要是更新在线用户 systemHub.client.onConnected = function (id, userName, allUsers) { var node = chatCore.node, myf = node.list.eq(0), str = '', i = 0; myf.addClass('loading'); onlinenum = allUsers.length; if (onlinenum > 0) { str += '<li>' + '<h5><i></i><span>在线用户</span><em>（' + onlinenum + '）</em></h5>' + '<ul>'; for (; i < onlinenum; i++) { str += '<li data-id="' + allUsers[i].ConnectionId + '" type="one"><img src="/Content/Images/001.jpg?' + allUsers[i].UserID + '"><span>' + allUsers[i].UserName + '(' + ')</span><em>' + allUsers[i].LoginTime + '</em></li>'; } str += '</ul></li>'; myf.html(str); } else { myf.html('<li>没有任何数据</li>'); } myf.removeClass('loading'); }; //消息传输 chatCore.transmit = function () { var node = chatCore.node, log = {}; node.sendbtn = $('#ChatCore_sendbtn'); node.imwrite = $('#ChatCore_write'); //发送 log.send = function () { var data = { content: node.imwrite.val(), id: chatCore.nowchat.id, sign_key: '', //密匙 _: +new Date }; if (data.content.replace(/\s/g, '') === '') { layer.tips('说点啥呗！', '#ChatCore_write', 2); node.imwrite.focus(); } else { //此处皆为模拟 var keys = chatCore.nowchat.type + chatCore.nowchat.id; //聊天模版 log.html = function (param, type) { return '<li>' + '<div>' + function () { if (type === 'me') { return '<span>' + param.time + '</span>' + '<span>' + param.name + '</span>' + '<img src="' + param.face + '" >'; } else { return '<img src="' + param.face + '" >' + '<span>' + param.name + '</span>' + '<span>' + param.time + '</span>'; } }() + '</div>' + '<div>' + param.content + '<em></em></div>' + '</li>'; }; log.imarea = chatCore.chatbox.find('#ChatCore_area' + keys); log.imarea.append(log.html({ time: new Date().toLocaleString(), name: config.user.name, face: config.user.face, content: data.content }, 'me')); node.imwrite.val('').focus(); log.imarea.scrollTop(log.imarea[0].scrollHeight); // 调用服务端sendPrivateMessage方法来转发消息 systemHub.server.sendPrivateMessage(chatCore.nowchat.id, data.content); } }; node.sendbtn.on('click', log.send); node.imwrite.keyup(function (e) { if (e.keyCode === 13) { log.send(); } }); }; //用户离线 systemHub.client.onUserDisconnected = function (id, userName) { onlinenum = onlinenum - 1; $(".ChatCore_nums").html("（" + onlinenum + "）"); $("#ChatCore_friend_list li[data-id=" + id + "]").remove(); }; // 启动连接 $.connection.hub.start().done(function () { systemHub.server.connect(userid, username); // 调用服务端connect方法 }); </script>
上面只是列出了一些核心代码实现。另外，为了实现的酷炫的效果，这里采用了一个Jquery插件：layer,官方网址为：。这个插件主要为了实现弹出框和弹出层的效果，要实现酷炫的聊天特效，就需要自己写JS代码了，由于本人并不是很熟悉前端，所以这个JS特效代码也是参考网络上的实现。大家如果想运行查看效果，建议到文章末尾下载源码进行运行。
四、最终效果
介绍完了实现思路和实现代码之后，既然就到了我们激动人心的一刻了，那就是看看我们实现功能是否可以满足需求，另外，除了满足基本的聊天功能外，还需要看看界面是不是够酷炫。
五、总结
看完上面的效果，是不是很炫呢。到此，本文的内容就结束了，在接下来的一篇文章中我会继续介绍如何使用Asp.net SignalR来实现聊天室的功能。
您可能感兴趣的文章: