From 756508629130677be9f6ff211fd3625fdce3c117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B?= <994041296@163.com> Date: Fri, 13 Jan 2023 10:52:12 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E8=A1=A8=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 4 +- pages/mine/im/index.vue | 53 +++++++++---- pages/mine/im/socket.js | 166 ++++++++++++++++++++++++++++++++++++++++ utils/emojis.js | 145 +++++++++++++++++++++++++++++++++++ 4 files changed, 351 insertions(+), 17 deletions(-) create mode 100644 pages/mine/im/socket.js create mode 100644 utils/emojis.js diff --git a/main.js b/main.js index 03cf4ef..d801508 100644 --- a/main.js +++ b/main.js @@ -5,13 +5,14 @@ import uView from "uview-ui"; import store from "./store"; import config from '@/config/config'; import airBtn from "@/components/m-airbtn/index.vue"; +import socketIO from './pages/mine/im/socket'; /** * 仅在h5中显示唤醒app功能 * 在h5页面手动挂载 * */ // #ifdef H5 -if(config.enableMiniBarStartUpApp){ +if (config.enableMiniBarStartUpApp) { let btn = Vue.component("airBtn", airBtn); //全局注册 document.body.appendChild(new btn().$mount().$el); } @@ -31,6 +32,7 @@ Object.keys(filters).forEach((key) => { // 引入Vuex Vue.prototype.$store = store; +// Vue.prototype.socketIo = new socketIO(); Vue.use(uView); Vue.config.productionTip = false; diff --git a/pages/mine/im/index.vue b/pages/mine/im/index.vue index 164779b..58560d4 100644 --- a/pages/mine/im/index.vue +++ b/pages/mine/im/index.vue @@ -19,7 +19,10 @@ {{ user.nickName }} - {{ item.text }} + {{ item.text }} + @@ -73,7 +76,10 @@ {{ toUser.name }} - {{ item.text }} + {{ item.text }} + @@ -204,6 +210,7 @@ import { beautifyTime } from "@/utils/filters.js" import config from '@/config/config.js' +import { textReplaceEmoji, emojistwo } from '@/utils/emojis.js'; export default { // 页面卸载后清除imGoodId onUnload () { @@ -216,7 +223,8 @@ export default { } }, onLoad (options) { - this.sokcet(); + console.log(5555555555555555); + console.log(emojistwo); // 没有goodsid则不显示 发送商品弹窗 this.showHideModel = options.goodsid // 发送后刷新页面不显示 发送商品弹窗 local里面imGoodId不为空显示 @@ -278,6 +286,8 @@ export default { data () { return { + textReplaceEmoji, + emojistwo, socketOpen: false, //是否连接 storage, fixed: 'fixed', @@ -400,17 +410,21 @@ export default { uni.onSocketOpen(function (res) { _this.socketOpen = true; }); - // 监听连接失败 - uni.onSocketError(function (err) { - if (err && err.code !== 1000) { - setTimeout(function () { - _this.socketOpen = true; - uni.connectSocket({ - url: url, - }); - }, 5 * 1000) - } - }); + if (!this.socketOpen) { + // 监听连接失败 + uni.onSocketError(function (err) { + let count = 0; + if (count < 3) { + if (err && err.code !== 1000) { + _this.socketOpen = true; + uni.connectSocket({ + url: url, + }); + count = count + 1 + } + } + }); + } // 监听连接关闭 uni.onSocketClose(function (err) { if (err && err.code !== 1000) { @@ -424,8 +438,15 @@ export default { }); // 监听收到信息 uni.onSocketMessage(function (res) { - console.log(res.data, 'resresresresresres'); - uni.hideLoading() + console.log(res.data); + res.data = JSON.parse(res.data) + console.log(res.data.result); + if (res.data.messageResultType == 'MESSAGE') { + _this.msgList.push(res.data.result) + console.log(_this.msgList) + } + console.log(res.data) + _this.msgGo() }) } catch (e) { diff --git a/pages/mine/im/socket.js b/pages/mine/im/socket.js new file mode 100644 index 0000000..eae548d --- /dev/null +++ b/pages/mine/im/socket.js @@ -0,0 +1,166 @@ +import config from '@/config/config.js' +import storage from '@/utils/storage'; +class socketIO { + constructor(data, time, url) { + this.socketTask = null + this.is_open_socket = false //避免重复连接 + this.url = config.baseWsUrl + '/' + storage.getAccessToken() //连接地址 + this.data = data ? data : null + this.connectNum = 1 // 重连次数 + this.traderDetailIndex = 100 // traderDetailIndex ==2 重连 + this.accountStateIndex = 100 // traderDetailIndex ==1 重连 + this.followFlake = false // traderDetailIndex == true 重连 + //心跳检测 + this.timeout = time ? time : 15000 //多少秒执行检测 + this.heartbeatInterval = null //检测服务器端是否还活着 + this.reconnectTimeOut = null //重连之后多久再次重连 + } + // 进入这个页面的时候创建websocket连接【整个页面随时使用】 + connectSocketInit (data) { + this.data = data + this.socketTask = uni.connectSocket({ + url: this.url, + success: () => { + console.log("正准备建立websocket中..."); + // 返回实例 + return this.socketTask + }, + }); + this.socketTask.onOpen((res) => { + this.connectNum = 1 + console.log("WebSocket连接正常！"); + this.send(data) + clearInterval(this.reconnectTimeOut) + clearInterval(this.heartbeatInterval) + this.is_open_socket = true; + this.start(); + // 注：只有连接正常打开中 ，才能正常收到消息 + this.socketTask.onMessage((e) => { + // 字符串转json + let res = JSON.parse(e.data); + console.log("res---------->", res) // 这里 查看 推送过来的消息 + if (res.data) { + uni.$emit('getPositonsOrder', res); + } + }); + }) + // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接 + uni.onSocketError((res) => { + console.log('WebSocket连接打开失败，请检查！'); + this.socketTask = null + this.is_open_socket = false; + clearInterval(this.heartbeatInterval) + clearInterval(this.reconnectTimeOut) + uni.$off('getPositonsOrder') + if (this.connectNum < 6) { + uni.showToast({ + title: `WebSocket连接失败，正尝试第${this.connectNum}次连接`, + icon: "none" + }) + this.reconnect(); + this.connectNum += 1 + } else { + uni.$emit('connectError'); + this.connectNum = 1 + } + }); + // 这里仅是事件监听【如果socket关闭了会执行】 + this.socketTask.onClose(() => { + console.log("已经被关闭了-------") + clearInterval(this.heartbeatInterval) + clearInterval(this.reconnectTimeOut) + this.is_open_socket = false; + this.socketTask = null + uni.$off('getPositonsOrder') + if (this.connectNum < 6) { + this.reconnect(); + } else { + uni.$emit('connectError'); + this.connectNum = 1 + } + }) + } + // 主动关闭socket连接 + Close () { + if (!this.is_open_socket) { + return + } + this.socketTask.close({ + success () { + uni.showToast({ + title: 'SocketTask 关闭成功', + icon: "none" + }); + } + }); + } + //发送消息 + send (data) { + console.log("data---------->", data); + // 注：只有连接正常打开中 ，才能正常成功发送消息 + if (this.socketTask) { + this.socketTask.send({ + data: JSON.stringify(data), + async success () { + console.log("消息发送成功"); + }, + }); + } + } + //开启心跳检测 + start () { + this.heartbeatInterval = setInterval(() => { + this.send({ + "traderid": 10260, + "type": "Ping" + }); + }, this.timeout) + } + //重新连接 + reconnect () { + //停止发送心跳 + clearInterval(this.heartbeatInterval) + //如果不是人为关闭的话，进行重连 + if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this + .followFlake)) { + this.reconnectTimeOut = setInterval(() => { + this.connectSocketInit(this.data); + }, 5000) + } + } + /** + * @description 将 scoket 数据进行过滤 + * @param {array} array + * @param {string} type 区分 弹窗 openposition 分为跟随和我的 + */ + arrayFilter (array, type = 'normal', signalId = 0) { + let arr1 = [] + let arr2 = [] + let obj = { + arr1: [], + arr2: [] + } + arr1 = array.filter(v => v.flwsig == true) + arr2 = array.filter(v => v.flwsig == false) + if (type == 'normal') { + if (signalId) { + arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId) + return arr1 + } else { + return arr1.concat(arr2) + } + } else { + if (signalId > 0) { + arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId) + obj.arr1 = arr1 + } else { + obj.arr1 = arr1 + } + obj.arr2 = arr2 + return obj + } + } +} +export { + socketIO +} \ No newline at end of file diff --git a/utils/emojis.js b/utils/emojis.js new file mode 100644 index 0000000..9b41d77 --- /dev/null +++ b/utils/emojis.js @@ -0,0 +1,145 @@ +/** + * 动态表情 + */ +const emojis = { + "[微笑]": "", + "[撇嘴]": "", + "[色]": "", + "[发呆]": "", + "[得意]": "", + "[流泪]": "", + "[害羞]": "", + "[闭嘴]": "", + "[睡]": "", + "[大哭]": "", + "[尴尬]": "", + "[发怒]": "", + "[调皮]": "", + "[呲牙]": "", + "[惊讶]": "", + "[难过]": "", + "[酷]": "", + "[冷汗]": "", + "[抓狂]": "", + "[吐]": "", + "[偷笑]": "", + "[可爱]": "", + "[白眼]": "", + "[傲慢]": "", + "[饥饿]": "", + "[困]": "", + "[惊恐]": "", + "[流汗]": "", + "[憨笑]": "", + "[大兵]": "", + "[奋斗]": "", + "[咒骂]": "", + "[疑问]": "", + "[嘘]": "", + "[晕]": "", + "[折磨]": "", + "[衰]": "", + "[骷髅]": "", + "[敲打]": "", + "[再见]": "", + "[擦汗]": "", + "[抠鼻]": "", + "[鼓掌]": "", + "[糗大了]": "", + "[坏笑]": "", + "[左哼哼]": "", + "[右哼哼]": "", + "[哈欠]": "", + "[鄙视]": "", + "[委屈]": "", + "[快哭了]": "", + "[阴险]": "", + "[亲亲]": "", + "[吓]": "", + "[可怜]": "", + "[菜刀]": "", + "[西瓜]": "", + "[啤酒]": "", + "[篮球]": "", + "[乒乓]": "", + "[咖啡]": "", + "[饭]": "", + "[猪头]": "", + "[玫瑰]": "", + "[凋谢]": "", + "[示爱]": "", + "[爱心]": "", + "[心碎]": "", + "[蛋糕]": "", + "[闪电]": "", + "[炸弹]": "", + "[刀]": "", + "[足球]": "", + "[瓢虫]": "", + "[便便]": "", + "[月亮]": "", + "[太阳]": "", + "[礼物]": "", + "[拥抱]": "", + "[强]": "", + "[弱]": "", + "[握手]": "", + "[胜利]": "", + "[抱拳]": "", + "[勾引]": "", + "[拳头]": "", + "[差劲]": "", + "[爱你]": "", + "[NO]": "", + "[OK]": "", + "[爱情]": "", + "[飞吻]": "", + "[跳跳]": "", + "[发抖]": "", + "[怄火]": "", + "[转圈]": "", + "[磕头]": "", + "[回头]": "", + "[跳绳]": "", + "[挥手]": "", + "[激动]": "", + "[街舞]": "", + "[献吻]": "", + "[左太极]": "", + "[右太极]": "", +}; + +/** +* 符号表情 +*/ +const symbol = [ + "😠", "😩", "😲", "😞", "😵", "😰", "😒", "😍", "😤", "😜", "😝", "😋", "😘", "😚", "😷", + "😳", "😃", "😅", "😆", "😁", "😂", "😊", "☺", "😄", "😢", + "😭", "😨", "😣", "😡", "😌", "😖", "😔", "😱", "😪", "😏", "😓", "😥", "😫", "😉", + "✊", "✋", "✌", "👊", "👍", "☝", "👆", "👇", "👈", "👉", + "👋", "👏", "👌", "👎" +]; + +const emojisKeys = Object.keys(emojis); + +export const emojiList = { + symbol, + emojis +} + +const regEmoji = emojisKeys.map((value) => '|\\' + value).join('').replace('|', '') + +/** +* 替换表情文字 +* +* @param {String} content 需要替换的字符串 +*/ +export function textReplaceEmoji (content) { + if (!content) { + return "" + } + return content.replace(new RegExp(`(${regEmoji})`, 'gi'), ($0, $1) => { + return emojis[$1]; + }); +} +export const emojistwo = Object.keys(emojis) \ No newline at end of file