Skip to content

o2oa
o2oa

此号慢热型 / o2oa
与 Fork 源项目一致

Fork自 浙江兰德纵横网络技术股份有限公司 / o2oa

通知 5
Star 0
Fork 0
o2oa
o2oa

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c34fc71f 编写于 作者: F fancy
浏览文件
操作

IM消息web端解析

上级 ad5b4db2
隐藏空白更改
内联 并排
Showing with 216 addition and 63 deletion
o2web/source/o2_core/o2/xAction/services/x_message_assemble_communicate.json
浏览文件 @ c34fc71f
......@@ -12,5 +12,7 @@
"messageListAll": {"uri": "/jaxrs/consume/list/{consume}/count/{count}"},
"messageList": {"uri": "/jaxrs/consume/list/{consume}/currentperson/count/{count}"},
"messageUpdate": {"uri": "/jaxrs/consume/type/{type}", "method": "PUT"},
"messageUpdateSingle": {"uri": "/jaxrs/consume/{id}/type/{type}"}
"messageUpdateSingle": {"uri": "/jaxrs/consume/{id}/type/{type}"},
"imgFileDownloadWithWH":{"uri":"/jaxrs/im/msg/download/{id}/image/width/{width}/height/{height}"},
"imgFileDownload":{"uri":"/jaxrs/im/msg/download/{id}"}
}
\ No newline at end of file
o2web/source/x_component_IMV2/$Main/default/chattest.html
浏览文件 @ c34fc71f
......@@ -133,6 +133,19 @@
text-indent: -12px;
}
.chat-sender .img-chat {
width:192px;
height:144px;
display: table-cell;
vertical-align: middle;
}
.chat-sender .img-chat img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.chat-receiver {
clear: both;
font-size: 80%;
......@@ -158,6 +171,19 @@
border-radius: 7px;
}
.chat-receiver .img-chat {
width:192px;
height:144px;
display: table-cell;
vertical-align: middle;
}
.chat-receiver .img-chat img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.chat-receiver div:first-child img,
.chat-sender div:first-child img {
width: 40px;
......@@ -296,6 +322,25 @@
<span>你被群主移除群聊</span>
</div>
<!-- Left -->
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<audio src="http://api.muliba.net/media?id=0085f051-224d-4513-919e-f2ad8980a128" controls="controls" preload id="music1" />
</div>
</div>
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<div class="img-chat">
<img src="https://13315641.s21i.faiusr.com/2/1/ABUIABACGAAg796F5wUo0Ou0ETCqDTjlCQ!1500x1500.jpg">
</div>
</div>
</div>
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
......@@ -304,6 +349,17 @@
<span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>
</div>
</div>
<div class="chat-sender">
<div><img src="img/mike.png"></div>
<div>麦克</div>
<div>
<div class="chat-left_triangle"></div>
<span>
<img src="icons/location.png" height="32" width="32">
<a href="https://api.map.baidu.com/marker?location=30.28295614138489,120.12924599847905&title=浙江省杭州市西湖区文三路492号&content=浙江中小企业大厦东北83米&output=html&src=net.o2oa.map" target="_blank">浙江省杭州市西湖区文三路492号</a>
</span>
</div>
</div>
<!-- Right -->
<div class="chat-receiver">
<div><img src="img/max.png"></div>
......@@ -313,6 +369,27 @@
<span> 最后但并非最不重要的是</span>
</div>
</div>
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<div class="img-chat">
<img src="https://13315641.s21i.faiusr.com/2/1/ABUIABACGAAg796F5wUo0Ou0ETCqDTjlCQ!1500x1500.jpg">
</div>
</div>
</div>
<div class="chat-receiver">
<div><img src="img/max.png"></div>
<div>好人·马克思</div>
<div>
<div class="chat-right_triangle"></div>
<audio src="http://api.muliba.net/media?id=0085f051-224d-4513-919e-f2ad8980a128" controls="controls" preload id="music1" />
</div>
</div>
<!-- Notice/Center -->
<div class="chat-notice">
<span>你被群主移除群聊</span>
......@@ -332,7 +409,7 @@
</div>
</div>
</div>
<div style="position: absolute;width:630px;height: 260px;left: 5px;bottom: 155px;background-color: #ffffff;border: 1px solid #F1F1F1; padding-top: 8px;border-radius: 8px; box-shadow: 5px 5px #1d1d1d10;z-index: 100;">
<div style="display:none;position: absolute;width:630px;height: 260px;left: 5px;bottom: 155px;background-color: #ffffff;border: 1px solid #F1F1F1; padding-top: 8px;border-radius: 8px; box-shadow: 5px 5px #1d1d1d10;z-index: 100;">
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left; margin: 5px;" />
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
......
o2web/source/x_component_IMV2/$Main/default/style.css
浏览文件 @ c34fc71f
......@@ -292,7 +292,19 @@
border-radius: 7px;
text-indent: -12px;
}
.chat-sender .img-chat {
width:192px;
height:144px;
display: table-cell;
vertical-align: middle;
}
.chat-sender .img-chat img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.chat-receiver {
clear: both;
/* font-size: 80%; */
......@@ -309,6 +321,18 @@
/* font-size: 70%; */
text-align: right;
}
.chat-receiver .img-chat {
width:192px;
height:144px;
display: table-cell;
vertical-align: middle;
}
.chat-receiver .img-chat img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.chat-receiver div:nth-of-type(3) {
/*float:right;*/
......
o2web/source/x_component_IMV2/Main.js
浏览文件 @ c34fc71f
......@@ -15,7 +15,7 @@ MWF.xApplication.IMV2.Main = new Class({
"isResize": true,
"isMax": true,
"title": MWF.xApplication.IMV2.LP.title,
"conversationId":""
"conversationId": ""
},
onQueryLoad: function () {
this.lp = MWF.xApplication.IMV2.LP;
......@@ -25,15 +25,15 @@ MWF.xApplication.IMV2.Main = new Class({
this.messageList = [];
this.emojiList = [];
//添加87个表情
for (var i=1; i < 88; i++) {
for (var i = 1; i < 88; i++) {
var emoji = {
"key" : i > 9 ? "["+i+"]" : "[0"+i+"]",
"path" : i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_"+i+".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0"+i+".png",
"key": i > 9 ? "[" + i + "]" : "[0" + i + "]",
"path": i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_" + i + ".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0" + i + ".png",
};
this.emojiList.push(emoji);
}
},
onQueryClose: function(){
onQueryClose: function () {
this.closeListening()
},
loadApplication: function (callback) {
......@@ -53,16 +53,16 @@ MWF.xApplication.IMV2.Main = new Class({
}.bind(this));
},
startListening:function(){
startListening: function () {
this.messageNumber = layout.desktop.message.items.length;
//查询ws消息 如果增加
if (this.listener) {
clearInterval(this.listener);
}
this.listener = setInterval(function(){
this.listener = setInterval(function () {
var newNumber = layout.desktop.message.items.length;
//判断是否有新的ws消息
if(newNumber > this.messageNumber) {
if (newNumber > this.messageNumber) {
//查询会话数据
this._checkConversationMessage();
//查询聊天数据
......@@ -71,7 +71,7 @@ MWF.xApplication.IMV2.Main = new Class({
}
}.bind(this), 1000);
},
closeListening: function() {
closeListening: function () {
if (this.listener) {
clearInterval(this.listener);
}
......@@ -82,7 +82,7 @@ MWF.xApplication.IMV2.Main = new Class({
var chat = list[i];
var itemNode = this._createConvItemNode(chat);
this.conversationNodeItemList.push(itemNode);
if(this.conversationId && this.conversationId == chat.id) {
if (this.conversationId && this.conversationId == chat.id) {
this.tapConv(chat);
}
}
......@@ -127,18 +127,18 @@ MWF.xApplication.IMV2.Main = new Class({
}
},
//点击表情按钮
showEmojiBox: function() {
if(!this.emojiBoxNode) {
showEmojiBox: function () {
if (!this.emojiBoxNode) {
this.emojiBoxNode = new Element("div", { "class": "chat-emoji-box" }).inject(this.chatNode);
var _self = this;
for(var i=0; i<this.emojiList.length; i++) {
for (var i = 0; i < this.emojiList.length; i++) {
var emoji = this.emojiList[i];
var emojiNode = new Element("img", {"src": emoji.path, "class": "chat-emoji-img"}).inject(this.emojiBoxNode);
var emojiNode = new Element("img", { "src": emoji.path, "class": "chat-emoji-img" }).inject(this.emojiBoxNode);
emojiNode.addEvents({
"mousedown": function (ev) {
_self.sendEmojiMsg(this.emoji);
_self.hideEmojiBox();
}.bind({emoji: emoji})
}.bind({ emoji: emoji })
});
}
}
......@@ -146,13 +146,13 @@ MWF.xApplication.IMV2.Main = new Class({
this.hideFun = this.hideEmojiBox.bind(this);
document.body.addEvent("mousedown", this.hideFun);
},
hideEmojiBox: function() {
hideEmojiBox: function () {
//关闭emojiBoxNode
this.emojiBoxNode.setStyle("display", "none");
document.body.removeEvent("mousedown", this.hideFun);
},
//发送表情消息
sendEmojiMsg: function(emoji) {
sendEmojiMsg: function (emoji) {
console.log("发送表情消息");
this._newAndSendTextMsg(emoji.key, "emoji");
},
......@@ -177,12 +177,12 @@ MWF.xApplication.IMV2.Main = new Class({
var isOld = false;
for (var i = 0; i < _self.conversationNodeItemList.length; i++) {
var c = _self.conversationNodeItemList[i];
if (newConv.id == c.data.id) {
if (newConv.id == c.data.id) {
isOld = true;
_self.tapConv(c);
}
}
if(!isOld) {
if (!isOld) {
var itemNode = _self._createConvItemNode(newConv);
_self.conversationNodeItemList.push(itemNode);
_self.tapConv(newConv);
......@@ -234,7 +234,7 @@ MWF.xApplication.IMV2.Main = new Class({
this._refreshConvMessage(textMessage);
},
//刷新会话Item里面的最后消息内容
_refreshConvMessage: function(msg) {
_refreshConvMessage: function (msg) {
for (var i = 0; i < this.conversationNodeItemList.length; i++) {
var node = this.conversationNodeItemList[i];
if (node.data.id == this.conversationId) {
......@@ -243,7 +243,7 @@ MWF.xApplication.IMV2.Main = new Class({
}
},
//检查会话列表是否有更新
_checkConversationMessage: function() {
_checkConversationMessage: function () {
o2.Actions.load("x_message_assemble_communicate").ImAction.myConversationList(function (json) {
if (json.data && json.data instanceof Array) {
var newConList = json.data;
......@@ -259,7 +259,7 @@ MWF.xApplication.IMV2.Main = new Class({
}
}
//新会话 创建
if(isNew) {
if (isNew) {
var itemNode = this._createConvItemNode(nCv);
this.conversationNodeItemList.push(itemNode);
}
......@@ -269,12 +269,12 @@ MWF.xApplication.IMV2.Main = new Class({
}.bind(this));
},
//检查是否有新消息
_checkNewMessage: function() {
_checkNewMessage: function () {
if (this.conversationId && this.conversationId != "") {//是否有会话窗口
var data = { "conversationId": this.conversationId };
o2.Actions.load("x_message_assemble_communicate").ImAction.msgListByPaging(1, 10, data, function (json) {
var list = json.data;
if(list && list.length > 0) {
if (list && list.length > 0) {
var msg = list[0];
//检查聊天框是否有变化
if (this.conversationId == msg.conversationId) {
......@@ -282,11 +282,11 @@ MWF.xApplication.IMV2.Main = new Class({
var isnew = true;
var m = list[i];
for (var j = 0; j < this.messageList.length; j++) {
if(this.messageList[j].id == m.id) {
if (this.messageList[j].id == m.id) {
isnew = false;
}
}
if(isnew) {
if (isnew) {
this.messageList.push(m);
this._buildMsgNode(m, false);
// this._refreshConvMessage(m);
......@@ -294,7 +294,7 @@ MWF.xApplication.IMV2.Main = new Class({
}
}
}
}.bind(this), function (error) {
console.log(error);
}.bind(this), false);
......@@ -333,17 +333,35 @@ MWF.xApplication.IMV2.Main = new Class({
//text
if (msgBody.type == "emoji") { // 表情
var img = "";
for (var i=0; i< this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
for (var i = 0; i < this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
img = this.emojiList[i].path;
}
}
}
new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode);
}else {//text
new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode);
} else if (msgBody.type == "image") {//image
var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode);
var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
new Element("img", { "src": url }).inject(imgBox);
imgBox.addEvents({
"click": function(e){
var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
window.open(downloadUrl);
}.bind(this)
});
} else if (msgBody.type == "audio") {
var url = this._getFileDownloadUrl(msgBody.fileId);
new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode);
} else if (msgBody.type == "location") {
var mapBox = new Element("span").inject(lastNode);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox);
var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox);
} else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
if(!isTop) {
if (!isTop) {
var scrollFx = new Fx.Scroll(this.chatContentNode);
scrollFx.toBottom();
}
......@@ -366,24 +384,63 @@ MWF.xApplication.IMV2.Main = new Class({
var nameNode = new Element("div", { "text": name }).inject(receiverBodyNode);
var lastNode = new Element("div").inject(receiverBodyNode);
var lastFirstNode = new Element("div", { "class": "chat-right_triangle" }).inject(lastNode);
if (msgBody.type == "emoji") { // 表情
var img = "";
for (var i=0; i< this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
for (var i = 0; i < this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
img = this.emojiList[i].path;
}
}
}
new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode);
}else {//text
new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode);
} else if (msgBody.type == "image") {//image
var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode);
var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
new Element("img", { "src": url }).inject(imgBox);
imgBox.addEvents({
"click": function(e){
var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
window.open(downloadUrl);
}.bind(this)
});
} else if (msgBody.type == "audio") {
var url = this._getFileDownloadUrl(msgBody.fileId);
new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode);
} else if (msgBody.type == "location") {
var mapBox = new Element("span").inject(lastNode);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox);
var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox);
} else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
if(!isTop) {
if (!isTop) {
var scrollFx = new Fx.Scroll(this.chatContentNode);
scrollFx.toBottom();
}
},
//图片 根据大小 url
_getFileUrlWithWH(id, width, height) {
var action = MWF.Actions.get("x_message_assemble_communicate").action;
var url = action.address + action.actions.imgFileDownloadWithWH.uri;
url = url.replace("{id}", encodeURIComponent(id));
url = url.replace("{width}", encodeURIComponent(width));
url = url.replace("{height}", encodeURIComponent(height));
return url;
},
//file 下载的url
_getFileDownloadUrl(id) {
var action = MWF.Actions.get("x_message_assemble_communicate").action;
var url = action.address + action.actions.imgFileDownload.uri;
url = url.replace("{id}", encodeURIComponent(id));
return url;
},
//百度地图打开地址
_getBaiduMapUrl(lat, longt, address, content) {
var url = "https://api.map.baidu.com/marker?location="+lat+","+longt+"&title="+address+"&content="+content+"&output=html&src=net.o2oa.map";
return url;
},
//用户头像
_getIcon: function (id) {
var orgAction = MWF.Actions.get("x_organization_assemble_control")
......@@ -528,19 +585,19 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode);
this.messageTimeNode = new Element("div", { "class": "body_time", "text": convData.time }).inject(bodyUpNode);
if (convData.lastMessageType == "emoji") {
this.lastMessageNode = new Element("div", { "class": "body_down"}).inject(bodyNode);
this.lastMessageNode = new Element("div", { "class": "body_down" }).inject(bodyNode);
var imgPath = "";
for(var i = 0; i < this.main.emojiList.length ; i++) {
for (var i = 0; i < this.main.emojiList.length; i++) {
var emoji = this.main.emojiList[i];
if (emoji.key == convData.lastMessage) {
imgPath = emoji.path;
}
}
new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode);
}else {
new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode);
} else {
this.lastMessageNode = new Element("div", { "class": "body_down", "text": convData.lastMessage }).inject(bodyNode);
}
var _self = this;
this.node.addEvents({
"click": function () {
......@@ -549,40 +606,33 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
});
},
/**
* {
"id": uuid,
"conversationId": this.conversationId,
"body": bodyJson,
"createPerson": distinguishedName,
"createTime": time,
"sendStatus": 1
};
*
* 刷新会话列表的最后消息内容
* @param {*} lastMessage
*/
refreshLastMsg: function(lastMessage) {
refreshLastMsg: function (lastMessage) {
//目前是text 类型的消息
var jsonbody = lastMessage.body;
var body = JSON.parse(jsonbody);
if(this.lastMessageNode) {
if (this.lastMessageNode) {
if (body.type == "emoji") { //表情 消息
var imgPath = "";
for(var i = 0; i < this.main.emojiList.length ; i++) {
for (var i = 0; i < this.main.emojiList.length; i++) {
var emoji = this.main.emojiList[i];
if (emoji.key == body.body) {
imgPath = emoji.path;
}
}
this.lastMessageNode.empty();
new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode);
}else { //文本消息
new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode);
} else { //文本消息
this.lastMessageNode.empty();
this.lastMessageNode.set('text', body.body);
}
}
var time = this.main._friendlyTime(o2.common.toDate(lastMessage.createTime));
if(this.messageTimeNode) {
if (this.messageTimeNode) {
this.messageTimeNode.set("text", time);
}
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或