learun-im.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. $.IMSignalR = function (options) {
  2. var defaults = {
  3. url: "http://localhost:8081/signalr",//服务地址
  4. userId: "",//用户登录Id
  5. updateUserList: function (userAllList, onLineUserList) { },//刷新用户列表
  6. updateLastUser: function (userLasrList) { },//刷新最新联系人
  7. updateUserStatus: function (userId, isOnLine) { },//刷用户在线状态0离线。1在线
  8. revMessage: function (formUser, message, dateTime) { },//接收消息
  9. revGroupMessage: function (userId, toGroup, message, dateTime) { },//接收群组消息
  10. afterLinkSuccess: function () { },//连接服务成功后
  11. disconnected: function () { }//断开连接后
  12. };
  13. var imMethod = {
  14. //组的操作
  15. IMCreateGroup: function (groupName, userIdList) { },//创建一个组
  16. IMUpdateGroupName: function (groupId, groupName) { },//更改组的名字
  17. IMAddGroupUserId: function (groupId, userId) { },//增加一个用户到组里
  18. IMRemoveGroupUserId: function (userGroupId) { },//从一个组里面移除
  19. //消息的操作
  20. IMSendToOne: function (toUser, message) { },//发送消息
  21. IMSendGroup: function (toUser, message) { },//发送消息群组
  22. IMUpdateMessageStatus: function (sendId) { },//更新消息状态
  23. IMGetMsgList: function (page, rownum, sendId, callback) { },//获取消息列表
  24. IMGetUnReadMsgNumList: function () { },//获取未读消息的条数
  25. //联系人操作
  26. IMUpdateLastUserByClient: function () { },//主动发起更新最近联系人列表
  27. //获取所有用户列表
  28. userAllList: {},
  29. };
  30. var options = $.extend(defaults, options);
  31. //Set the hubs URL for the connection
  32. $.connection.hub.url = options.url;
  33. $.connection.hub.qs = { "userId": options.userId };
  34. // Declare a proxy to reference the hub.
  35. var chat = $.connection.ChatsHub;
  36. //更新联系人列表
  37. chat.client.IMUpdateUserList = function (userAllList, onLineUserList) {
  38. var userDepartmentList = {};
  39. imMethod.userAllList = userAllList;
  40. $.each(userAllList, function (Id, item) {
  41. if (Id != options.userId) {
  42. if (userDepartmentList[item.DepartmentId] == undefined) {
  43. userDepartmentList[item.DepartmentId] = {};
  44. userDepartmentList[item.DepartmentId].DepartmentName = item.DepartmentId;
  45. if (item.UserOnLine == 1) {
  46. userDepartmentList[item.DepartmentId].onLineNum = 1;
  47. }
  48. else {
  49. userDepartmentList[item.DepartmentId].onLineNum = 0;
  50. }
  51. userDepartmentList[item.DepartmentId].UserList = [];
  52. userDepartmentList[item.DepartmentId].UserList.push(item);
  53. }
  54. else {
  55. if (item.UserOnLine == 1) {
  56. userDepartmentList[item.DepartmentId].onLineNum++;
  57. }
  58. userDepartmentList[item.DepartmentId].UserList.push(item);
  59. }
  60. }
  61. });
  62. options.updateUserList(userDepartmentList, onLineUserList);
  63. }
  64. //刷新最近的联系人
  65. chat.client.IMUpdateLastUser = function (lastUserList) {
  66. options.updateLastUser(lastUserList);
  67. }
  68. //刷新用户在线状态
  69. chat.client.IMUpdateUserStatus = function (userId, isOnLine) {
  70. imMethod.userAllList[userId].UserOnLine = isOnLine;
  71. options.updateUserStatus(userId, isOnLine);
  72. }
  73. //接收消息
  74. chat.client.RevMessage = function (formUser, message, dateTime) {
  75. options.revMessage(formUser, message, dateTime);
  76. }
  77. //接收群消息
  78. chat.client.RevGroupMessage = function (userId, toGroup, message, dateTime) {
  79. options.revGroupMessage(userId, toGroup, message, dateTime);
  80. }
  81. // 连接成功后注册服务器方法
  82. $.connection.hub.start().done(function () {
  83. imMethod.IMCreateGroup = function (groupName, userIdList) {
  84. return chat.server.createGroup(groupName, userIdList);
  85. };
  86. imMethod.IMUpdateGroupName = function (groupId, groupName) {
  87. return chat.server.updateGroupName(groupId, groupName);
  88. };
  89. imMethod.IMAddGroupUserId = function (groupId, userId) {
  90. return chat.server.addGroupUserId(groupId, userId);
  91. };
  92. imMethod.IMRemoveGroupUserId = function (userGroupId) {
  93. return chat.server.removeGroupUserId(userGroupId);
  94. };
  95. imMethod.IMSendToOne = function (toUser, message) {
  96. chat.server.imSendToOne(toUser, message);
  97. };
  98. imMethod.IMSendGroup = function (toUser, message) {
  99. chat.server.imSendToGroup(toUser, message);
  100. };
  101. imMethod.IMUpdateMessageStatus = function (sendId) {
  102. return chat.server.updateMessageStatus(sendId);
  103. };
  104. //获取与某用户的消息列表
  105. imMethod.IMGetMsgList = function (page, rownum, sendId, callback) {
  106. var pagination = { rows: rownum, page: page, sidx: 'CreateDate', sord: 'desc' }
  107. chat.server.getMsgList(pagination, sendId).done(function (resdata) {
  108. var data = [];
  109. for (i = resdata.length, i >= 0; i--;) {
  110. resdata[i].CreateDate = formatDate(resdata[i].CreateDate, 'yyyy-MM-dd hh:mm');
  111. data.push(resdata[i]);
  112. }
  113. callback(data);
  114. });
  115. };
  116. //获取未读消息的条数
  117. imMethod.IMGetUnReadMsgNumList = function (callback) {
  118. chat.server.getMsgNumList("0").done(function (resdata) {
  119. callback(resdata);
  120. });
  121. };
  122. imMethod.IMUpdateLastUserByClient = function () {
  123. chat.server.imSendLastUser();
  124. }
  125. options.afterLinkSuccess();
  126. });
  127. //断开连接后
  128. $.connection.hub.disconnected(function () {
  129. options.disconnected();
  130. });
  131. //返回可供客户端调用的方法
  132. return imMethod;
  133. }
  134. //即使通信
  135. IMInit = function (options) {
  136. var $message_wrap = $(".message-wrap");
  137. var $message_window = $(".message-window");
  138. var imMethod;
  139. var defaults = {
  140. userId: "77653de4-d8e7-4903-9f2a-ee47ba3111da",//当前登录Id
  141. userName: "", //当前用户名,
  142. toUserId: "", //发送人Id
  143. toUserName: "", //发送人
  144. windowId: "", //当前窗口Id
  145. revMessage: GetMessage,
  146. afterLinkSuccess: function () { //连接成功后
  147. //显示消息未读条数
  148. imMethod.IMGetUnReadMsgNumList(function (num) {
  149. $message_wrap.find('.message-count').html(num);
  150. if (parseInt(num) > 0)
  151. {
  152. IMIconflash(1);
  153. }
  154. });
  155. },
  156. disconnected: function () {
  157. IMRemove();
  158. },
  159. //初始化联系人列表
  160. updateUserList: function (userAllList, onLineUserList) {
  161. var $ul = $(".message-group #message-contact-list");
  162. var html = "";
  163. for (var i in userAllList)
  164. {
  165. var item = userAllList[i];
  166. console.log(item);
  167. html += '<li><a><i class="fa fa-caret-right"></i><span>' + item.DepartmentName + '</span><em> ' + item.onLineNum + '/' + item.UserList.length + ' </em></a>'
  168. var userJson = userAllList[i].UserList.sort(function (a, b) { return a.UserOnLine < b.UserOnLine ? 1 : -1 });
  169. if (userJson.length > 0) {
  170. html += '<ul class="message-chatlist">';
  171. $.each(userJson, function (j) {
  172. var src = "/Content/images/off-line.png";
  173. if (userJson[j].UserOnLine == 1) {
  174. src = "/Content/images/on-line.png";
  175. }
  176. html += '<li>';
  177. html += '<div class="message-oneface"><img src="' + top.contentPath + src + '" /></div>';
  178. html += '<div data-value="' + userJson[j].UserId + '" class="message-onename">' + userJson[j].RealName + ' <span>[' + userAllList[i].DepartmentName + ']</span></div>';
  179. html += '</li>';
  180. });
  181. html += '</ul>';
  182. }
  183. html += '</li>';
  184. }
  185. $ul.html(html);
  186. //点击部门名称展开
  187. $message_wrap.find('.message-group a').click(function () {
  188. if (!$(this).hasClass("active")) {
  189. $(this).addClass("active")
  190. $(this).next('.message-chatlist').slideDown(200);
  191. $(this).find('i').removeClass('fa-caret-right').addClass('fa-caret-down');
  192. } else {
  193. $(this).removeClass("active")
  194. $(this).next('.message-chatlist').slideUp(200);
  195. $(this).find('i').removeClass('fa-caret-down').addClass('fa-caret-right');
  196. }
  197. });
  198. //打开聊天窗口
  199. OpenChatWindow();
  200. //关闭聊天窗口
  201. CloseChatWindow();
  202. },
  203. //更新最近联系人列表
  204. updateLastUser: UpDateLastUser,
  205. //刷新用户在线状态
  206. updateUserStatus: function (userId, isOnline) {
  207. var node = $message_wrap.find('.message-chatlist li').find('[data-value=' + userId + ']')[0];
  208. var emnode = $(node.parentNode.parentNode.parentNode).find('em');
  209. var usernumlist = emnode.html().split('/');
  210. var OnlineNum = parseInt(usernumlist[0].replace(/ /g, ''));//刷新列表人数
  211. var src = "off-line.png"
  212. if (isOnline == 1) {
  213. var linode = $(node.parentNode).clone();
  214. var ulnode = $(node.parentNode.parentNode);
  215. ulnode.prepend(linode);
  216. $(node.parentNode).remove();
  217. src = "on-line.png";
  218. OnlineNum++;
  219. }
  220. else {
  221. OnlineNum--;
  222. }
  223. $message_wrap.find('.message-chatlist li').find('[data-value=' + userId + ']').prev('.message-oneface').find('img').attr('src', top.contentPath + '/Content/images/' + src + '');
  224. emnode.html(" " + OnlineNum + '/' + usernumlist[1]);
  225. }
  226. };
  227. var options = $.extend(defaults, options);
  228. try
  229. {
  230. imMethod = $.IMSignalR(options);
  231. }
  232. catch(e)
  233. {
  234. IMRemove();
  235. return false;
  236. }
  237. //打开即时聊天
  238. $("#btn_message").click(function () {
  239. $(this).hide()
  240. $message_wrap.show();
  241. })
  242. //关闭即时聊天
  243. $message_wrap.find('.message-close').click(function () {
  244. IMIconflash(0);
  245. $message_wrap.hide();
  246. $message_window.hide();
  247. $("#btn_message").show();
  248. })
  249. //导航切换(联系人、讨论组、最近回话)
  250. $message_wrap.find('.message-nav li').click(function () {
  251. var tab_Id = $(this).attr('id');
  252. switch (tab_Id) {
  253. case "nav-contact-tab":
  254. $message_wrap.find("#message-contact-list").show();
  255. $message_wrap.find("#message-group-list").hide();
  256. $message_wrap.find("#message-last-list").hide();
  257. $(this).find('span').hide();
  258. break;
  259. case "nav-group-tab":
  260. $message_wrap.find("#message-group-list").show();
  261. $message_wrap.find("#message-contact-list").hide();
  262. $message_wrap.find("#message-last-list").hide();
  263. break;
  264. case "nav-last-tab":
  265. $message_wrap.find("#message-last-list").show();
  266. $message_wrap.find("#message-contact-list").hide();
  267. $message_wrap.find("#message-group-list").hide();
  268. $(this).find('span').show();
  269. break;
  270. default:
  271. break;
  272. }
  273. $(this).parents('ul').find('li').removeClass("active");
  274. $(this).addClass("active");
  275. });
  276. //搜索(同事、讨论组、最近回话)
  277. $message_wrap.find('.message-body-search').find('.search-text').keyup(function () {
  278. var $chatlist = $("#message-contact-list").find('.message-chatlist');
  279. var value = $(this).val();
  280. if (value != "") {
  281. $chatlist.show();
  282. $chatlist.prev('a').hide();
  283. window.setTimeout(function () {
  284. $chatlist.find('li')
  285. .hide()
  286. .filter(":contains('" + (value) + "')")
  287. .show();
  288. }, 200);
  289. $chatlist.find('li').hover(function () {
  290. $(this).find('span').show();
  291. }, function () {
  292. $(this).find('span').hide();
  293. })
  294. } else {
  295. $chatlist.hide();
  296. $chatlist.find('li').show();
  297. $chatlist.prev('a').show();
  298. if ($chatlist.prev('a').hasClass('active')) {
  299. $chatlist.prev('a.active').next('ul').show();
  300. }
  301. $chatlist.find('li').find('span').hide();
  302. }
  303. }).keyup();
  304. //刷新最近联系人列表
  305. function UpDateLastUser(userLasrList) {
  306. var $ul = $(".message-group #message-last-list");
  307. var html = "";
  308. //显示消息未读条数
  309. imMethod.IMGetUnReadMsgNumList(function (num) {
  310. $message_wrap.find('.message-count').html(num);
  311. });
  312. $ul.html(html);
  313. $.each(userLasrList, function (i, item) {
  314. var model = imMethod.userAllList[item.OtherId];
  315. var src = "off-line.png"
  316. if (model.UserOnLine == 1) {
  317. src = "on-line.png"
  318. }
  319. html += '<li>';
  320. html += '<div class="message-oneface"><img src="' + top.contentPath + '/Content/images/' + src + '" /></div>';
  321. html += '<div data-value="' + model.UserId + '" class="message-onename">' + model.RealName + ' <span>[' + model.DepartmentId + ']</span></div>';
  322. if (item.UnReadNum > 0) {
  323. html += '<span class="message-count">' + item.UnReadNum + '</span>';
  324. }
  325. html += '</li>';
  326. });
  327. $ul.append(html);
  328. $ul.find('li').hover(function () {
  329. $(this).find('span').show();
  330. }, function () {
  331. $(this).find('span').hide();
  332. })
  333. //打开聊天窗口
  334. OpenChatWindow();
  335. //关闭聊天窗口
  336. CloseChatWindow();
  337. }
  338. //打开聊天窗口
  339. function OpenChatWindow() {
  340. $message_wrap.find('.message-chatlist li').click(function () {
  341. $message_window.show();
  342. var id = $(this).find('.message-onename').attr('data-value');
  343. var name = $(this).find('.message-onename').text();
  344. defaults.toUserId = id;
  345. defaults.toUserName = name;
  346. defaults.windowId = id;
  347. $message_window.find('.message-window-header .text').html('与 ' + name + ' 聊天中')
  348. $message_window.find('.message-window-chat').scrollTop($message_window.find('.message-window-chat')[0].scrollHeight);
  349. $message_window.find('.message-window-chat').find('.message-window-content').html('');
  350. //IMIconflash(0);
  351. imMethod.IMGetMsgList(1, 5, id, function (data) {
  352. imMethod.IMUpdateMessageStatus(id);
  353. $.each(data, function (i) {
  354. GetMessage(data[i].SendId, data[i].Content, data[i].CreateDate, true);
  355. });
  356. //显示消息未读条数
  357. imMethod.IMGetUnReadMsgNumList(function (num) {
  358. $message_wrap.find('.message-count').html(num);
  359. });
  360. $(this).find('.message-count').html("");
  361. });
  362. });
  363. }
  364. //关闭聊天窗口
  365. function CloseChatWindow() {
  366. $message_window.find('.message-window-header .close').click(function () {
  367. $message_window.hide();
  368. defaults.windowId = "";
  369. })
  370. }
  371. SendMessage();
  372. //发消息
  373. function SendMessage() {
  374. var $textarea = $message_window.find('.message-window-send').find('textarea');
  375. $textarea.bind('keypress', function (event) {
  376. if (event.keyCode == "13") {
  377. var sendText = $(this).val();
  378. if (sendText) {
  379. imMethod.IMSendToOne(options.toUserId, sendText);
  380. $message_window.find('.message-window-send').html('<textarea autofocus placeholder="按回车发送消息,shift+回车换行"></textarea>');
  381. SendMessage();
  382. }
  383. }
  384. });
  385. }
  386. //收消息
  387. function GetMessage(fromUer, content, dateTime,flag) {
  388. if (fromUer != options.userId) {
  389. if (options.windowId == fromUer)
  390. {
  391. var html = '<div class="left"><div class="author-name">';
  392. html += '<img src="/Content/images/on-line.png" />';
  393. html += '<small class="chat-text">' + options.toUserName + '</small>';
  394. html += '<small class="chat-date">' + dateTime + '</small>';
  395. html += '</div><div class="chat-message"><em></em>' + content + '</div></div>';
  396. $message_window.find('.message-window-content').append(html)
  397. $message_window.find('.message-window-chat').scrollTop($message_window.find('.message-window-chat')[0].scrollHeight);
  398. }
  399. if (flag == undefined) {
  400. //统计未读消息总数量
  401. if (options.windowId != fromUer) {
  402. var num = parseInt($message_wrap.find('.message-count').html());
  403. num += 1;
  404. if (num > 99) {
  405. num = 99;
  406. }
  407. $message_wrap.find('.message-count').html(num);
  408. IMIconflash(1);
  409. }
  410. else {//如果窗口是打开的就判定为已读
  411. imMethod.IMUpdateMessageStatus(fromUer);
  412. }
  413. }
  414. } else {
  415. var html = '<div class="right"><div class="author-name">';
  416. html += '<small class="chat-date">2015-11-25 11:24</small>';
  417. html += '<small class="chat-text">' + options.userName + '</small>';
  418. html += '<img src="/Content/images/on-line.png" />';
  419. html += '</div>';
  420. html += '<div class="chat-message"><em></em>' + content + '</div></div>';
  421. $message_window.find('.message-window-content').append(html)
  422. $message_window.find('.message-window-chat').scrollTop($message_window.find('.message-window-chat')[0].scrollHeight);
  423. }
  424. }
  425. }
  426. //图标闪乐
  427. var IMinterval;
  428. IMIconflash = function (state) {
  429. var $obj = $("#icon_message");
  430. if (state == 1) {
  431. if ($('body').find('embed').length == 0) {
  432. $('body').append('<embed src="' + top.contentPath + '/Content/images/video/5103.wav">');
  433. }
  434. else {
  435. $('embed').remove();
  436. $('body').append('<embed src="' + top.contentPath + '/Content/images/video/5103.wav">');
  437. }
  438. IMinterval = setInterval(function () {
  439. if (!$obj.hasClass('_ok')) {
  440. $obj.addClass('_ok');
  441. $obj.hide();
  442. } else {
  443. $obj.removeClass('_ok');
  444. $obj.show();
  445. }
  446. }, 400);
  447. } else {
  448. $obj.removeClass('_ok');
  449. $obj.show();
  450. clearInterval(IMinterval);
  451. }
  452. }
  453. //服务端断开,移除消息窗体
  454. IMRemove = function () {
  455. var $obj = $('#btn_message');
  456. var $messagewrap = $('.message-wrap');
  457. $obj.remove();
  458. $messagewrap.remove();
  459. top.dialogTop("消息服务器连接不上", "error");
  460. }