JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序

2020-05-22 16:09:00易采站长站整理

var $body = this.find(“body”);
// 向接收信息区域写入发送的数据
$body.append(_opts.receiveMessageTpl(userName, styleTpl, content, flag));
// 滚动条滚到底部
this.scrollTop(this.height());
});
}
},
// 发送消息
sendHandler: function ($chatMain) {
var doc = $chatMain.find(“iframe[name^=’sendMessage’]”).get(0).contentWindow.document;
var content = doc.body.innerHTML;
content = $.trim(content);
content = content.replace(new RegExp(“<br>”, “gm”), “”);
// 获取即将发送的内容
if (content) {
var sender = $chatMain.attr(“sender”);
var receiverId = $chatMain.attr(“id”);
// 接收区域写消息
_opts.writeReceiveMessage(receiverId, sender, content, true);
//############# XXX
var receiver = $chatMain.find(“#to”).val();
//var receiver = $chatMain.attr(“receiver”);
// 判断是否是手机端会话,如果是就发送纯text,否则就发送html代码
var flag = _opts.isMobileClient(receiver);
if (flag) {
var text = $(doc.body).text();
text = $.trim(text);
if (text) {
// 远程发送消息
remote.jsjac.chat.sendMessage(text, receiver);
}
} else { // 非手机端通信 可以发送html代码
var styleTpl = _opts.sendMessageStyle.getStyleTpl();
content = [ “<span style='”, styleTpl, “‘>”, content, “</span>” ].join(“”);
remote.jsjac.chat.sendMessage(content, receiver);
}
// 清空发送区域
$(doc).find(“body”).html(“”);
}
},
faceImagePath: “images/emotions/”,
faceElTpl: function (i) {
return [
“<img src='”,
this.faceImagePath,
(i – 1),
“fixed.bmp’ gif='”,
this.faceImagePath,
(i – 1),
“.gif’/>”
].join(“”);
},
// 创建表情html elements
createFaceElement: function ($chat) {
var faces = [];
for (var i = 1; i < 100; i++) {
faces.push(this.faceElTpl(i));
if (i % 11 == 0) {
faces.push(“<br/>”);
}
}
$chat.find(“#face”).html(faces.join(“”));
this.faceHandler($chat);
},
// 插入表情
faceHandler: function ($chat) {
$chat.find(“#face img”).click(function () {
$chat.find(“#face”).hide(150);
var imgEL = “<img src='” + $(this).attr(“gif”) + “‘/>”;
var $chatMain = $(this).parents(“.chat-main”);
var win = $chatMain.find(“iframe[name^=’sendMessage’]”).get(0).contentWindow;
var doc = win.document;
sendMessageEditor.insertAtCursor(imgEL, doc, win);
});
// 表情隐藏
$chat.find(“#face, #face img”).mouseover(function () {
window.clearTimeout(faceTimed);