La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

聊天支持识别url

master
xsx 1 year ago
parent
c16099a936
commit
c81ef0f2b5
8 changed files with 71 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      im-uniapp/common/emotion.js
  2. 15
      im-uniapp/common/url.js
  3. 17
      im-uniapp/components/chat-message-item/chat-message-item.vue
  4. 18
      im-uniapp/im.scss
  5. 2
      im-uniapp/main.js
  6. 15
      im-web/src/api/url.js
  7. 17
      im-web/src/components/chat/ChatMessageItem.vue
  8. 2
      im-web/src/main.js

6
im-uniapp/common/emotion.js
View File

@ -26,7 +26,11 @@ let transform = (content, extClass) => {
let textToPath = (emoText) => { let textToPath = (emoText) => {
let word = emoText.replace(/\#|\;/gi, ''); let word = emoText.replace(/\#|\;/gi, '');
let idx = emoTextList.indexOf(word); let idx = emoTextList.indexOf(word);
return `/static/emoji/${idx}.gif`; let baseUrl = "/"
// #ifdef H5
baseUrl = window.location.pathname;
// #endif
return `${baseUrl}static/emoji/${idx}.gif`;
} }

15
im-uniapp/common/url.js
View File

@ -0,0 +1,15 @@
let replaceURLWithHTMLLinks = (content, color) => {
// 使用正则表达式匹配更广泛的URL格式
const urlRegex = /(?:https?:\/\/[^\s]+|www\.[^\s]+)/g;
return content.replace(urlRegex, (url) => {
// 如果URL不以http(s)://开头，则添加http://前缀
if (!url.startsWith("http")) {
url = "http://" + url;
}
return `<a href="${url}" target="_blank" style="color: ${color};text-decoration: underline;">${url}</a>`;
});
}
export default {
replaceURLWithHTMLLinks
}

17
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -17,7 +17,8 @@
<view class="chat-msg-bottom"> <view class="chat-msg-bottom">
<view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"> <view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT">
<long-press-menu :items="menuItems" @select="onSelectMenu"> <long-press-menu :items="menuItems" @select="onSelectMenu">
<rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content,'emoji-normal')"></rich-text> <up-parse class="chat-msg-text" :showImgMenu="false" :content="nodesText"></up-parse>
<!-- <rich-text class="chat-msg-text" :nodes="nodesText"></rich-text> -->
</long-press-menu> </long-press-menu>
</view> </view>
<view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"> <view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
@ -47,7 +48,8 @@
<text title="发送失败" v-if="loadFail" @click="onSendFail" <text title="发送失败" v-if="loadFail" @click="onSendFail"
class="send-fail iconfont icon-warning-circle-fill"></text> class="send-fail iconfont icon-warning-circle-fill"></text>
</view> </view>
<long-press-menu v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu"> <long-press-menu v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" :items="menuItems"
@select="onSelectMenu">
<view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()"> <view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
<text class="iconfont icon-voice-play"></text> <text class="iconfont icon-voice-play"></text>
<text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text> <text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text>
@ -162,10 +164,10 @@ export default {
onShowReadedBox() { onShowReadedBox() {
this.$refs.chatGroupReaded.open(); this.$refs.chatGroupReaded.open();
}, },
emit(){ emit() {
this.$emit("audioStateChange",this.audioPlayState,this.msgInfo); this.$emit("audioStateChange", this.audioPlayState, this.msgInfo);
}, },
stopPlayAudio(){ stopPlayAudio() {
if (this.innerAudioContext) { if (this.innerAudioContext) {
this.innerAudioContext.stop(); this.innerAudioContext.stop();
this.innerAudioContext = null; this.innerAudioContext = null;
@ -230,6 +232,11 @@ export default {
isNormal() { isNormal() {
const type = this.msgInfo.type; const type = this.msgInfo.type;
return this.$msgType.isNormal(type) || this.$msgType.isAction(type) return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
},
nodesText() {
let color = this.msgInfo.selfSend ? 'white' : '';
let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
return this.$emo.transform(text, 'emoji-normal')
} }
} }

18
im-uniapp/im.scss
View File

@ -174,19 +174,19 @@ button[size='mini'] {
} }
.emoji-large { .emoji-large {
width: 64rpx; width: 64rpx !important;
height: 64rpx; height: 64rpx !important;
vertical-align: bottom; vertical-align: bottom !important;
} }
.emoji-normal { .emoji-normal {
width: 54rpx; width: 54rpx !important;
height: 54rpx; height: 54rpx !important;
vertical-align: bottom; vertical-align: bottom !important;
} }
.emoji-small { .emoji-small {
width: 36rpx; width: 36rpx !important;
height: 36rpx; height: 36rpx !important;
vertical-align: bottom; vertical-align: bottom !important;
} }

2
im-uniapp/main.js
View File

@ -1,6 +1,7 @@
import App from './App' import App from './App'
import request from './common/request'; import request from './common/request';
import emotion from './common/emotion.js'; import emotion from './common/emotion.js';
import url from './common/url.js';
import * as enums from './common/enums.js'; import * as enums from './common/enums.js';
import * as date from './common/date'; import * as date from './common/date';
import * as socketApi from './common/wssocket'; import * as socketApi from './common/wssocket';
@ -39,6 +40,7 @@ export function createApp() {
app.config.globalProperties.$wsApi = socketApi; app.config.globalProperties.$wsApi = socketApi;
app.config.globalProperties.$msgType = messageType; app.config.globalProperties.$msgType = messageType;
app.config.globalProperties.$emo = emotion; app.config.globalProperties.$emo = emotion;
app.config.globalProperties.$url = url;
app.config.globalProperties.$enums = enums; app.config.globalProperties.$enums = enums;
app.config.globalProperties.$date = date; app.config.globalProperties.$date = date;
app.config.globalProperties.$rc = recorder; app.config.globalProperties.$rc = recorder;

15
im-web/src/api/url.js
View File

@ -0,0 +1,15 @@
let replaceURLWithHTMLLinks = (content, color) => {
// 使用正则表达式匹配更广泛的URL格式
const urlRegex = /(?:https?:\/\/[^\s]+|www\.[^\s]+)/g;
return content.replace(urlRegex, (url) => {
// 如果URL不以http(s)://开头，则添加http://前缀
if (!url.startsWith("http")) {
url = "http://" + url;
}
return `<a href="${url}" target="_blank" style="color: ${color};text-decoration: underline;">${url}</a>`;
});
}
export default {
replaceURLWithHTMLLinks
}

17
im-web/src/components/chat/ChatMessageItem.vue
View File

@ -22,7 +22,7 @@
<div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)"> <div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)">
<div ref="chatMsgBox"> <div ref="chatMsgBox">
<span class="chat-msg-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT" <span class="chat-msg-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"
v-html="$emo.transform(msgInfo.content)"></span> v-html="htmlText"></span>
<div class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"> <div class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
<div class="img-load-box" v-loading="loading" element-loading-text="上传中.." <div class="img-load-box" v-loading="loading" element-loading-text="上传中.."
element-loading-background="rgba(0, 0, 0, 0.4)"> element-loading-background="rgba(0, 0, 0, 0.4)">
@ -51,10 +51,10 @@
<audio controls :src="JSON.parse(msgInfo.content).url"></audio> <audio controls :src="JSON.parse(msgInfo.content).url"></audio>
</div> </div>
<div class="chat-action chat-msg-text" v-if="isAction"> <div class="chat-action chat-msg-text" v-if="isAction">
<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫" @click="$emit('call')" <span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫"
class="iconfont icon-chat-voice"></span> @click="$emit('call')" class="iconfont icon-chat-voice"></span>
<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫" @click="$emit('call')" <span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫"
class="iconfont icon-chat-video"></span> @click="$emit('call')" class="iconfont icon-chat-video"></span>
<span>{{ msgInfo.content }}</span> <span>{{ msgInfo.content }}</span>
</div> </div>
<div class="chat-msg-status" v-if="!isAction"> <div class="chat-msg-status" v-if="!isAction">
@ -203,6 +203,11 @@ export default {
isNormal() { isNormal() {
const type = this.msgInfo.type; const type = this.msgInfo.type;
return this.$msgType.isNormal(type) || this.$msgType.isAction(type) return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
},
htmlText() {
let color = this.msgInfo.selfSend ? 'white' : '';
let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
return this.$emo.transform(text)
} }
} }
} }
@ -472,4 +477,4 @@ export default {
} }
} }
</style> </style>

2
im-web/src/main.js
View File

@ -9,6 +9,7 @@ import httpRequest from './api/httpRequest';
import * as socketApi from './api/wssocket'; import * as socketApi from './api/wssocket';
import * as messageType from './api/messageType'; import * as messageType from './api/messageType';
import emotion from './api/emotion.js'; import emotion from './api/emotion.js';
import url from './api/url.js';
import element from './api/element.js'; import element from './api/element.js';
import store from './store'; import store from './store';
import * as enums from './api/enums.js'; import * as enums from './api/enums.js';
@ -22,6 +23,7 @@ Vue.prototype.$msgType = messageType
Vue.prototype.$date = date; Vue.prototype.$date = date;
Vue.prototype.$http = httpRequest // http请求方法 Vue.prototype.$http = httpRequest // http请求方法
Vue.prototype.$emo = emotion; // emo表情 Vue.prototype.$emo = emotion; // emo表情
Vue.prototype.$url = url; // url转换
Vue.prototype.$elm = element; // 元素操作 Vue.prototype.$elm = element; // 元素操作
Vue.prototype.$enums = enums; // 枚举 Vue.prototype.$enums = enums; // 枚举
Vue.prototype.$eventBus = new Vue(); // 全局事件 Vue.prototype.$eventBus = new Vue(); // 全局事件

Write Preview
Loading…
Cancel
Save